Digital Transformation
Render-Blocking Resource
TL;DR: Render-blocking resource adalah file CSS atau JavaScript yang wajib dimuat browser sebelum halaman tampil, sehingga menunda render pertama. Mengurangi atau menunda resource ini adalah salah satu cara tercepat memperbaiki LCP dan skor Core Web Vitals.
Apa itu Render-Blocking Resource?
Render-blocking resource adalah berkas yang menghentikan proses penggambaran halaman sampai berkas itu selesai diunduh dan dieksekusi. Browser memperlakukan CSS di dalam <head> dan JavaScript sinkron sebagai sesuatu yang wajib diproses lebih dulu, karena keduanya bisa mengubah tampilan akhir halaman. Analoginya seperti antrean di pintu masuk: selama satu orang belum lewat, sisa antrean ikut tertahan. Akibatnya pengguna melihat layar kosong lebih lama, dan metrik seperti LCP ikut memburuk.
Jenis dan Cara Menanganinya
| Jenis resource | Dampak | Penanganan umum |
|---|---|---|
CSS di <head> | Menunda first paint | Inline critical CSS, sisanya dimuat async |
| JavaScript sinkron | Memblok parsing HTML | Tambah atribut defer atau async |
| Font web | Teks tertunda muncul | font-display: swap, preload font utama |
Dalam beberapa audit kecepatan yang Vito Atmo lakukan untuk website klien, memindahkan script pihak ketiga ke defer dan menginline CSS kritikal sering memangkas waktu render awal beberapa ratus milidetik tanpa mengubah desain sama sekali.
Kenapa Penting?
Render-blocking resource berhubungan langsung dengan kecepatan yang dirasakan pengguna dan dengan Core Web Vitals, yang sejak 2021 menjadi sinyal peringkat Google. Untuk bisnis di Indonesia dengan mayoritas trafik seluler dan jaringan yang bervariasi, setiap detik tambahan saat memuat halaman menambah risiko pengunjung pergi sebelum konten tampil. Mengurangi resource pemblokir adalah optimasi berdampak tinggi dengan risiko rendah.
Pertanyaan Umum
Apakah semua CSS itu render-blocking?
Secara default ya, tetapi hanya CSS yang dibutuhkan untuk tampilan awal yang benar-benar kritikal. Sisanya bisa dimuat secara asinkron agar tidak menahan render.
Apa beda defer dan async pada script?
defer menjalankan script setelah HTML selesai diparse dan menjaga urutan, sementara async menjalankan segera setelah diunduh tanpa menjamin urutan. Untuk sebagian besar kasus, defer lebih aman.