In het kort, het grootste element wat geladen wordt binnen je website zonder te scrollen. Dit element is vaak een afbeelding die boven de vouw (het beeld zonder te scrollen) zichtbaar is. Zorg ervoor dat zeker deze afbeelding optimaal gecomprimeerd is.

Lazy Loading in WordPress

Lazy Loading in WordPress zorgt ervoor dat eigenlijk simpelweg alleen de afbeeldingen getoond worden die in de viewport zijn. Voorbeeld: je komt op de homepage van een webshop en ziet daar vijf afbeeldingen staan voor verschillende categorieën.
Onder de vouw, als je gaat scrollen staan nog meer afbeeldingen. Zonder lazy loading zullen deze direct bij het openen van de pagina geladen worden ondanks dat je de bezoeker ze eigenlijk nog helemaal niet nodig heeft op dit moment.
Deze aanpassing kan er dus voor zorgen dat jouw homepage die ongeveer 1mb is in totaal na ingebruikname van lazy loading maar 300kb is wat direct ingeladen word. Dit is dus een enorme winst.

Lazy Loading voor je Largest Contentful Paint?

Nee. Sluit deze afbeelding uit van lazy loading. En als je toch afbeeldingen af gaat sluiten in bijvoorbeeld WP Rocket of LSCache neem dan direct je logo mee. Het is beter om ook deze niet te lazyloaden aangezien dit een van de eerste elementen is die je website moet gaan tonen aan de bezoekers. Voorkom dus dat alles boven de vouw wat getoond wordt zonder te scrollen gelazyload wordt. Dit kun je vaak instellen in je cache plugin, mocht je deze optie niet hebben dan zul je de standaard lazyload functie van WordPress voor die afbeeldingen uit moeten schakelen wat vaak werkt met een standaard css class ‘nolazyload’.