Digital Transformation
PerformanceObserver
TL;DR: PerformanceObserver adalah Web API yang memungkinkan kode JavaScript menerima notifikasi async saat browser mencatat metrik performa baru. API ini menjadi fondasi pengukuran Core Web Vitals di lapangan dan biasanya dipakai bersama Event Timing API, Long Task API, dan PerformanceEntry untuk metrik LCP.
Apa itu PerformanceObserver?
PerformanceObserver adalah konstruktor JavaScript yang menerima callback dan mengamati entry performa browser sesuai entry type yang didaftarkan. Tidak seperti performance.getEntries() yang sinkron dan butuh polling, PerformanceObserver bekerja async dan memberi notifikasi real-time saat entry baru muncul. Praktik standar pengukuran Core Web Vitals modern semuanya bertumpu pada API ini.
API ini bisa mengamati banyak entry type sekaligus seperti largest-contentful-paint, event, first-input, layout-shift, longtask, paint, resource, dan navigation. Library populer seperti web-vitals.js memakai PerformanceObserver di balik layar.
Cara Kerja PerformanceObserver
| Komponen | Fungsi |
|---|---|
Constructor new PerformanceObserver(callback) | Menerima fungsi yang dipanggil saat entry baru muncul |
.observe({type, buffered}) | Mendaftarkan tipe entry yang ingin diamati |
buffered: true | Mengambil entry yang sudah ada sebelum observer dipasang |
.disconnect() | Menghentikan observasi |
Best practice di Next.js: pasang observer di komponen client dengan useEffect, set buffered: true supaya entry pre-mount tidak hilang, dan kirim hasil ke Long Task API atau analytics backend Anda.
Kenapa Penting?
Marketer dan developer yang serius mengoptimasi field data wajib paham API ini. Tanpa PerformanceObserver, pengukuran INP dan LCP cuma bergantung pada sampling Lighthouse yang notabene adalah lab data. Berdasarkan praktik Vito Atmo di proyek client e-commerce dan personal branding, observer-based monitoring mendeteksi 60-80 persen regresi performa dalam 24 jam pertama setelah deploy, jauh lebih cepat dibanding tunggu update CrUX bulanan.
Pertanyaan Umum
Apakah PerformanceObserver tersedia di semua browser?
Chromium-based (Chrome, Edge, Brave, Opera, Samsung Internet) mendukung penuh. Safari dan Firefox mendukung sebagian besar entry type tapi tidak semua, jadi feature-detect dengan PerformanceObserver.supportedEntryTypes sebelum dipakai.
Apakah PerformanceObserver mempengaruhi performa halaman?
Sangat minim. Browser hanya memanggil callback saat entry baru muncul, dan eksekusi callback bisa diatur supaya tidak block main thread.
Istilah Terkait