Digital Transformation
DOMContentLoaded
Event browser yang memberi sinyal bahwa HTML awal halaman sudah selesai diparse, meski resource eksternal seperti gambar, stylesheet, dan iframe belum tentu selesai dimuat.
TL;DR: DOMContentLoaded adalah event browser yang dipicu segera setelah dokumen HTML selesai dibaca, tanpa menunggu CSS atau gambar. Marketer dan developer memakainya untuk menjalankan skrip awal seperti tracking ringan agar tidak menghambat rendering.
Apa itu DOMContentLoaded?
DOMContentLoaded adalah event yang dijalankan browser ketika DOM tree (struktur HTML) sudah siap diakses dan dimanipulasi via JavaScript. Berbeda dengan event load yang menunggu seluruh resource eksternal selesai, DOMContentLoaded dipicu lebih awal. Per spesifikasi WHATWG, urutan eksekusi mengikuti aturan parser blocking, sehingga skrip non-async tetap memengaruhi timing-nya. Konsep ini sering disandingkan dengan first contentful paint untuk mendiagnosis bottleneck rendering.
Bagaimana Cara Kerjanya?
Tabel berikut membandingkan DOMContentLoaded dengan event sejenis.
| Event | Dipicu Saat | Cocok Untuk |
|---|---|---|
| DOMContentLoaded | DOM siap, belum tunggu image/CSS lengkap | Inisialisasi script ringan, tracking awal |
| load | Semua resource eksternal selesai | Lazy-load fitur berat, animasi pasca-render |
| readystatechange | Setiap perubahan status dokumen | Polifill kompatibilitas lama |
Penundaan DOMContentLoaded biasanya disebabkan render-blocking JavaScript. Praktik standar memakai atribut defer atau async agar skrip tidak menghambat parser. Pendekatan ini berkontribusi pada perbaikan interaction to next paint di halaman kompleks.
Kenapa Penting?
Bagi marketer Indonesia, DOMContentLoaded menentukan kapan tag GTM mulai aktif. Tag yang menunggu event load sering kehilangan data pengguna yang sudah scroll atau klik sebelum semua gambar selesai. Bagi developer, event ini batas alami untuk inisialisasi state UI yang tidak butuh asset visual.
Pertanyaan Umum
Apa beda DOMContentLoaded dengan window.onload?
DOMContentLoaded dipicu setelah HTML diparse, biasanya beberapa ratus milidetik lebih cepat dari load. window.onload menunggu image, font, dan iframe selesai. Pilih DOMContentLoaded untuk script yang butuh struktur DOM, bukan asset.
Bagaimana cara mengukur DOMContentLoaded di production?
Gunakan PerformanceObserver atau Navigation Timing API. Field ini juga tersedia di GA4 sebagai bagian dari laporan page timing, walaupun saat ini Google lebih merekomendasikan Core Web Vitals.
Istilah Terkait