Kritisk CSS och renderingsblockering
Bädda in kritisk CSS ovanför vikningen och skjut upp icke-kritiska format för att eliminera renderingsblockering.
Kritisk CSS och renderingsblockering är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Så renderar webbläsaren
Webbläsaren tolkar HTML till en DOM, CSS till en CSSOM, kombinerar dem till ett render-träd, kör layout och målar sedan. CSS blockerar rendering tills CSSOM är klar – varje byte CSS på den kritiska sökvägen fördröjer den första målningen.
Vad är kritisk CSS
Kritisk CSS är den minsta uppsättning stilar som krävs för att rendera innehållet som syns direkt. Genom att bädda in den i <style>-taggar i <head> elimineras den renderingsblockerande begäran efter en formatmall för den första vyn.
Renderingsblockerande resurser
Alla <link rel="stylesheet"> i head-elementet blockerar rendering. Skript utan async/defer blockerar också HTML-tolkningen. Om renderingsblockerande resurser minskas förbättras Largest Contentful Paint (LCP) och First Contentful Paint (FCP) direkt.
Extrahera kritisk CSS
Verktyg som critical (npm), Penthouse och extraherare baserade på Puppeteer renderar en sida vid specifika viewportstorlekar och fångar de stilar som gäller för synliga element. Resultatet bäddas in och den fullständiga formatmallen läses in asynkront.
Läs in icke-kritisk CSS asynkront
Läs in den fullständiga formatmallen utan att blockera med media="print" och ett onload-byte, eller med mönstret 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>Mediefrågor som laddningssignaler
CSS-filer som läses in med en mediefråga som inte matchar (till exempel media="print") hämtas med låg prioritet och blockerar inte rendering. Detta är det klassiska knepet för att läsa in formatmallar utan att blockera den kritiska sökvägen.
HTTP/2 och CSS-uppdelning
Med multiplexering i HTTP/2 medför det mindre omkostnader att dela upp CSS i många små filer än i HTTP/1. Läs bara in den CSS som behövs för varje rutt – home.css, checkout.css – i stället för ett monolitiskt paket som innehåller stilar för alla sidor.
CSS och preload-skannern
Webbläsarens preload-skanner upptäcker formatmallarnas <link>-taggar tidigt och börjar hämta dem innan HTML-tolkaren når dem. Säkerställ att formatmallarna finns i <head> – inte i body – så att preload-skannern hittar dem tidigt.
Mät påverkan från renderingsblockering
Nätverkspanelen i Chrome DevTools visar resursblockeringstiden i vattenfallsdiagrammet. Lighthouse rapporterar "Eliminate render-blocking resources" med besparingar per resurs. WebPageTest visar renderBlockingResources i sin filmremsvy.
Kritisk CSS på serversidan
Ramverk som Next.js och Astro bäddar automatiskt in kritisk CSS under SSR. Servern identifierar vilka stilar som gäller för den första HTML-koden och bäddar in dem – inget extraktionssteg på klientsidan behövs.
Praktiska avvägningar
Om för mycket CSS bäddas in ökar HTML-storleken, vilket gör TTFB långsammare och minskar cacheeffektiviteten (HTML cachelagras inte lika länge som CSS-filer). Sikta på högst 14 KB inbäddad kritisk CSS så att den ryms i det första TCP-trängselfönstret.
Kunskapskontroll
Varför fördröjer en renderingsblockerande formatmall First Contentful Paint?
Sammanfattning
Kritisk CSS bäddar in stilarna för innehållet som syns direkt och eliminerar renderingsblockerande fördröjningar. Läs in återstående CSS asynkront med preload eller knep med mediefrågor. Mät påverkan med Lighthouse och DevTools och sikta på en kritisk CSS-mängd under 14 KB för optimal prestanda.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Kritisk CSS och renderingsblockering” gratis?
Ja – hela texten till ”Kritisk CSS och renderingsblockering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kritisk CSS och renderingsblockering”?
Bädda in kritisk CSS ovanför vikningen och skjut upp icke-kritiska format för att eliminera renderingsblockering. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Kritisk CSS och renderingsblockering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Kritisk CSS och renderingsblockering
- Layout, målning och komposition: renderingspipelinen
- will-change och lagerfrämjande
- CSS-täckning och oanvända format