Hvad er Critical CSS extraction?
Critical CSS extraction er en teknik, hvor de CSS-styles, der er nødvendige for at vise den øverste del af en webside (above the fold), identificeres og udtrækkes. Disse essentielle CSS-regler indsættes direkte i HTML-dokumentets <head>-sektion, så de kan loades hurtigt af browseren. Målet med critical CSS extraction er at forbedre sidehastighed og brugervenlighed ved at minimere den tid, det tager, før siden er visuelt klar for brugeren.
Hvornår bruges det?
Critical CSS extraction anvendes ofte i forbindelse med optimering af page speed, især når man arbejder på at forbedre Core Web Vitals og andre præstationsmålinger. Teknikken er relevant for websites med omfattende eller eksterne CSS-filer, hvor meget stil ikke er nødvendigt for det første visuelle indtryk. Ved at fokusere på kun de nødvendige CSS-regler til den synlige del af siden, kan man reducere render-blocking ressourcer og dermed forbedre First Contentful Paint.
Eksempel: En webshop har en samlet CSS-fil på 300 KB, hvor kun en brøkdel er nødvendig for forsiden. Ved at udtrække critical CSS for forsiden og indlejre det i HTML’en, loads de vigtigste styles straks, og resten af CSS’en hentes asynkront. Det medfører, at brugeren hurtigere ser den færdigstylet forside uden visuelle forsinkelser.
Typiske fejl
- Udtrækker ikke nok CSS, så siden loader med manglende styling eller flash af uformateret indhold.
- Inkluderer for meget CSS, hvilket modvirker effekten af teknikken og øger sidestørrelsen.
- Glemmer at opdatere critical CSS ved designændringer, så nye elementer mangler eller vises forkert.
Relaterede begreber: Lazy loading, render-blocking resources, page speed optimization.
