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
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
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.
