Container Timing kaynak denemesi

Barry Pollard
Jason Williams
José Dapena Paz

Yayın tarihi: 1 Mayıs 2026

Chrome, Container Timing performans API'si için Chrome 148'den itibaren kaynak denemesi başlatıyor.

Largest Contentful Paint (LCP) gibi metrikler, en büyük içerik parçasının boyama süresine bakarak bir sayfanın kullanıcı tarafından ne zaman "yüklendi" olarak kabul edilebileceğine dair üst düzey bir genel bakış sunar. Ancak siteler, yalnızca "en büyük" bölümün değil, sayfanın belirli bölümlerinin ne zaman yüklendiğiyle de ilgilenebilir.

Element Timing, sitelerin öğeleri elementtiming özelliğiyle işaretleyerek ne zaman yüklendiklerini (LCP öğesi olup olmadıklarını) anlamalarını sağlar. Ancak LCP gibi bu metrik de yalnızca tek tek öğelerin oluşturma sürelerini ölçmekle sınırlıdır.

Kapsayıcı Zamanlaması, "içerik bloklarını" (veya "kapsayıcıları") ölçmek için Element Zamanlaması kavramını genişletir. Bu sayede, widget'lar, kartlar, içerik bölümleri, kenar çubukları gibi bileşenlerin tamamının kullanıcıya ne zaman sunulduğunu anlayabilirsiniz. Ek analizler sunmak istediği siteler için ek performans bilgileri sağlar.

Bloomberg tarafından geliştirilen ve Igalia tarafından Chrome'da uygulanan Container Timing, Chrome kullanıcıları ve diğer Chromium tabanlı tarayıcılar için bir işaretin arkasında kullanılabilir. Ayrıca, sitelerin bir kaynak denemesi aracılığıyla sahada test etmesi için de kullanılabilir.

Kaynak denemesi, bir API'nin kullanıma sunulmasının son adımlarından biridir. Bu deneme sırasında geliştiriciler, özelliği varsayılan olarak kullanıma sunulmadan önce sitelerinde etkinleştirerek test edebilir ve ekibe beklendiği gibi çalışıp çalışmadığı ve faydalı olup olmadığı hakkında bilgi verebilir. Ayrıca, geliştiricilerin lansmandan önce API tasarımında değişiklik önermesine de olanak tanır.

Container Timing API'nin işleyiş şekli

Öğe Zamanlaması gibi, Kapsayıcı Zamanlaması da tarayıcıya bu öğelerin ölçülmesi gerektiğini belirtmek için çeşitli HTML öğelerine bir özellik (containertiming) ekleyerek çalışır:

<div containertiming="my-component">
  <h2>Title</h2>
  <div>...</div>
</div>

PerformanceObserver, bu kapsayıcıdaki boyamaları diğer performans metrikleriyle aynı şekilde gözlemlemenizi sağlar:

<script>
  const observer = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      console.log("Container painted:", entry.identifier);
      console.log("First render:", entry.firstRenderTime);
      console.log("Latest paint:", entry.startTime);
      console.log("Painted area:", entry.size);
      console.log("Last painted element:", entry.lastPaintedElement);
    }
  });
  observer.observe({ type: "container", buffered: true });
</script>

Kapsayıcıya yeni öğeler çizildikçe güncellenmiş bilgilerle yeni performans girişleri yayınlanır. Sayfanın kullanım ömrü boyunca yeni öğeler eklenebileceğinden tek bir tamamlama noktası yoktur. Bu metrik, genellikle sayfadan ayrılırken sayfanın sonunda ölçülen LCP'ye benzer.

Bu performans metrikleri daha sonra izleme ve analiz için tekrar analizlere gönderilebilir.

Alt kapsayıcılar da containertiming-ignore özelliğiyle yok sayılabilir:

<div containertiming="main-content">

  <main>...</main>
  
  <!-- This aside and its children will be ignored -->
  <aside containertiming-ignore>...</aside>

</div>

Demo

Aşağıdaki CodePen'de Container Timing API'nin nasıl çalıştığı gösterilmektedir:

Kapsayıcı Zamanlaması Demosu (kaynak)

Tarayıcınız Container Timing API'yi desteklemiyorsa bu özelliği aşağıdaki videoda da görebilirsiniz:

Kapsayıcı Zamanlaması demosunun videosu (kaynak)

Container Timing için hangi güncellemeler geçerlidir?

Kapsayıcı Zamanlaması'nın amacı, kapsayıcının tüm alt öğelerle birlikte yüklendiği zamanı yakalamaktır. Bu metrik, gelecekteki her boyamayı ölçmek için tasarlanmamıştır. Bunların çoğu, kullanıcı kapsayıcı veya sayfayla etkileşimde bulundukça çok daha sonra gerçekleşebilir. Bu nedenle, LCP ve Element Timing'e benzer şekilde Container Timing de "contentful paint"lere bağlıdır ve daha önce contentful paint olarak sayılmış öğeler için yeni paint girişleri yayınlamaz.

Örneğin, bir kapsayıcı başlangıçta yalnızca bir arka plan rengiyle veya yalnızca içerik içermeyen öğelerle (ör. iskelet ekranlar) oluşturulursa kapsayıcıya içerik eklenene kadar container girişi yayınlanmaz.

Güncelleme örneği olarak, kapsayıcıdaki mevcut bir öğede metnin güncellenmesi, yalnızca bir öğenin içeriğinin ilk boyaması dikkate alındığından bu güncelleme için yeni bir container girişiyle sonuçlanmaz. Ancak boş bir öğeye metin eklenirse veya bu metin için ek bir yeni öğe eklenirse bu öğenin ilk boyaması olacağından yeni bir container girişi yayınlanır.

Özellik algılayan Container Timing desteği

containertiming özelliği, desteklenmeyen tarayıcılarda sorunlara neden olmaz. Bu nedenle, özellik algılama işlemi yapılması gerekmez.

PerformanceObserver yeni girişleri yoksayar ancak Geliştirici Araçları'nda uyarılara neden olabilir. Bu nedenle, aşağıdaki gibi bir kodla gözlemci eklemeden önce özellik algılama işlemi yapmanız önerilir:

if (typeof PerformanceContainerTiming !== "undefined") {
  // Container Timing is supported
}

En iyi uygulamalar

Container Zamanlaması'nın en iyi şekilde kullanılması için izlemeniz gereken bazı en iyi uygulamalar vardır:

  • Özellikleri erken ayarlayın: Tam izleme için HTML belgesine veya öğe belgeye eklenmeden önce containertiming özelliğini ekleyin. Özelliğin daha sonra JavaScript ile eklenmesi, boyamaların kaçırılmasına neden olabilir.
  • Anlamlı tanımlayıcılar kullanın: Analizi kolaylaştırmak için containertiming özelliği için açıklayıcı adlar seçin.
  • Stratejik yerleşim: Metrikleriniz için önemli olan semantik bölümlere (ör. hero-section, product-grid, checkout-form) containertiming uygulayın. Her kapsayıcının ölçülmesi gerekmez.
  • Alakasız içerikleri yoksayma: Reklamlar veya dekoratif öğeler gibi bileşen metriklerinizi etkilememesi gereken alt öğelerde containertiming-ignore simgesini kullanın.

Kapsayıcı zamanlaması nasıl etkinleştirilir?

Container Timing API, Chrome 147'den itibaren chrome://flags/#enable-experimental-web-platform-features işareti kullanılarak, komut satırından ise --enable-blink-features=ContainerTiming işareti kullanılarak etkinleştirilebilir.

Chrome 148'den itibaren siteler kaynak denemesi jetonu için kaydolabilir ve özelliği otomatik olarak etkinleştirmek üzere bu jetonu sayfalarına ekleyebilir. Bu sayede, API'yi gerçek kullanıcılarla sahada test edebilirsiniz. Kapsayıcı Zamanlaması metrikleri, API'nin beklendiği gibi çalışıp çalışmadığını doğrulamak ve analizlerden yararlanmak için analizlere kaydedilebilir.

Geri bildirim ve daha fazla ayrıntı

Container Timing API ile ilgili geri bildirimler GitHub'da sorun olarak iletilmelidir.

Ayrıca standardizasyon sürecinde olan bir spesifikasyon da vardır. Bu API'nin dahili olarak nasıl çalıştığını merak edenler için Igalia, API'nin teknik olarak nasıl uygulandığına dair bir yayın paylaştı.

Sonuç

Bu API'nin yayınlanmaya yaklaştığını görmek bizi çok mutlu ediyor. Performans sorunlarıyla ilgili yeni analizler sunmak için bu API'yi geliştiricilerin kullanımına sunmak konusunda heyecanlıyız. API hakkında geri bildirim topladıktan sonra, her şey yolunda giderse kısa süre içinde API'yi kullanıma sunmayı planlıyoruz.