Niet Lazy loading voor Grootste Contentful Paint afbeelding

Het lazy loading van uw LCP afbeelding (bijv. hero image, main slider, etc.) kan een nadelig effect hebben op de LCP timing van uw pagina.

Hoewel u offscreen afbeeldingen op uw pagina best ok laadt, is het niet aangeraden om boven de vouw inhoud zoals uw LCP afbeelding langzaam te laden om een snelle LCP timing te bekomen.

LCP is een van de Web Vitals, en er zijn SEO-voordelen verbonden aan het verbeteren ervan.

Hoe beïnvloedt Lazy loading afbeelding de paginaprestaties?

Het lazy loading van afbeeldingen is het proces waarbij het laden van afbeeldingen wordt uitgesteld totdat ze nodig zijn. Dit betekent dat afbeeldingen pas worden geladen als er naartoe wordt gescrolld (d.w.z. dat ze zichtbaar zijn in de viewport van de browser), waardoor de browser andere bronnen die belangrijker zijn voorrang kan geven.

Als lazy loading echter wordt toegepast op inhoud boven de vouw (zoals de LCP-afbeelding), kan de browser de LCP-afbeelding uitstellen ten gunste van andere bronnen.

Omdat de LCP-afbeelding niet onmiddellijk wordt gedownload, kan dit de LCP-timing vertragen en uw pagina voor langere tijd visueel onvolledig doen lijken voor de gebruiker.

Uit onderzoek van Google blijkt dat het lui laden van de LCP-afbeelding de LCP-timing van uw pagina kan verlengen.

Als u uw LCP-afbeelding niet lazy loading laadt, kan dit de LCP-tijd verbeteren en de indruk wekken dat uw pagina sneller is geladen.
De groene website ziet er met 0,2s visueel completer uit dan de rode website.

Niet lazy loading van de LCP afbeelding helpt deze sneller te laden omdat de browser deze gewoon normaal verwerkt zoals deze in de markup voorkomt. Dit is beter voor uw LCP timing en maakt uw pagina visueel compleet voor de gebruiker veel eerder in de pagina laden.

Lazy-loading probleem oplossen verbeteren WordPress plugin

Je kan lazy-loading verbeteren met WordPress plugin. Als je de A3 lazy load plugin gebruikt, kun je de CSS code of class van de afbeelding hier toevoegen:

lazy-loading verbeteren

Als uw site gebruik maakt van native image lazy-loading, controleer dan hoe dit is geïmplementeerd en voer A/B-tests uit om de prestatiekosten ervan beter te begrijpen.

Het kan baat hebben bij het beter laden van afbeeldingen boven de vouw. Als u een WordPress-site hebt, zal er hopelijk snel een patch landen in WordPress core. En als u een ander CMS gebruikt, zorg er dan voor dat zij op de hoogte zijn van de potentiële prestatieproblemen die hier worden beschreven.

lazy loading en LCP

Handleidingen over Lazy loading

Meer handleidingen over afbeeldingen en lazy loading vind je hier: