Kritisk CSS og blokkering av gjengivelse
Legg kritisk CSS over bretten direkte inn i dokumentet, og utsett ikke-kritiske stiler for å eliminere blokkering av gjengivelsen.
Kritisk CSS og blokkering av gjengivelse er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Slik gjengir nettleseren innhold
Nettleseren tolker HTML til en DOM og CSS til en CSSOM, kombinerer dem til et gjengivelsestre, kjører layout og maler deretter innholdet. CSS blokkerer gjengivelsen til CSSOM-en er fullført – hver byte med CSS på den kritiske banen forsinker den første gjengivelsen.
Hva er kritisk CSS?
Kritisk CSS er det minimale settet med stiler som kreves for å gjengi innholdet som vises uten rulling. Når dette legges direkte inn i <style>-tagger i <head>, elimineres den gjengivelsesblokkerende forespørselen etter stilarket for den første visningen.
Gjengivelsesblokkerende ressurser
Alle <link rel="stylesheet">-elementer i head blokkerer gjengivelsen. Skript uten async/defer blokkerer også HTML-tolkingen. Når antallet gjengivelsesblokkerende ressurser reduseres, forbedres Largest Contentful Paint (LCP) og First Contentful Paint (FCP) direkte.
Trekke ut kritisk CSS
Verktøy som critical (npm), Penthouse og uttrekkere basert på Puppeteer gjengir en side ved bestemte visningsstørrelser og fanger opp stilene som gjelder for synlige elementer. Resultatet legges direkte inn, mens hele stilarket lastes inn asynkront.
Laste inn ikke-kritisk CSS asynkront
Last inn hele stilarket uten blokkering ved å bruke media="print" med et onload-bytte, eller mønsteret 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>Mediespørringer som lastetips
CSS-filer som lastes inn med en mediespørring som ikke samsvarer, for eksempel media="print", lastes ned med lav prioritet og blokkerer ikke gjengivelsen. Dette er det klassiske trikset for å laste inn stilark uten å blokkere den kritiske banen.
HTTP/2 og oppdeling av CSS
Med multipleksing i HTTP/2 har det mindre kostnad å dele CSS opp i mange små filer enn med HTTP/1. Last bare inn CSS-en som trengs for hver rute – home.css og checkout.css – i stedet for én monolittisk pakke som inneholder stilene for alle sider.
CSS og forhåndslastingsskanneren
Nettleserens forhåndslastingsskanner oppdager stilarkets <link>-tagger tidlig og begynner å laste dem ned før HTML-tolkeren når frem til dem. Sørg for at stilarkene ligger i <head>, ikke i body, slik at forhåndslastingsskanneren finner dem tidlig.
Måle effekten av gjengivelsesblokkering
Nettverkspanelet i Chrome DevTools viser hvor lenge ressurser blokkerer, i fossefallsvisningen. Lighthouse rapporterer «Eliminate render-blocking resources» med forventet besparelse per ressurs. WebPageTest viser renderBlockingResources i filmstripevisningen.
Kritisk CSS på serversiden
Rammeverk som Next.js og Astro legger automatisk inn kritisk CSS under SSR. Serveren identifiserer hvilke stiler som gjelder for den første HTML-en, og legger dem direkte inn – det kreves ikke noe uttrekk på klientsiden.
Praktiske avveininger
Hvis for mye CSS legges direkte inn, blir HTML-en større. Det gjør TTFB tregere og reduserer hurtigbufferets effektivitet, fordi HTML ikke hurtigbufres like lenge som CSS-filer. Begrens innlagt kritisk CSS til 14 KB eller mindre for å få plass i det første TCP-overbelastningsvinduet.
Kunnskapssjekk
Hvorfor forsinker et gjengivelsesblokkerende stilark First Contentful Paint?
Sammendrag
Kritisk CSS legger stilene for innholdet som vises uten rulling, direkte inn for å eliminere forsinkelser fra gjengivelsesblokkering. Last inn resten av CSS-en asynkront ved hjelp av preload eller triks med mediespørringer. Mål effekten med Lighthouse og DevTools, og hold mengden kritisk CSS under 14 KB for optimal ytelse.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Kritisk CSS og blokkering av gjengivelse» gratis?
Ja – hele teksten i «Kritisk CSS og blokkering av gjengivelse» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Kritisk CSS og blokkering av gjengivelse»?
Legg kritisk CSS over bretten direkte inn i dokumentet, og utsett ikke-kritiske stiler for å eliminere blokkering av gjengivelsen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Kritisk CSS og blokkering av gjengivelse»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kritisk CSS og blokkering av gjengivelse
- Layout, maling og kompositering: gjengivelsesforløpet
- will-change og lagfremheving
- CSS-dekning og ubrukte stiler