Kriittinen CSS ja renderöinnin estyminen
Upota näkymän yläosan kriittinen CSS suoraan dokumenttiin ja siirrä muut kuin kriittiset tyylit myöhemmäksi renderöinnin estymisen poistamiseksi.
Kriittinen CSS ja renderöinnin estyminen on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Miten selain renderöi sivun
Selain jäsentää HTML:n DOM-puuksi ja CSS:n CSSOM:ksi, yhdistää ne renderöintipuuksi, suorittaa layoutin ja maalaa näkymän. CSS estää renderöinnin, kunnes CSSOM on valmis — jokainen kriittisellä polulla oleva CSS-tavu siirtää ensimmäistä maalausta myöhemmäksi.
Mitä Critical CSS tarkoittaa?
Critical CSS tarkoittaa vähimmäismäärää tyylejä, joita tarvitaan ensimmäisen näkymän sisällön renderöimiseen. Sen lisääminen suoraan <style>-tageihin kohteessa <head> poistaa renderöinnin estävän tyylitiedostopyynnön ensimmäisestä näkymästä.
Renderöinnin estävät resurssit
Mikä tahansa head-osassa oleva <link rel="stylesheet"> estää renderöinnin. Myös script-elementit, joilla ei ole async- tai defer-määritettä, estävät HTML:n jäsentämisen. Renderöinnin estävien resurssien vähentäminen parantaa suoraan Largest Contentful Paint (LCP)- ja First Contentful Paint (FCP) -tuloksia.
Critical CSS:n erottaminen
critical (npm), Penthouse ja Puppeteriin perustuvat erottimet renderöivät sivun tietyillä näkymän kooilla ja keräävät näkyviin elementteihin sovellettavat tyylit. Tuloste lisätään suoraan sivulle, ja koko tyylitiedosto ladataan asynkronisesti.
Ei-kriittisen CSS:n asynkroninen lataaminen
Ladatkaa koko tyylitiedosto estämättä renderöintiä käyttämällä asetusta media="print" yhdessä onload-vaihdon kanssa tai mallia rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Media queryt latausvihjeinä
CSS-tiedostot, jotka ladataan näkymään täsmäämättömällä media queryllä, kuten asetuksella media="print", ladataan matalalla prioriteetilla eivätkä ne estä renderöintiä. Tämä on perinteinen tapa ladata tyylitiedostoja estämättä kriittistä polkua.
HTTP/2 ja CSS:n jakaminen
HTTP/2:n multipleksoinnin ansiosta CSS:n jakaminen useisiin pieniin tiedostoihin aiheuttaa vähemmän yleiskustannuksia kuin HTTP/1:ssä. Ladatkaa kullekin reitille vain tarvittava CSS, kuten home.css ja checkout.css, yhden monoliittisen paketin sijaan, joka sisältää kaikkien sivujen tyylit.
CSS ja preload-skanneri
Selaimen preload-skanneri löytää tyylitiedostojen <link>-elementit varhain ja aloittaa niiden lataamisen ennen kuin HTML-jäsennin saavuttaa ne. Varmistakaa, että tyylitiedostot ovat kohteessa <head>, eivät body-osassa, jotta preload-skanneri löytää ne ajoissa.
Renderöinnin estävän vaikutuksen mittaaminen
Chrome DevToolsin Network-paneeli näyttää resurssien estojan vesiputouskaaviossa. Lighthouse raportoi ongelman "Poista renderöinnin estävät resurssit" ja näyttää resurssikohtaiset säästöt. WebPageTest näyttää arvon renderBlockingResources filmstrip-näkymässään.
Palvelinpuolen Critical CSS
Next.js:n ja Astron kaltaiset frameworkit lisäävät Critical CSS:n automaattisesti sivulle SSR:n aikana. Palvelin tunnistaa, mitkä tyylit koskevat ensimmäistä HTML:ää, ja lisää ne suoraan sivulle — erillistä asiakaspuolen erotusvaihetta ei tarvita.
Käytännön kompromissit
Liian suuren CSS-määrän lisääminen suoraan sivulle kasvattaa HTML:n kokoa, hidastaa TTFB:tä ja heikentää välimuistin tehokkuutta, koska HTML:ää ei välimuistita yhtä pitkäksi aikaa kuin CSS-tiedostoja. Tavoitelkaa enintään 14KB:n suoraan lisättyä Critical CSS -määrää, jotta se mahtuu ensimmäiseen TCP:n ruuhkaikkunaan.
Tietotesti
Miksi renderöinnin estävä tyylitiedosto viivästyttää First Contentful Paint -tapahtumaa?
Yhteenveto
Critical CSS lisää ensimmäisen näkymän tyylit suoraan sivulle ja poistaa renderöinnin viiveet. Ladatkaa jäljelle jäävä CSS asynkronisesti preloadin tai media query -tekniikoiden avulla. Mitatkaa vaikutus Lighthousella ja DevToolseilla ja tavoitelkaa alle 14KB:n Critical CSS -pakettia parhaan suorituskyvyn saavuttamiseksi.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Kriittinen CSS ja renderöinnin estyminen” ilmainen?
Kyllä – oppitunnin ”Kriittinen CSS ja renderöinnin estyminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kriittinen CSS ja renderöinnin estyminen”?
Upota näkymän yläosan kriittinen CSS suoraan dokumenttiin ja siirrä muut kuin kriittiset tyylit myöhemmäksi renderöinnin estymisen poistamiseksi. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Kriittinen CSS ja renderöinnin estyminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Kriittinen CSS ja renderöinnin estyminen
- Asettelu, piirtäminen ja yhdistely: renderöintiputki
- will-change ja kerroksen ylennys
- CSS-kattavuus ja käyttämättömät tyylit