Critical Rendering Path — Performance

Critical Rendering Path (CRP) Critical Rendering Path adalah urutan langkah yang dilakukan browser dari menerima HTML sampai menampilkan pixel di layar…

Critical Rendering Path (CRP)

Critical Rendering Path adalah urutan langkah yang dilakukan browser dari menerima HTML sampai menampilkan pixel di layar. Memahami CRP adalah fondasi untuk mengoptimasi LCP, INP, dan CLS — setiap detik metrik itu bertambah karena CRP yang tidak efisien.

Tahap CRP

DOM — browser parse HTML menjadi tree. Script tag tanpa defer/async memblokir parse.
CSSOM — browser parse CSS. CSS adalah render-blocking by default: tidak ada pixel yang ditampilkan sampai CSSOM selesai.
Render Tree — gabungan DOM + CSSOM, hanya node yang terlihat (tidak display:none).
Layout (Reflow) — hitung posisi dan ukuran setiap elemen. Mahal untuk DOM yang dalam.
Paint — gambar pixel untuk text, warna, border, shadow.
Composite — gabung layers (transform/opacity layer, scroll layer) menjadi frame akhir. Dijalankan di GPU.

Render-Blocking Resources

CSS → selalu blocking (kecuali media="print" atau media query tidak match).
<script> → parser-blocking + render-blocking: browser hentikan parse HTML sampai script selesai download dan execute.
<script defer> → download paralel, execute setelah DOM selesai parse, sebelum DOMContentLoaded. Tidak blocking render.
<script async> → download paralel, execute segera setelah selesai download (bisa di tengah parse). Gunakan untuk script independen (analytics).

Hubungan CRP dengan Core Web Vitals

LCP = waktu Paint pertama untuk elemen terbesar. LCP lambat biasanya karena:

CSS besar → CSSOM lambat → Render Tree tertunda.
Script blocking di <head> tanpa defer.
Font belum siap → text LCP menunggu.
Gambar LCP tidak di-preload atau di-discover telat.

Cara Mempercepat CRP

Kurangi byte — minify HTML/CSS/JS, gzip/brotli compression.
Kurangi resource kritis — inline critical CSS, defer non-critical JS, preload font LCP.
Perpendek critical path — hindari @import (serial), hilangkan chain redirect, gunakan HTTP/2 push/preload.

<!-- BURUK — script blocking di head -->
<head>
  <link rel="stylesheet" href="big.css">
  <script src="app.js"></script>
</head>

<!-- BAIK — CSS kritis inline, JS di-defer -->
<head>
  <style>/* critical CSS */</style>
  <link rel="preload" href="hero.webp" as="image">
  <script src="app.js" defer></script>
</head>