⚡ Kritisk CSS: vad det är, hur du genererar det och snabbar upp din webbplats
Din sida tar 3 sekunder att ladda, och besökarna lämnar. Du öppnar Google PageSpeed Insights, och där står det i rött: "Eliminera renderingsblockerande CSS." Låter det bekant? Enligt HTTP Archive-data för 2025 laddar mediansidan 7 externa stilmallar, och den genomsnittliga CSS-vikten har passerat 120 KB. Varje fil i <head> är en barriär mellan användaren och innehållet.
Problemet är inte "tung" CSS. Webbläsaren renderar inte en enda pixel förrän den har laddat ner och tolkat ALLA stilar. Även de som stylar en sidfot vid pixel 4000. Lösningen är Critical CSS: en teknik som extraherar endast det som behövs för den synliga vyn från din fullständiga stilmall och bäddar in det direkt i <head>. Resten laddas asynkront och blockerar ingenting.
Vi implementerade critical CSS i alla techblog-projekt och byggde ett fungerande arbetsflöde: från manuell generering på 30 sekunder till full automatisering via Gulp och WordPress-plugins. Här är en steg-för-steg-guide utan utfyllnad.
💡 Snabb översikt:
- Förstå mekaniken bakom renderingsblockering och varför webbläsaren väntar på CSS även när HTML är klar
- Välj rätt verktyg: en gratis onlinegenerator på 10 sekunder, Penthouse för npm-projekt, eller kombon WP Rocket / Autoptimize för WordPress
- Sätt upp ett Gulp-arbetsflöde för automatisk regenerering av critical CSS vid varje deploy
- Undvik vanliga fallgropar: FOUC, JS-innehåll, problem med media queries
Vad critical CSS är och varför webbläsaren saktar ner
Webbläsaren bygger två strukturer: DOM från HTML och CSSOM från stilar. Tills CSSOM är klar pausas renderingen. Detta är renderingsblockerande CSS: sidan förblir tom tills alla stilmallar i <head> har laddats.
Google PageSpeed Insights diagnostiserar problemet direkt:
Din sida har 3 blockerande CSS-resurser. Detta orsakar en fördröjning i renderingen. Inget av innehållet ovanför mitten kan renderas utan att vänta på att följande resurser laddas.
Termen "above the fold" kommer från tidningsvärlden. På webben betyder det det synliga området innan man scrollar: ungefär 600 px på desktop, 900 px på laptops, 400 px på smartphones. De flesta utvecklare siktar på säkra värden på 1300 px bredd och 900 px höjd.
Critical CSS är den minsta uppsättning stilar som behövs för att rendera just det området. Grid, navigation, typsnitt, hero-sektion. Allt annat skjuts upp och laddas asynkront: sidan visas direkt medan ytterligare stilar laddas i bakgrunden.
Siffrorna är betydande. Enligt Googles data minskar inlining av critical CSS First Contentful Paint med 0,5-1,2 sekunder på mobila enheter. För e-handel påverkar detta direkt konverteringen: forskning från Portent visade att sajter med FCP under 1 sekund konverterar 3 gånger bättre än sajter med 3 sekunders FCP.
Genereringsverktyg: från gratis online till kommersiellt API
Att generera critical CSS manuellt är omöjligt. Du behöver ett verktyg som renderar sidan i en huvudlös webbläsare och extraherar endast de använda stilarna. Här är tre fungerande alternativ.
Verktyg | Typ | Kostnad | Automatisering | Bäst för |
|---|---|---|---|---|
Critical Path CSS Generator | Online | Gratis | Nej | Enstaka sidor, komma igång |
Penthouse | npm-paket | Gratis | Ja, via Gulp/scripts | Utvecklare, batchbearbetning |
criticalcss.com | SaaS | Från $10/månad | Ja, API + WordPress | Produktion, stora sajter |
Critical Path CSS Generator: online, på 10 sekunder
Critical Path CSS Generator av Jonas Ohlsson är ett gratisverktyg värt att börja med. Gränssnittet är enkelt: klistra in sidans URL, klistra in din FULLSTÄNDIGA CSS (även 200 KB minifierad), klicka på knappen, få stilar för ovanför mitten.
Fördelar: noll inträdesbarriär. Inget Node.js, npm eller skript behövs. Nackdelar: helt manuellt arbete. Du bearbetar varje sida separat, och när stilar ändras upprepar du allt. Fungerar för en sajt med 5 sidor, men 50 sidor blir plågsamt.
Generatorns skapare lanserade senare den kommersiella criticalcss.com-tjänsten, en vidareutveckling av samma idé med automatiska uppdateringar, skärmdumpsvalidering och ett API för batchbearbetning.
Penthouse: kommandoradsgenerator för Gulp
Penthouse (2680+ stjärnor på GitHub) är ett npm-paket från samma utvecklare. Under huven: Puppeteer och headless Chromium. Det öppnar sidan, fastställer vilken CSS som används för en given viewport och kastar resten.
Installation:
1 npm install --save-dev penthouse
Minimalt anrop från ett Node-skript:
1 const penthouse = require('penthouse'); 2 const fs = require('fs'); 3 4 penthouse({ 5 url: 'https://example.com', 6 cssString: fs.readFileSync('./style.css', 'utf8'), 7 width: 1300, 8 height: 900 9 }).then(criticalCss => { 10 fs.writeFileSync('./critical.css', criticalCss); 11 });
Bredd 1300 och höjd 900 är empiriskt säkra värden. Media queries som är bredare än den kritiska viewporten tas bort som standard. För att behålla dem, använd flaggan keepLargerMediaQueries: true.
Viktigt att notera: Penthouse körs med JavaScript avstängt. Om innehållet ovanför mitten genereras av ett JS-ramverk är HTML:en före hydrering tom, och Penthouse hittar inga stilar. Lösningen: server-side rendering (SSR) eller parametern forceInclude med selektorer för att tvinga fram bevarande.
WP Rocket och Autoptimize: två WordPress-plugins
Om din webbplats körs på WordPress är manuell generering av kritisk CSS onödigt krångel. Många sidor, multiplicerande mallar, föränderliga stilar. Två plugins löser uppgiften helt.
WP Rocket är ett premiumplugin (€59/år för 1 webbplats, €119 för 3, €299 för 50). Det inbyggda alternativet "Remove Unused CSS" genererar automatiskt kritisk CSS för varje sida, bäddar in den i <head> och laddar resten asynkront. Två kryssrutor, och rekommendationen "Eliminera renderingsblockerande resurser" är åtgärdad. Bonus: det inbyggda navet Rocket Insights som drivs av GTmetrix visar mätvärden direkt från WordPress admin.
Autoptimize är ett gratisplugin med alternativet "Inline and Defer CSS". Grundversionen genererar EN kritisk CSS-fil för hela webbplatsen, vilket inte fungerar i praktiken (olika sidor, olika innehåll ovanför mitten). Lösningen: integration med criticalcss.com-tjänsten (WordPress-plan, från $10/månad). Pluginet begär automatiskt kritisk CSS via API, bäddar in den och uppdaterar när ändringar sker.
För de flesta WordPress-användare löser kombinationen WP Rocket eller Autoptimize + criticalcss.com problemet helt. Resten av denna artikel är för dig som bygger skräddarsydda webbplatser.
Manuellt arbetsflöde: generering, infogning, verifiering
Om du bygger en webbplats utan ett CMS passar processen i fyra steg.
Steg 1. Kopiera ALL din CSS. Kombinera alla webbplatsens stilar till EN fil. Om du skriver Sass, kompilera den. Om du använder ett ramverk som Bootstrap eller Tailwind, inkludera dess CSS fullständigt. Gissa inte vad som "förmodligen inte behövs"; generatorn kommer att lista ut det.
Steg 2. Generera kritisk CSS via onlinegeneratorn eller Penthouse. Resultatet är ett minifierat block av stilar som endast ansvarar för innehållet ovanför mitten.
Steg 3. Infoga kritisk CSS i en <style>-tagg inuti <head>. Detta är avgörande: inline-stilar skapar inga ytterligare HTTP-förfrågningar och bearbetas av webbläsaren omedelbart. Resultatet ser ut ungefär så här:
1 <!DOCTYPE html> 2 <html lang="ru"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style> 7 <title>Page Title</title> 8 </head>
Steg 4. Flytta extern CSS och JS från <head> till sidans nederkant, före avslutande </body>. Ja, <link rel="stylesheet"> i sidfoten är tekniskt sett ogiltigt enligt specen, men det fungerar i praktiken i alla webbläsare och löser blockeringsproblemet. Alternativet är loadCSS från Filament Group för asynkron stilinläsning utan att flytta till sidfoten.
Kontrollera slutligen via Google PageSpeed Insights. Försvann rekommendationen "Eliminera resurser som blockerar renderingen"? Då har du gjort allt rätt.
Gulp + Penthouse: automatisering för projekt utan WordPress
Varje stiländring kräver regenerering av kritisk CSS. Att göra detta manuellt är bedövande tråkigt. Gulp automatiserar processen.
Vårt produktionsflöde:
1 // gulpfile.js 2 const gulp = require('gulp'); 3 const penthouse = require('penthouse'); 4 const fs = require('fs'); 5 const urlList = require('./criticalcss-pagelist.json'); 6 7 gulp.task('criticalcss', function () { 8 urlList.urls.forEach(function (item) { 9 penthouse({ 10 url: item.link, 11 css: './css/style.min.css', 12 width: 1300, 13 height: 900, 14 keepLargerMediaQueries: false, 15 renderWaitTime: 100, 16 timeout: 30000 17 }).then(function (criticalCss) { 18 fs.writeFileSync(item.output, criticalCss); 19 console.log('✓ Critical CSS generated: ' + item.link); 20 }).catch(function (err) { 21 console.error('✗ Error for ' + item.link + ': ' + err.message); 22 }); 23 }); 24 });
Filen criticalcss-pagelist.json med URL:er och lista över utdatafiler:
1 { 2 "urls": [ 3 { "link": "https://example.com", "output": "./critical/home.php" }, 4 { "link": "https://example.com/about", "output": "./critical/about.php" }, 5 { "link": "https://example.com/contact", "output": "./critical/contact.php" } 6 ] 7 }
Vi skriver utdata till PHP-filer som omsluter CSS:en och infogas via include i <head> på motsvarande mall. Anpassa till din stack: skriv till .css, infoga via server-side include, vad som än fungerar.
Kör: gulp criticalcss, så bearbetas alla sidor i en körning. Koppla uppgiften till CI/CD vid deploy, så hålls kritisk CSS aktuell.
Problem du kommer att stöta på
Kritisk CSS är inte utan vassa kanter. Här är vad vi fångade upp i praktiken.
Flash of unstyled content (FOUC). Kritisk CSS täckte inte något element, och användaren ser stilryck när fulla stilar laddas. Orsak: innehåll positionerat utanför viewporten via absolute eller transform, och generatorn missade det. Fix: flaggan forceInclude med det problematiska elementets selektor.
JS-genererat innehåll. Nästan alla generatorer (Penthouse, onlineverktyg) körs med JavaScript inaktiverat. Om din landningssida är byggd med React, Vue eller Angular utan server-side rendering är HTML:en tom, och generatorn har inget att analysera. Den enda tillförlitliga lösningen: aktivera SSR på ramverksnivå. Alternativet är att manuellt ange selektorer via forceInclude, men det är skört.
Media queries. Som standard tar Penthouse bort regler vars min-width överstiger den angivna viewporten. Om du inte sätter keepLargerMediaQueries: true försvinner desktop-stilar, och sajten går sönder på breda skärmar. Verifiera alltid resultaten vid faktiska upplösningar.
Cachning. Du genererade kritisk CSS, deployade, ändrade header-stilen en vecka senare, men den gamla versionen ligger kvar i <head>. Utan CI/CD-automatisering glömmer du att regenerera. Gulp-uppgiften vid deploy löser detta helt.
⁉️🤔 Vanliga frågor
Är kritisk CSS obligatoriskt för varje sajt?
Nej, inte för varje sajt. Om din sajt har en enda CSS-fil på 20 KB och FCP redan ligger under en sekund blir vinsten försumbar. Men om
<head>innehåller 3-4 stilmallar på totalt runt 100 KB kommer kritisk CSS att ge mätbar förbättring. För en enkel landningssida tar onlinegeneratorn 10 minuter. För en WordPress-butik gör WP Rocket med ett par kryssrutor jobbet. Kolla PageSpeed Insights: om "Eliminera renderingsblockerande resurser" ligger i topp, gör det.
Kan jag bara flytta alla <link>-taggar till sidfoten och slippa besväret?
Tekniskt sett nej. HTML-specen kräver
<link rel="stylesheet">endast i<head>. I praktiken renderar webbläsare sidor med<link>i sidfoten, men du får en flash of unstyled content (FOUC) tills stilarna laddats. Godtagbart för en enkel visitkortssajt, inte för ett kommersiellt projekt. Rätt tillvägagångssätt: kritisk CSS inlinad i<head>, asynkron laddning för resten vialoadCSSellermedia="print"medonload="this.media='all'". Att flytta till sidfoten är en workaround som fungerar till priset av visuellt ryck.
Vad ändrades med HTTP/3 och Early Hints?
HTTP/3 och 103 Early Hints låter webbläsaren börja ladda kritiska resurser innan det fullständiga serversvaret tagits emot. Detta minskar latensen men eliminerar inte renderingsblockering: stilar måste fortfarande laddas ner och tolkas. Early Hints och kritisk CSS samverkar, inte ersätter varandra: Early Hints snabbar upp leveransen, kritisk CSS snabbar upp första renderingen. De två teknikerna förstärker varandra.
Penthouse har inte uppdaterats på 4 år. Är det fortfarande relevant?
Penthouse senaste release (v2.3.3) kom 2022, men paketet är fortfarande funktionellt: det körs på Puppeteer och Chromium, som är stabila. Kärnfunktionaliteten (att generera använd CSS för en given viewport) kräver inte täta uppdateringar. Ett alternativ är Critical av Addy Osmani (12 000+ stjärnor), som får mer aktiva uppdateringar och också integreras med Gulp/Grunt.
Hur hanterar jag dynamiska sidor där innehållet beror på användaren?
För sidor med personalisering (användarpanel, varukorg, adminpanel) genereras kritisk CSS inte för en specifik användare utan för den allmänna strukturen: header, sidofält, grid. Dynamiskt innehåll hamnar i den asynkrona delen. Om stilar för ett användarspecifikt block ovanför mitten är essentiella, lägg till motsvarande selektorer via
forceInclude. Generera kritisk CSS baserat på sidans allmänna struktur, och lämna personaliserade block för asynkron laddning medforceIncludeför affärskritiska element.
Bör du implementera kritisk CSS på ditt projekt
Om din sajt laddar mer än en CSS-fil i <head> kommer kritisk CSS att ge mätbara hastighetsvinster. För en landningssida på tre sidor tar onlinegeneratorn 10 minuter. För en WordPress-blogg eller -butik, två kryssrutor i WP Rocket. För ett skräddarsytt projekt betalar sig en timmes installation av Gulp och Penthouse vid första deployen.
Tröskeln är lägre än den verkar. Ta den kostnadsfria onlinegeneratorn, kopiera din sidas CSS, klistra in den, och på 30 sekunder ser du resultat. När du vill ha automatisering, kom tillbaka till Gulp-arbetsflödesavsnittet: det löser problemet helt. Att fördubbla laddningshastigheten med ett par timmars arbete är en deal som är svår att tacka nej till.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.