Digital Transformation
Critical Rendering Path
TL;DR: Critical Rendering Path (CRP) adalah urutan kerja browser sejak menerima HTML pertama sampai piksel pertama tampil di layar. Tahapannya: parse HTML jadi DOM, parse CSS jadi CSSOM, gabungkan jadi render tree, hitung layout, lalu paint. Memahami CRP penting karena setiap milidetik di jalur ini langsung mempengaruhi LCP dan FCP.
Apa itu Critical Rendering Path?
CRP adalah pipeline rendering browser. Browser tidak bisa menampilkan halaman sebelum minimal HTML dan CSS yang dibutuhkan tahap awal selesai diproses. Ibaratnya seperti membuat kopi: bubuk (HTML) dan air panas (CSS) harus berkumpul dulu sebelum bisa diseduh (render). Kalau salah satu tertahan, semua proses ikut tertahan.
JavaScript yang ditemui parser bisa memblokir konstruksi DOM kalau tidak diberi atribut async atau defer. Stylesheet di <head> memblokir render sampai selesai diunduh dan di-parse menjadi CSSOM. Inilah alasan kenapa render-blocking resource sering jadi penyebab utama LCP yang lambat.
Tahapan Critical Rendering Path
| Tahap | Apa yang Terjadi |
|---|---|
| 1. DOM construction | Browser parse HTML jadi pohon DOM |
| 2. CSSOM construction | Browser parse CSS jadi CSSOM, blocking |
| 3. Render tree | Gabungan DOM + CSSOM yang akan dirender |
| 4. Layout (reflow) | Hitung posisi dan ukuran tiap node |
| 5. Paint | Gambar piksel ke layar |
| 6. Composite | Layer-layer digabungkan oleh GPU |
Cara Mengoptimalkan CRP
Tiga teknik yang paling sering saya pakai di proyek client: pertama, inline critical CSS untuk halaman atas-fold dan defer sisa CSS. Kedua, gunakan defer atau type="module" untuk script non-kritis sehingga tidak memblokir parser. Ketiga, kurangi jumlah font weight yang dimuat dan gunakan font-display: swap agar teks tidak invisible saat font sedang diunduh.
Saat optimasi LMS Atmo, perpindahan dari 4 font weight ke 2 dan inlining critical CSS sekitar 14 KB menurunkan LCP sekitar 0,8 detik di koneksi 4G simulasi.
Pertanyaan Umum
Apakah CRP sama dengan [TTFB](/glosarium/ttfb-time-to-first-byte)?
Tidak. TTFB mengukur waktu byte pertama dari server, sedangkan CRP terjadi di sisi browser setelah byte diterima.
Apakah framework seperti Next.js mengoptimalkan CRP otomatis?
Sebagian. Next.js menyertakan code splitting, automatic font optimization, dan inlining CSS kritis, tapi developer tetap perlu memantau bundle size dan render-blocking script pihak ketiga.
Istilah Terkait