Kako preglednik rastavlja HTML i gradi stranicu (critical rendering path)?

Question

Accepted Answer

**critical rendering path** je niz koraka koje preglednik poduzima da pretvori HTML, CSS i JS u piksele. Razumijevanje toga objašnjava što blokira rendriranje i kako učiniti da se stranice brže iscrtavaju. ## Koraci ```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 ``` ## Što blokira rendriranje **CSS blokira rendriranje.** Preglednik neće iscrtati dok CSSOM nije spreman (kako bi se izbjegao bljesak nestylanog sadržaja). Dakle, veliki/spora CSS odgađa prvi prikaz — čuvajte kritičan CSS mali i inline ga kada je moguće. **Sinkroni skriptovi blokiraju parser.** Običan ` ``` Gore, sinkroni skript koji trebačitanja CSSOM (npr. čitanje izračunatih stilova) čeka CSS također — tako da CSS datoteka može indirektno blokirati skript, koji blokira parser. ## Kako to optimizirati - Stavite CSS u `` (učitajte ga rano); inline kritičan CSS. - Dodajte `defer` (ili `type="module"`) skriptama, ili ih postavite prije ``. - Minimizirajte i kompresirajte CSS/JS; uklonite nekorištena pravila. - Upotrijebite `preload` za kritične fontove/sredstva, `preconnect` za ključne izvore. - Izbjegavajte layout thrashing (ponovljeno čitanje/pisanje rasporeda u JS) — to forsira dodatne reflows. ## Zašto je to važno Critical rendering path određuje metrike kao First Contentful Paint i Largest Contentful Paint. Znajući da CSS blokira rendriranje i da sinkroni JS blokira analizu, točno vam govori zašto `defer`/`async`, inlinanirani kritičan CSS i resource hints ubrzavaju stranicu — skraćuju ili deblokira ovu putanju.