Digital Transformation
Render-Blocking Resources
TL;DR: Render-blocking resources adalah file CSS dan JavaScript yang wajib diproses browser sebelum konten halaman muncul di layar. Semakin banyak resource yang memblokir render, semakin lama waktu tunggu pengguna melihat halaman, dan ini langsung menekan skor performa.
Apa itu Render-Blocking Resources?
Render-blocking resources adalah berkas yang menghentikan proses penggambaran halaman sampai berkas itu selesai diunduh dan dieksekusi. Bayangkan browser sebagai juru masak yang tidak boleh menyajikan satu piring pun sampai semua bumbu di daftar wajib tersedia. CSS bersifat render-blocking secara default karena browser butuh aturan tata letak sebelum menggambar. JavaScript tanpa atribut async atau defer juga menghentikan parsing HTML. Konsep ini erat kaitannya dengan Core Web Vitals dan metrik First Contentful Paint.
Penyebab Umum
| Sumber | Dampak | Penanganan |
|---|---|---|
| CSS eksternal besar | Menunda first paint | Inline critical CSS, lazy-load sisanya |
Script sinkron di <head> | Memblokir parsing HTML | Tambah defer atau async |
Font web tanpa font-display | Teks tertunda muncul | Gunakan font-display: swap |
| Library pihak ketiga | Menambah waktu eksekusi | Muat saat dibutuhkan saja |
Kenapa Penting?
Setiap resource yang memblokir render menambah jeda antara klik dan tampil. Dalam beberapa audit performa yang saya jalankan di proyek client, memindahkan script analitik ke defer dan menginline CSS kritis memangkas waktu tampil awal secara terukur tanpa mengubah desain. Untuk pasar Indonesia dengan koneksi seluler yang bervariasi, mengurangi render-blocking resources adalah salah satu perbaikan paling hemat usaha. Panduan teknisnya bisa dirujuk ke dokumentasi web.dev soal render-blocking.
Pertanyaan Umum
Apakah semua CSS itu render-blocking?
Secara default ya, tapi Anda bisa menandai CSS non-kritis dengan teknik media query atau memuatnya secara asinkron sehingga tidak menahan first paint.
Apa beda async dan defer pada script?
async mengunduh paralel lalu langsung mengeksekusi begitu siap, sedangkan defer mengunduh paralel tapi menunda eksekusi sampai HTML selesai diparse. Untuk script yang butuh urutan, defer lebih aman.
Istilah Terkait