Voor een optimale gebruikerservaring van jouw website, is het belangrijk om afbeeldingen die meteen in beeld staan, met prioriteit te laden. Dat kan met fetchpriority. Daarnaast is het belangrijk afbeeldingen die nog niet nodig zijn, pas te laden voordat ze nodig zijn. Doe je dit niet, laat Google PageSpeed Insights de melding “Laad afbeeldingen die niet in beeld zijn nog niet” zien of in het Engels “Defer offscreen images”.
Wanneer de browser de HTML van jouw webpagina ontvangt, zal deze inventariseren welke bestanden het eerst moeten worden geladen. Is er geen richtlijn voor de browser, dan zal de browser eerst alle CSS en JS bestanden downloaden om daarna te beginnen met alle afbeeldingen op volgorde van de HTML op de site. Die volgorde hoeft niet de meest logische te zijn.
Door het fetchpriority attribuut toe te kennen aan afbeeldingen die meteen in zicht moeten staan, kun je de browser vertellen dat die met prioriteit moeten worden gedownload. Daarnaast pas je lazy-loading op alle afbeeldingen toe om te zorgen dat afbeeldingen die niet direct nodig zijn, niet direct worden geladen. Lazy-loading wordt doorgaans direct op echt alle afbeeldingen toegepast.
Sinds WordPress 5.6 zit Lazy-Loading ook in de WordPress Core. Echter wordt dit door de meeste thema’s en plugins genegeerd. Vandaar dat je dit doorgaans achteraf regelt met een goede plugin.