Optimasi yang baik selalu diawali dan diakhiri dengan pengukuran: ukur dulu untuk menemukan tahap yang paling mahal, terapkan perbaikan, lalu ukur lagi untuk membuktikan dampaknya. Setelah chapter-chapter sebelumnya memperkenalkan alur render dan alat-alatnya, Chapter ini merangkum cara membaca angkanya — mulai dari panel Performance di DevTools, metrik paint bawaan browser, hingga PerformanceObserver yang memungkinkan pengukuran dari dalam halaman sendiri.
Membaca Panel Performance #
Panel Performance merekam semua tahap render yang telah kita pelajari pada Chapter CSS Rendering Overview . Prosedur perekaman yang bisa diulang pada halaman mana pun:
- Buka DevTools, pindah ke panel Performance, lalu aktifkan kotak Disable cache pada panel Network agar pemuatan menggambarkan kunjungan pertama.
- Tekan tombol rekam, lakukan tindakan yang ingin dinilai (muat ulang halaman, membuka menu, menggulir daftar panjang), lalu hentikan perekaman.
- Baca strip Overview di bagian atas: area merah menandai frame yang melewati tenggat; perbesar rentangnya untuk melihat baris Frames di bawahnya.
- Klik satu frame yang bermasalah, lalu baca flame chart: blok Recalculate Style menunjukkan biaya cascade, Layout menunjukkan penghitungan geometri, dan Paint menunjukkan pengisian piksel.
- Perhatikan panggilan berlabel Forced reflow — jejak layout thrashing yang dibahas pada chapter sebelumnya.
Urutan membacanya penting: temukan dulu frame yang lambat, baru telusuri tahap mana yang memakannya. Perbaikan pun diarahkan ke tahap itu — bila Recalculate Style yang dominan, sederhanakan selector dan kurangi jumlah aturan; bila Layout, cek properti geometri yang berubah; bila Paint, kurangi area yang digambar ulang dengan contain.
Metrik Paint yang Tersedia Sejak Awal #
Browser mencatat beberapa metrik waktu secara otomatis dan menyajikannya di panel Network serta dalam kode melalui Paint Timing API :
| Metrik | Menandai | Yang memengaruhinya di sisi CSS |
|---|---|---|
first-paint | Piksel pertama digambar | Ukuran dan sifat render-blocking stylesheet utama |
first-contentful-paint | Konten bermakna pertama (teks, gambar) | Hal di atas, ditambah kecepatan font dan gambar awal |
largest-contentful-paint | Elemen konten terbesar selesai digambar | Gaya, font, dan layout yang menahan elemen tersebut |
Angka-angka ini adalah titik awal yang wajar untuk menyatakan “halaman terasa cepat”: pengguna menilai dari apa yang muncul di layar, bukan dari total byte yang diunduh. Untuk memantau angka yang sama dari dalam halaman — misalnya saat mengembangkan alat audit sendiri — browser menyediakan PerformanceObserver:
new PerformanceObserver((items) => {
for (const e of items.getEntries()) {
console.log(e.name, Math.round(e.startTime) + " ms");
}
}).observe({ type: "paint", buffered: true });Opsi buffered: true membuat entri yang tercatat sebelum observer terpasang tetap diserahkan, sehingga observer boleh dipasang dari skrip mana pun di halaman. Tipe entri longtask melengkapi pemantauan ini dengan melaporkan tugas yang berdurasi di atas 50 ms — termasuk pembaruan gaya dan layout yang berat.
Hasil di Browser:
Daftar metrik pada demo terisi otomatis saat halaman dimuat: entri
first-paint dan first-contentful-paint beserta waktunya dalam milidetik,
plus satu entri longtask berdurasi sekitar 70 ms dari tugas yang sengaja
dipicu. Kartu contoh tampil selebar 320px dengan padding 16px, sudut 8px,
dan badge biru rgb(2, 132, 199) berstatus inline-block; judul berwarna
rgb(30, 64, 175) berukuran 24px.Dengan pengukuran ini, siklus optimasi Section Performance tuntas: pahami alurnya, kurangi byte yang tidak perlu, tata urutan muat, kendalikan animasi, ekang pekerjaan layout, lalu buktikan semuanya dengan angka.