Critical CSS er den mindste nødvendige samling af CSS-regler, som browseren skal have for at kunne tegne indholdet i den første synlige skærm. Det gælder typisk sidebaggrund, header, navigation, typografi, hero-sektion og det element, der sandsynligvis bliver sidens Largest Contentful Paint (LCP). Reglerne lægges ofte direkte i dokumentets <head>, mens resten af stylesheetet kan indlæses bagefter.

Et almindeligt eksternt stylesheet er som udgangspunkt render-blocking: Browseren må hente og analysere CSS’en, før den kan male siden korrekt. Hvis filen er stor, ligger sent i netværkskæden eller indeholder CSS fra mange plugins, forsinkes den første synlige rendering. Critical CSS afkorter den del af critical rendering path, der er nødvendig for at vise siden.

Hvorfor Critical CSS påvirker hastighed og Core Web Vitals

Den direkte effekt ses oftest på First Contentful Paint, fordi browseren kan male tekst og struktur tidligere. Effekten på LCP kommer, når CSS’en er en flaskehals for hero-billedet, overskriften eller containerens layout. Den løser derimod ikke et langsomt svar fra serveren, et for stort hero-billede eller JavaScript, som blokerer hovedtråden.

Critical CSS er derfor ikke det samme som at fjerne CSS. Det er prioritering. Den fulde CSS skal stadig indlæses, så resten af siden, interaktioner og indhold længere nede fungerer. Hvis der mangler regler i den kritiske blok, kan besøgende se et hop i layoutet, en kortvarigt ustylet menu eller tekst med forkert skrifttype. Det kan også skabe CLS-problemer, hvis den endelige styling ændrer størrelser og afstande.

Critical CSS i WordPress

WordPress-sider ender ofte med brede stylesheets fra temaer, page builders, WooCommerce og formular- eller slider-plugins. Et optimeringsplugin kan generere Critical CSS pr. side eller skabelontype, men resultatet er ikke automatisk korrekt. Forsiden, produktsider, arkiver og landingssider har ofte forskellige kritiske elementer.

  • Start med at reducere ubrugt CSS; en mindre grundfil gør hele løsningen mere robust.
  • Generér Critical CSS for de vigtigste sidetyper, ikke kun forsiden.
  • Undgå at cache en brugerspecifik eller dynamisk variant som fælles Critical CSS.
  • Kontrollér mobilvisningen særskilt, fordi dens første skærm og breakpoints er anderledes.

Sådan måler og retter du det

Brug Chrome DevTools’ Network-vandfald og Performance-panel til at se, om CSS-filer forsinker første paint. Google PageSpeed Insights peger ofte på render-blocking ressourcer, men den fortæller ikke præcist, hvilke regler der skal være kritiske. Test derfor med cache slået til, i inkognitovindue og på en langsom mobilforbindelse.

Indlæs først den nødvendige CSS inline, og indlæs derefter den ikke-kritiske fil på en måde, der ikke blokerer rendering. Efter hver ændring bør du kontrollere header, hero, cookie-banner, menu, formular og variationer med logged-in/logged-out cache. Målet er en hurtigere første rendering uden visuelle fejl — ikke flest mulige CSS-tricks.