Miten selain jäsentää HTML:ää ja rakentaa sivun (kriittinen renderointipolku)?

Question

Accepted Answer

**Kriittinen renderointipolku** on sarja vaiheita, joiden kautta selain muuttaa HTML:n, CSS:n ja JS:n pikseleiksi. Sen ymmärtäminen selittää, mikä estää renderointia ja kuinka sivut saadaan piirtymään nopeammin. ## Vaiheet ```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 ``` ## Mikä estää renderointia **CSS estää renderointia.** Selain ei piirrä mitään ennen kuin CSSOM on valmis (välttääkseen väärillä väreillä näkyvää sisältöä). Näin ollen suuret tai hitaat CSS-tiedostot viivästyttävät ensimmäistä piirtoa — pidä kriittinen CSS pienenä ja upota se inline-muodossa kun vain mahdollista. **Synkroniset scriptit estävät jäsentämistä.** Tavallinen ` ``` Vieläkään huonompi tilanne on, kun synkroninen script tarvitsee CSSOM:ia (esim. lukee laskettuja tyylejä) — se odottaa CSS:ää, mikä tarkoittaa, että CSS-tiedosto voi epäsuorasti estää scriptiä, joka estää jäsentäjää. ## Kuinka optimoida - Aseta CSS ``-osioon (lataa se aikaisin); upota kriittinen CSS. - Lisää `defer` (tai `type="module"`) scripteihin tai sijoita ne ennen ``-tagia. - Minimoi ja pakkaa CSS/JS; poista käyttämättömät säännöt. - Käytä `preload`-atribuuttia kriittisille fonteille/resursseille, `preconnect`-atribuuttia tärkeille lähteille. - Vältä asettelun sekoittamista (toistuvaa asettelun lukemista/kirjoittamista JS:ssä) — se pakottaa ylimääräisiä uudelleen piirtoja. ## Miksi se on tärkeää Kriittinen renderointipolku määrittää mittareita kuten First Contentful Paint ja Largest Contentful Paint. Ymmärtämällä, että CSS estää renderointia ja synkroniset JS-scriptit estävät jäsentämistä, tiedät tarkalleen miksi `defer`/`async`, upotettava kriittinen CSS ja resurssivihjeet nopeuttavat sivua — ne lyhentävät tai poistavat esteitä tällä polulla.