Digital Transformation
Element Timing API
TL;DR: Element Timing API adalah API browser yang memberi sinyal kapan elemen DOM dengan atribut
elementtimingselesai dirender ke layar. Berguna untuk mengukur waktu paint elemen kunci di luar Largest Contentful Paint, misal hero kedua atau testimonial, sehingga optimasi rendering lebih granular.
Apa itu Element Timing API?
Element Timing API adalah standar Web Performance yang memungkinkan developer menandai elemen tertentu untuk diukur waktu render-nya. Cukup tambahkan atribut elementtiming="hero-image" pada elemen <img> atau <p> text node, lalu observasi via PerformanceObserver. Browser akan mencatat renderTime dan loadTime.
Berbeda dengan LCP yang otomatis memilih elemen terbesar, Element Timing memberi kontrol penuh. Tim bisa memilih elemen yang secara bisnis penting, misal headline penawaran atau gambar produk utama, untuk dipantau secara terpisah.
Cara Kerja
| Langkah | Aksi |
|---|---|
| Tandai elemen | Tambah atribut elementtiming="nama-unik" di HTML |
| Observasi | new PerformanceObserver(callback).observe({type: 'element', buffered: true}) |
| Catat metrik | Akses entry.renderTime (waktu paint) dan entry.identifier |
| Kirim ke RUM | Forward data ke endpoint analytics atau Real User Monitoring |
Implementasi singkat di Next.js berbentuk komponen useEffect yang mendaftarkan observer pada mount halaman.
Kenapa Penting?
Untuk pemilik website bisnis di Indonesia, Element Timing menjawab kelemahan LCP standar: kadang browser memilih elemen yang tidak penting secara konversi. Misalnya logo header dipilih sebagai LCP, padahal yang ingin diukur adalah waktu munculnya headline CTA. Dengan Element Timing, tim marketing bisa mengukur metrik yang sejajar dengan KPI bisnis, bukan hanya KPI teknis.
Element Timing juga membantu A/B test komponen UI berat. Jika varian baru menambah delay paint hero kedua sebesar 400 ms, data ini langsung terlihat tanpa menunggu agregat CrUX. Praktik ini sudah saya pakai pada beberapa portofolio klien personal branding untuk memvalidasi sebelum scale.
Pertanyaan Umum
Apakah Element Timing menggantikan LCP?
Tidak. LCP tetap menjadi faktor peringkat Core Web Vitals. Element Timing adalah alat pelengkap untuk mengukur elemen kustom di luar elemen LCP default.
Berapa banyak elemen yang boleh ditandai?
Tidak ada batas spesifik dari spesifikasi, tapi praktik wajar 3-7 elemen kunci per halaman supaya data tetap manageable di RUM dashboard.
Istilah Terkait