Uji coba origin Container Timing

Barry Pollard
Jason Williams
José Dapena Paz

Dipublikasikan: 01 Mei 2026

Chrome meluncurkan uji coba origin dari Chrome 148 untuk API performa Pengaturan Waktu Kontainer.

Metrik seperti Largest Contentful Paint (LCP) memberikan ringkasan tingkat tinggi tentang kapan halaman kemungkinan dianggap "dimuat" oleh pengguna dengan melihat waktu paint konten terbesar. Namun, situs mungkin juga tertarik dengan waktu pemuatan bagian tertentu dari halaman, dan bukan hanya bagian "terbesar".

Element Timing memungkinkan situs menandai elemen dengan atribut elementtiming untuk memahami kapan elemen dimuat, apakah elemen tersebut adalah elemen LCP atau bukan. Namun, seperti LCP, metrik ini terbatas untuk mengukur waktu rendering elemen individual.

Waktu Penampung memperluas konsep Waktu Elemen untuk mengukur "blok konten" (atau "penampung"). Dengan begitu, Anda dapat memahami kapan seluruh komponen tersedia bagi pengguna, seperti widget, kartu, bagian konten, sidebar... apa pun! Laporan ini memberikan informasi performa tambahan untuk situs yang menginginkan insight tambahan yang dapat diberikannya.

Container Timing, yang dikembangkan oleh Bloomberg dan diimplementasikan di Chrome oleh Igalia, tersedia di balik tanda untuk pengguna Chrome dan browser berbasis Chromium lainnya, serta tersedia bagi situs untuk diuji di lapangan melalui uji coba origin.

Uji coba origin adalah salah satu langkah terakhir dalam meluncurkan API. Dalam uji coba ini, developer dapat mengaktifkan fitur di situs mereka sebelum diluncurkan secara default untuk mengujinya, dan memberi tahu tim apakah fitur tersebut berfungsi seperti yang diharapkan dan terbukti bermanfaat. Selain itu, developer dapat menyarankan perubahan pada desain API sebelum peluncuran.

Cara kerja Container Timing API

Seperti Pengaturan Waktu Elemen, Pengaturan Waktu Penampung berfungsi dengan menambahkan atribut (containertiming) ke berbagai elemen HTML untuk menunjukkan kepada browser bahwa elemen ini harus diukur:

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

PerformanceObserver kemudian memungkinkan Anda mengamati paint dalam penampung tersebut dengan cara yang sama seperti metrik performa lainnya:

<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>

Saat elemen baru digambar dalam penampung, entri performa baru akan dikeluarkan dengan informasi yang diperbarui. Karena elemen baru dapat ditambahkan selama masa aktif halaman, tidak ada satu titik penyelesaian pun. Hal ini mirip dengan LCP, yang biasanya diukur di akhir halaman, saat keluar dari halaman.

Metrik performa ini kemudian dapat dikirim kembali ke analisis untuk pemantauan dan analisis.

Penampung turunan juga dapat diabaikan dengan atribut containertiming-ignore:

<div containertiming="main-content">

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

</div>

Demo

CodePen berikut menunjukkan cara kerja Container Timing API:

Demo Pengaturan Waktu Kontainer (sumber)

Anda juga dapat melihatnya dalam tindakan di video berikut jika browser Anda tidak mendukung Container Timing API:

Video demo Pengukuran Waktu Kontainer (sumber)

Pembaruan apa yang dihitung untuk Timing Container?

Tujuan Pengaturan Waktu Penampung adalah untuk merekam saat penampung dimuat dengan semua elemen turunan. Metrik ini tidak dimaksudkan untuk mengukur setiap paint mendatang—banyak di antaranya mungkin tiba jauh kemudian saat pengguna berinteraksi dengan penampung atau halaman. Oleh karena itu, serupa dengan LCP dan Element Timing, Container Timing bergantung pada "contentful paint" dan juga tidak memancarkan entri paint baru untuk elemen yang telah dihitung sebagai memiliki contentful paint.

Misalnya, jika penampung awalnya dirender hanya dengan warna latar belakang, atau hanya berisi elemen yang tidak berisi konten (misalnya, layar kerangka), maka tidak ada entri container yang akan dipancarkan hingga beberapa konten ditambahkan ke penampung.

Untuk contoh pembaruan, memperbarui teks pada elemen yang ada dalam penampung tidak akan menghasilkan entri container baru untuk pembaruan tersebut karena hanya paint pertama konten untuk elemen yang dipertimbangkan. Namun, jika teks ditambahkan ke elemen kosong, atau elemen baru tambahan ditambahkan untuk teks tersebut, entri container baru akan dikeluarkan karena ini akan menjadi paint pertama elemen tersebut.

Mendeteksi dukungan Container Timing

Atribut containertiming tidak akan menyebabkan masalah pada browser yang tidak mendukung, sehingga tidak perlu dideteksi fitur.

PerformanceObserver akan mengabaikan entri baru, tetapi entri tersebut dapat menyebabkan peringatan di DevTools, jadi sebaiknya deteksi fitur sebelum menambahkan pengamat dengan kode seperti:

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

Praktik terbaik

Ada beberapa praktik terbaik yang harus diikuti untuk penggunaan Waktu Container yang optimal:

  • Tetapkan atribut lebih awal: Tambahkan atribut containertiming dalam dokumen HTML, atau sebelum elemen ditambahkan ke dokumen untuk pelacakan yang lengkap. Menambahkan atribut setelahnya dengan JavaScript dapat menyebabkan paint terlewat.
  • Gunakan ID yang bermakna: Pilih nama deskriptif untuk atribut containertiming agar analisis lebih mudah.
  • Penempatan strategis: Terapkan containertiming ke bagian semantik yang penting untuk metrik Anda, misalnya, hero-section, product-grid, checkout-form. Tidak semua penampung perlu diukur.
  • Abaikan konten yang tidak relevan: Gunakan containertiming-ignore pada elemen turunan yang tidak boleh memengaruhi metrik komponen Anda seperti iklan atau elemen dekoratif.

Bagaimana cara mengaktifkan Waktu Penampung?

Container Timing API dapat diaktifkan dari Chrome 147 menggunakan tanda chrome://flags/#enable-experimental-web-platform-features dan dari command line menggunakan tanda --enable-blink-features=ContainerTiming.

Mulai Chrome 148, situs dapat mendaftar untuk mendapatkan token uji coba origin dan menambahkannya ke halaman mereka agar fitur diaktifkan secara otomatis. Dengan begitu, Anda dapat menguji API di lapangan pada pengguna sungguhan. Metrik Waktu Penampung dapat direkam dalam analisis dan dianalisis untuk memverifikasi apakah API berfungsi seperti yang diharapkan dan mengumpulkan insight.

Masukan dan detail selengkapnya

Masukan tentang Container Timing API harus disampaikan sebagai masalah di GitHub.

Ada juga spesifikasi yang sedang dalam proses standardisasi. Bagi yang tertarik dengan cara kerja API ini secara internal, Igalia telah memublikasikan postingan tentang cara penerapan teknis API ini.

Kesimpulan

Kami senang melihat API ini hampir dirilis dan kami ingin segera memberikannya kepada developer untuk mendapatkan insight baru tentang masalah performa. Kami menantikan masukan tentang API dan, jika semuanya berjalan lancar, kami akan meluncurkannya segera setelahnya.