Snelheid Hoge impact Moeilijk 1–3 uur

Blokkerende CSS verminderen

Grote CSS in de kop vertraagt de weergave.

Wat het is

CSS blokkeert standaard: de browser geeft niets weer totdat de stijlen zijn gedownload en verwerkt. Grote of talrijke CSS-bestanden vertragen dus de eerste verf van de pagina.

Waarom het belangrijk is

Het laden van één groot CSS-bestand voor de hele site vertraagt zelfs een eenvoudige pagina. Optimalisatie verbetert direct het LCP en de waargenomen snelheid.

Hoe je het doet

1Extraheer "kritieke CSS" voor het zichtbare gedeelte en lijn het in <head>.
2Laad de rest van de CSS asynchroon (de media="print"-truc of rel="preload" + onload).
3Verwijder ongebruikte stijlen (PurgeCSS / de Coverage-tool in devtools).
4Splits CSS per pagina/component in plaats van één monoliet.

Asynchroon laden van niet-kritieke CSS

Goed

<link rel="preload" href="/css/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>

Conclusie

Kritieke CSS inline + de rest asynchroon is het meest effectieve patroon tegen het blokkeren van CSS. Het is een meer veeleisende verandering, maar op langzame sites zorgt het voor een aanzienlijke versnelling van de eerste weergave. Moderne buildtools en raamwerken maken het eenvoudiger.

Gerelateerde onderwerpen