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
- 1Laad de LCP-afbeelding vooraf (de belangrijkste afbeelding boven de vouw).
- 2Laad de belangrijkste lettertypen vooraf en voeg lettertypeweergave toe: swap.
- 3Overdrijf het niet: alles vooraf laden verwatert de prioriteit en doet pijn.
Voorbeeld
<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