Bagaimana browser mengurai HTML dan membangun halaman (critical rendering path)?

Question

Accepted Answer

**critical rendering path** adalah urutan langkah yang diambil browser untuk mengubah HTML, CSS, dan JS menjadi pixel. Memahaminya menjelaskan apa yang memblokir rendering dan cara membuat halaman cat lebih cepat. ## Langkah-langkahnya ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## Apa yang memblokir rendering **CSS memblokir rendering.** Browser tidak akan cat sampai CSSOM siap (untuk menghindari kilatan konten tanpa gaya). Jadi CSS besar/lambat menunda cat pertama — simpan CSS kritis kecil dan inline jika memungkinkan. **Script sinkron memblokir parser.** ` ``` Lebih buruk lagi, script sinkron yang memerlukan CSSOM (misalnya membaca gaya yang dihitung) juga menunggu CSS — jadi file CSS dapat secara tidak langsung memblokir script, yang memblokir parser. ## Cara mengoptimalkannya - Letakkan CSS di `` (muat lebih awal); inline CSS kritis. - Tambahkan `defer` (atau `type="module"`) ke script, atau tempatkan sebelum ``. - Minimalkan dan kompres CSS/JS; hapus aturan yang tidak digunakan. - Gunakan `preload` untuk font/aset kritis, `preconnect` untuk asal kunci. - Hindari layout thrashing (pembacaan/penulisan tata letak berulang di JS) — itu memaksa reflows tambahan. ## Mengapa ini penting Critical rendering path menentukan metrik seperti First Contentful Paint dan Largest Contentful Paint. Mengetahui bahwa CSS memblokir rendering dan script sinkron memblokir parsing memberi tahu Anda dengan tepat mengapa `defer`/`async`, CSS kritis inline, dan resource hints mempercepat halaman — mereka mempersingkat atau membuka blokir jalur ini.