Critical Render Path

Het critical render path bestaat uit de bronnen die nodig zijn om de eerste weergave van een pagina correct en snel op het scherm te krijgen. Denk hierbij aan:

• Een deel van de HTML
• Render-blocking CSS
• JavaScript dat nodig is voor de initiële rendering

Niet-Critical Render Path

Deze onderdelen zijn niet essentieel voor de eerste render van de pagina:

• De volledige HTML
• Afbeeldingen
• Fonts
• CSS in de <head> met een media-attribuut dat niet overeenkomt met de huidige viewport

Afbeeldingen en hun invloed

Als je de breedte (width) en hoogte (height) van een afbeelding opgeeft in de HTML-attributen:

• Wordt de afbeelding al meegenomen in het critical render path.
• Kan de browser de layout correct opbouwen voor de eerste paint.

Laat je deze attributen weg:

• Dan weet de browser niet hoeveel ruimte de afbeelding nodig heeft.
• Hierdoor ontstaat er mogelijk een layout shift nadat de afbeelding geladen is.

Fonts

• Fonts kun je preloaden in de <head> als je ze zelf host (bijvoorbeeld .woff-bestanden).
• Als je een font van Google Fonts gebruikt, kun je beter linken naar hun CDN (bijv. fonts.googleapis.com):
  • Google cachet deze fonts.
  • Als de gebruiker het font eerder op een andere site heeft geladen, wordt het sneller ingeladen op jouw site.

EndTerm-opmerking

Gebruik sizes en srcset bij <img>-tags om op basis van media queries automatisch de juiste variant van een afbeelding in te laden:

<img 
  srcset="img-small.jpg 480w, img-large.jpg 1024w" 
  sizes="(max-width: 600px) 480px, 1024px" 
  src="img-large.jpg" 
  alt="voorbeeld" 
  width="1024" 
  height="768"
/>