🚀 Critical CSS for å gjøre nettsiden din raskere: generering, inlining og automatisering i 2026

Q: Kan jeg bare flytte alle -tagger til footeren og droppe alt styret?

Teknisk sett nei. HTML-spesifikasjonen krever kun i . I praksis rendrer nettlesere sider med i footeren, men du får et flash of unstyled content (FOUC) inntil stilene lastes. Akseptabelt for en enkel visittkortside, ikke for et kommersielt prosjekt. Riktig tilnærming: kritisk CSS inlinet i , asynkron lasting for resten via loadCSS eller media="print" med onload="this.media='all'". Å flytte til footeren er en workaround som fungerer på bekostning av visuelt rykk.

Siden din bruker 3 sekunder på å laste, og de besøkende forlater den. Du åpner Google PageSpeed Insights, og der står det i rødt: «Eliminate render-blocking CSS.» Høres det kjent ut? Ifølge data fra HTTP Archive for 2025 laster median-siden 7 eksterne stilark, og gjennomsnittlig CSS-vekt har passert 120 KB. Hver fil i <head> er en barriere mellom brukeren og innholdet.

Problemet er ikke «tung» CSS. Nettleseren vil ikke vise en eneste piksel før den har lastet ned og tolket ALLE stiler. Til og med de som styler en bunntekst på piksel 4000. Løsningen er Critical CSS: en teknikk som trekker ut bare det som trengs for det synlige visningsområdet fra hele stilarket ditt, og bygger det inn direkte i <head>. Resten lastes asynkront og blokkerer ingenting.

Vi implementerte critical CSS på tvers av alle techblog-prosjekter og bygde en fungerende arbeidsflyt: fra manuell generering på 30 sekunder til full automatisering via Gulp og WordPress-plugins. Nedenfor følger en steg-for-steg-guide uten fyllstoff.

💡 Rask oversikt:

Forstå mekanikken bak render-blokkering og hvorfor nettleseren venter på CSS selv når HTML-en er klar
Velg riktig verktøy: en gratis nettbasert generator på 10 sekunder, Penthouse for npm-prosjekter, eller kombinasjonen WP Rocket / Autoptimize for WordPress
Sett opp en Gulp-arbeidsflyt for automatisk regenerering av critical CSS ved hver deploy
Unngå vanlige fallgruver: FOUC, JS-innhold, problemer med media queries

Hva critical CSS er og hvorfor nettleseren bremser ned

Nettleseren bygger to strukturer: DOM fra HTML og CSSOM fra stiler. Før CSSOM er klar, settes renderingen på pause. Dette er render-blokkerende CSS: siden forblir tom til alle stilark i <head> er lastet.

Google PageSpeed Insights diagnostiserer problemet direkte:

Siden din har 3 blokkerende CSS-ressurser. Dette forårsaker en forsinkelse i renderingen. Ikke noe av innholdet over folden kan vises uten å vente på at følgende ressurser lastes.

Begrepet «above the fold» kommer fra aviser. På nettet betyr det det synlige området før man scroller: omtrent 600 px på desktop, 900 px på bærbare, 400 px på smarttelefoner. De fleste utviklere sikter mot trygge verdier på 1300 px bredde og 900 px høyde.

Critical CSS er det minste settet med stiler som trengs for å vise akkurat det området. Grid, navigasjon, fonter, hero-seksjon. Alt annet utsettes og lastes asynkront: siden vises umiddelbart mens ytterligere stiler lastes i bakgrunnen.

Tallene er betydelige. Ifølge Googles data reduserer inlining av critical CSS First Contentful Paint med 0,5-1,2 sekunder på mobile enheter. For e-handel påvirker dette konverteringen direkte: forskning fra Portent viste at nettsteder med FCP under 1 sekund konverterer 3 ganger bedre enn nettsteder med 3 sekunders FCP.

Genereringsverktøy: fra gratis på nett til kommersiell API

Å generere critical CSS manuelt er umulig. Du trenger et verktøy som renderer siden i en hodeløs nettleser og trekker ut bare de brukte stilene. Her er tre alternativer som fungerer.

Verktøy	Type	Kostnad	Automatisering	Best for
Critical Path CSS Generator	Nettbasert	Gratis	Nei	Enkeltsider, komme i gang
Penthouse	npm-pakke	Gratis	Ja, via Gulp/scripts	Utviklere, batch-prosessering
criticalcss.com	SaaS	Fra $10/måned	Ja, API + WordPress	Produksjon, store nettsteder

Critical Path CSS Generator: på nett, på 10 sekunder

Critical Path CSS Generator av Jonas Ohlsson er et gratis verktøy det er verdt å starte med. Grensesnittet er enkelt: lim inn side-URL-en, lim inn hele CSS-en din (selv 200 KB minifisert), trykk på knappen, få stiler for området over folden.

Fordeler: ingen inngangsbarriere. Du trenger ikke Node.js, npm eller scripts. Ulemper: rent manuelt arbeid. Du behandler hver side separat, og når stiler endres, gjentar du alt. Fungerer for et nettsted med 5 sider, men 50 sider blir smertefullt.

Generatorens skaper lanserte senere den kommersielle tjenesten criticalcss.com, en videreutvikling av samme idé med automatiske oppdateringer, skjermbildevalidering og et API for batch-prosessering.

Penthouse: kommandolinjegenerator for Gulp

Penthouse (2680+ stjerner på GitHub) er en npm-pakke fra samme forfatter. Under panseret: Puppeteer og hodeløs Chromium. Den åpner siden, fastslår brukt CSS for en gitt visningsport og forkaster resten.

Installasjon:

1 npm install --save-dev penthouse

Minimalt kall fra et 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 });

Bredde 1300 og høyde 900 er empirisk trygge verdier. Mediespørringer som er bredere enn den kritiske visningsporten, fjernes som standard. For å beholde dem, bruk flagget keepLargerMediaQueries: true.

Viktig merknad: Penthouse kjører med JavaScript deaktivert. Hvis innhold over folden genereres av et JS-rammeverk, er HTML-en før hydrering tom, og Penthouse finner ingen stiler. Løsningen: tjenesterendret rendering (SSR) eller parameteren forceInclude med selektorer for å tvinge gjennom inkludering.

WP Rocket og Autoptimize: to WordPress-pluginer

Hvis nettstedet ditt kjører på WordPress, er manuell generering av kritisk CSS unødvendig styr. Mange sider, multipliserende maler, endrede stiler. To pluginer løser oppgaven fullstendig.

WP Rocket er en premium-plugin (€59/år for 1 nettsted, €119 for 3, €299 for 50). Det innebygde alternativet «Remove Unused CSS» genererer automatisk kritisk CSS for hver side, bygger den inn i <head> og laster resten asynkront. To avkrysningsbokser, så er anbefalingen «Eliminate render-blocking resources» løst. Bonus: den innebygde huben Rocket Insights drevet av GTmetrix viser måltall rett fra WordPress-administrasjonen.

Autoptimize er en gratis plugin med et «Inline and Defer CSS»-alternativ. Grunnversjonen genererer ÉN kritisk CSS-fil for hele nettstedet, noe som ikke fungerer i praksis (ulike sider, ulikt innhold over folden). Løsningen: integrasjon med criticalcss.com-tjenesten (WordPress-plan, fra $10/måned). Pluginen ber automatisk om kritisk CSS via API, bygger den inn og oppdaterer når endringer skjer.

For de fleste WordPress-brukere løser kombinasjonen WP Rocket eller Autoptimize + criticalcss.com problemet fullstendig. Resten av denne artikkelen er for dem som bygger skreddersydde nettsteder.

Utvikler ved en arbeidsstasjon med kodeeditor og myk studiolyssetting

Manuell arbeidsflyt: generering, innsetting, verifisering

Hvis du bygger et nettsted uten CMS, passer prosessen inn i fire trinn.

Trinn 1. Kopier ALL din CSS. Kombiner alle nettstedets stiler til ÉN fil. Hvis du skriver Sass, kompiler den. Hvis du bruker et rammeverk som Bootstrap eller Tailwind, inkluder CSS-en fullstendig. Ikke gjett hva som «sannsynligvis ikke trengs»; generatoren vil finne ut av det.

Trinn 2. Generer kritisk CSS via online-generatoren eller Penthouse. Resultatet er en minifisert blokk med stiler som kun er ansvarlige for over folden.

Trinn 3. Sett inn kritisk CSS i en <style>-tagg inne i <head>. Dette er avgjørende: innebygde stiler skaper ingen ekstra HTTP-forespørsler og behandles av nettleseren umiddelbart. Resultatet ser omtrent slik ut:

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. Flytt ekstern CSS og JS fra <head> til bunnen av siden, før avsluttende </body>. Ja, <link rel="stylesheet"> i footeren er teknisk sett ugyldig ifølge spesifikasjonen, men det fungerer i alle nettlesere i praksis og løser blokkeringsproblemet. Alternativet er loadCSS fra Filament Group for asynkron stilinnlasting uten å flytte til footeren.

Til slutt, verifiser gjennom Google PageSpeed Insights. Forsvant anbefalingen «Eliminer ressurser som blokkerer rendering»? Da har du gjort alt riktig.

Gulp + Penthouse: automatisering for prosjekter uten WordPress

Hver stilendring krever regenerering av kritisk CSS. Å gjøre dette manuelt er uutholdelig ensformig. Gulp automatiserer prosessen.

Arbeidsflyten vår i produksjon:

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 og liste over 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 til PHP-filer som pakker inn CSS-en og settes inn via include i <head> på den tilsvarende malen. Tilpass til din egen stack: skriv til .css, sett inn via server-side include, hva som enn fungerer.

Kjør: gulp criticalcss, så blir alle sidene behandlet i én kjøring. Koble oppgaven til CI/CD ved deploy, så holder kritisk CSS seg oppdatert.

Problemer du vil støte på

Kritisk CSS er ikke uten skarpe kanter. Her er hva vi erfarte i praksis.

Flash of unstyled content (FOUC). Kritisk CSS dekket ikke et element, og brukeren ser et stilrykk når full CSS lastes. Årsak: innhold plassert utenfor viewporten via absolute eller transform, og generatoren fanget det ikke opp. Løsning: forceInclude-flagget med sektoren til det problematiske elementet.

JS-generert innhold. Nesten alle generatorer (Penthouse, nettbaserte verktøy) kjører med JavaScript deaktivert. Hvis landingssiden din er bygget med React, Vue eller Angular uten server-side rendering, er HTML-en tom, og generatoren har ingenting å analysere. Den eneste pålitelige løsningen: aktiver SSR på rammeverksnivå. Alternativet er å spesifisere sektorer manuelt via forceInclude, men det er skjørt.

Media queries. Som standard fjerner Penthouse regler der min-width overstiger den angitte viewporten. Hvis du ikke setter keepLargerMediaQueries: true, går desktop-stiler tapt, og nettstedet brekker på brede skjermer. Verifiser alltid resultatene ved faktiske oppløsninger.

Caching. Du genererte kritisk CSS, deployet, endret header-stilen en uke senere, men den gamle versjonen ligger i <head>. Uten CI/CD-automatisering vil du glemme å regenerere. Gulp-oppgaven ved deploy løser dette fullstendig.

⁉️🤔 Ofte stilte spørsmål

Er kritisk CSS obligatorisk for alle nettsteder?

Nei, ikke for alle nettsteder. Hvis nettstedet ditt har én enkelt CSS-fil på 20 KB og FCP allerede er under ett sekund, vil gevinsten være ubetydelig. Men hvis <head> inneholder 3-4 stilark på til sammen rundt 100 KB, vil kritisk CSS gi målbar forbedring. For en enkel landingsside tar den nettbaserte generatoren 10 minutter. For en WordPress-butikk gjør WP Rocket det med et par avkrysningsbokser. Sjekk PageSpeed Insights: hvis «Eliminer render-blokkerende ressurser» står øverst, gjør det.

Kan jeg bare flytte alle <link>-tagger til footeren og droppe alt styret?

Teknisk sett nei. HTML-spesifikasjonen krever <link rel="stylesheet"> kun i <head>. I praksis rendrer nettlesere sider med <link> i footeren, men du får et flash of unstyled content (FOUC) inntil stilene lastes. Akseptabelt for en enkel visittkortside, ikke for et kommersielt prosjekt. Riktig tilnærming: kritisk CSS inlinet i <head>, asynkron lasting for resten via loadCSS eller media="print" med onload="this.media='all'". Å flytte til footeren er en workaround som fungerer på bekostning av visuelt rykk.

Hva endret seg med HTTP/3 og Early Hints?

HTTP/3 og 103 Early Hints lar nettleseren begynne å laste kritiske ressurser før den mottar hele serversvaret. Dette reduserer latenstid, men eliminerer ikke render-blokkering: stiler må fortsatt lastes ned og parses. Early Hints og kritisk CSS fungerer sammen, ikke i stedet for hverandre: Early Hints øker leveringshastigheten, kritisk CSS øker hastigheten på første render. De to teknikkene forsterker hverandre.

Penthouse har ikke blitt oppdatert på 4 år. Er det fortsatt relevant?

Penthouse sin siste utgivelse (v2.3.3) kom i 2022, men pakken forblir funksjonell: den kjører på Puppeteer og Chromium, som er stabile. Kjernefunksjonaliteten (å generere brukt CSS for en gitt viewport) krever ikke hyppige oppdateringer. Et alternativ er Critical av Addy Osmani (12 000+ stjerner), som får mer aktive oppdateringer og også integreres med Gulp/Grunt.

Hvordan håndterer jeg dynamiske sider der innhold avhenger av brukeren?

For sider med personalisering (brukerdashboard, handlekurv, adminpanel) genereres kritisk CSS ikke for en spesifikk bruker, men for den generelle strukturen: header, sidebar, grid. Dynamisk innhold går inn i den asynkrone delen. Hvis stiler for en brukerspesifikk blokk over folden er essensielle, legg til de tilsvarende sektorene via forceInclude. Generer kritisk CSS basert på sidens generelle struktur, og la personaliserte blokker stå for asynkron lasting med forceInclude for forretningskritiske elementer.

Bør du implementere kritisk CSS i prosjektet ditt

Hvis nettstedet ditt laster mer enn én CSS-fil i <head>, vil kritisk CSS gi målbare hastighetsgevinster. For en landingsside på tre sider tar den nettbaserte generatoren 10 minutter. For en WordPress-blogg eller -butikk, to avkrysningsbokser i WP Rocket. For et skreddersydd prosjekt lønner en time med oppsett av Gulp og Penthouse seg allerede ved første deploy.

Inngangsbarrieren er lavere enn den virker. Ta den gratis nettbaserte generatoren, kopier sidens CSS, lim den inn, og på 30 sekunder ser du resultater. Når du ønsker automatisering, kom tilbake til Gulp-arbeidsflyt-seksjonen: den løser problemet fullstendig. Å doble lastehastigheten med et par timers arbeid er en avtale det er vanskelig å si nei til.

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	});

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>

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	});

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	}

Alt om WordPress, webutvikling — og mer til

⚡ Critical CSS: hva det er, hvordan du genererer det, og gjør nettsiden din raskere