Verbinding mislukt. Probeer het opnieuw.

Naar inhoud springen
SEO Tools
Help en documentatie
Snelheid Lage impact Gemiddeld 15–30 minuten

Belangrijke bronnen vooraf laden (preload)

Belangrijke bronnen kunnen eerder worden geladen via rel="preload".

Wat het is

rel="preload" vertelt de browser om met hoge prioriteit en vooraf een bron te downloaden die binnenkort nodig zal zijn (de hoofdafbeelding boven de vouw, een belangrijk lettertype, kritische CSS).

Waarom het belangrijk is

Zonder vooraf laden ontdekt de browser een aantal belangrijke bronnen laat (bijvoorbeeld een lettertype waarnaar alleen vanuit CSS wordt verwezen), waardoor de verschijning ervan wordt vertraagd. Preload versnelt dit en verbetert het LCP.

Hoe je het doet

  1. 1Laad de LCP-afbeelding vooraf (de belangrijkste afbeelding boven de vouw).
  2. 2Laad de belangrijkste lettertypen vooraf en voeg lettertypeweergave toe: swap.
  3. 3Overdrijf het niet: alles vooraf laden verwatert de prioriteit en doet pijn.

Voorbeeld

Goed
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Conclusie

Preload is een doelgericht hulpmiddel voor een paar echt belangrijke bronnen (de LCP-afbeelding, het hoofdlettertype). Wanneer het oordeelkundig wordt gebruikt, verbetert het de LCP; over de hele linie gebruikt, doet het in plaats daarvan pijn. Minder is meer.

Gerelateerde onderwerpen