Fix de Largest Contentful Paint afbeelding werd lazily geladen in lighthouse

Largest Contentful Paint element lazily loaded - in het kort.

Het lazy-loaden van de Largest Contentful Paint afbeelding zal een lighthouse waarschuwing triggeren. Lazy loaded afbeeldingen worden veel later in de wachtrij geplaatst om te downloaden dan de niet-lazy (eager) afbeeldingen. Dit zal ervoor zorgen dat de afbeelding later rendert en de Largest Contentful Paint visualisatie vertragen. 

Browsers zijn slim genoeg om dit uit te zoeken toch? Ja, browsers zijn behoorlijk slim, maar in dit geval niet!

Wanneer je een afbeeldingselement lazy loadt, vertel je de browser expliciet om deze afbeelding te deprioriteren.

Dit betekent dat alle andere niet-lazy afbeeldingen eerder worden ingepland voor download dan je lazy afbeeldingen. Wanneer deze lazy afbeelding je LCP element is, zul je je LCP waarschijnlijk vertragen. Misschien zelfs wel met veel!

Dingen worden nog erger wanneer je JavaScript-gebaseerde lazy loading bibliotheken zoals lazysizes.js gebruikt. Nu vertraagt de browser niet alleen je LCP afbeeldingselement, je moet zelfs wachten tot JavaScript is gedownload en uitgevoerd.

Fix de lighthouse waarschuwing door het loading="lazy" attribuut van je LCP afbeelding te verwijderen of door de filters op je plugins bij te werken om lazy loading voor de LCP afbeelding te omzeilen.

Wat is de 'Largest Contentful Paint image was lazily loaded' waarschuwing?

Deze waarschuwing die wordt gegeven wanneer de Largest Contentful Paint afbeelding wordt lazy-loaded door de browser. Waarom? Omdat het lazy-loaden van de belangrijkste afbeelding op de pagina (het Largest Contenful Paint element) een slecht idee is. Voor pagespeed doeleinden zou je dit element zo vroeg mogelijk moeten laden. Het lazy loading van dit element kan de Largest Contentful Paint vertragen.

Een korte herinnering: lazy loading

Lazy loading is wanneer een element, vaak een afbeelding, niet wordt ingepland voor download door de browser, onmiddellijk tijdens het laden van de pagina, maar eerder wanneer het element dicht bij het zichtbare deel van het scherm is. Er zijn 2 methoden van lazy loading.

Native lazy loading

Native lazy loading gebruikt de browsers native lazy loading API. Voor afbeeldingen is het zo simpel als het toevoegen van loading="lazy" aan de image tag. Native lazy loading wordt momenteel ondersteund door alle moderne browsers.

<img loading="lazy" 
     src="image.png" 
     width="123" 
     height="123" 
     alt="een lazy loaded afbeelding"
>

JavaScript gebaseerde lazy loading

JavaScript gebaseerde lazy loading gebruikt een JavaScript API genaamd de intersection observer om te bepalen wanneer een afbeelding in of dichtbij de zichtbare viewport is. Wanneer een afbeelding in de zichtbare viewport is, wordt de image src verwisseld voor de uiteindelijke afbeelding. Meestal kun je JavaScript gebaseerde lazy loading herkennen aan het data-src attribuut op de afbeelding. JavaScript lazy loading wordt door nog meer browsers ondersteund, maar heeft een ernstig nadeel: 'het gebruikt JavaScript'. Om lazy loading überhaupt te laten beginnen, moet een JavaScript-bestand worden gedownload. Dit betekent dat JavaScript gebaseerde lazy loading nooit zo snel en efficiënt kan zijn als native lazy loading

<img data-src="image.png" 
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="een lazy loaded afbeelding"
>

Hoe beïnvloedt een 'lazy loading Largest Contentful Paint afbeelding' de pagespeed?

Het lazy loading van dat element zal het moment vertragen waarop de LCP afbeelding op het scherm wordt geschilderd. Dit zal ervoor zorgen dat een bezoeker gelooft dat de pagina langzamer laadt omdat het een langere tijd duurt om 'visueel klaar' te zijn

De belangrijkste afbeelding, vaak het LCP element, moet onmiddellijk worden geladen om ervoor te zorgen dat het zo snel mogelijk op het scherm kan worden geschilderd.

Nu zou je kunnen denken dat een browser slim genoeg zou zijn om dit uit te zoeken? Je vergist je! Wanneer je een afbeeldingselement lazy loadt, vertel je de browser expliciet om deze afbeelding te deprioriteren. Dit betekent dat alle andere niet-lazy afbeeldingen eerder worden ingepland voor download dan je lazy afbeeldingen. Wanneer deze lazy afbeelding je LCP element is, zul je je LCP waarschijnlijk vertragen. Misschien zelfs wel met veel!

Dingen worden nog erger wanneer je JavaScript-gebaseerde lazy loading bibliotheken zoals lazysizes.js gebruikt. Nu vertraagt de browser niet alleen je LCP afbeeldingselement, je moet zelfs wachten tot JavaScript is gedownload en uitgevoerd.

Kijk maar eens naar deze chrome netwerk tab waar ik de LCP afbeelding (HERO.jpg) lazy loadde en 6 andere afbeeldingen eager loadde. Je zult zien dat de HERO afbeelding de laatste afbeelding is die begint met downloaden en ook de laatste afbeelding is die klaar is met downloaden!

Een beetje meer detail

Laten we nu wat technischer worden. Waarom kan een browser dit niet zelf uitzoeken? Dat wil zeggen, met lazy loading instrueer je een browser specifiek om een afbeelding te deprioriteren. In veel gevallen zal dit betekenen dat een browser eerst andere resources zal beginnen te downloaden. En precies dat veroorzaakt de vertraging in LCP.

• Lazy afbeeldingen worden veel later in de wachtrij geplaatst om te downloaden dan niet-lazy (eager) afbeeldingen.
• Lazy afbeeldingen worden vaak gedownload met een lage prioriteit.
• Andere elementen zoals normale afbeeldingen, uitgestelde scripts, lettertypen etc kunnen eerder worden ingepland voor download dan lazy afbeeldingen.
• JavaScript gebaseerde lazy loading is afhankelijk van een JavaScript dat moet downloaden en uitvoeren voordat lazy loading zelfs maar kan beginnen.
  

Hoe 'Largest Contentful Paint image was lazily loaded' te repareren

Het repareren van de waarschuwing over de lazy Largest Contentful Paint afbeelding is eenvoudig. Doe gewoon niet lazy loaden van deze afbeelding.

In theorie

• Als je native lazy loading gebruikt, verwijder dan loading="lazy" van het LCP element of verander het naar loading="eager"
• Als je JavaScript gebaseerde lazy loading gebruikt, zou je kunnen overwegen om over te schakelen naar de snellere native lazy loading of gewoon de LCP afbeelding uit te sluiten van lazy loading.
• Als je een soort afbeeldingscomponent gebruikt zoals next/image zet dan de strategy="eager".

In het echte leven

In het echte leven kan dit wat hoofdpijn veroorzaken. Veel sites gebruiken optimalisatieplugins die alle afbeeldingen op het scherm voor je lazy loaden. Die plugins maken geen onderscheid tussen belangrijke, altijd zichtbare afbeeldingen en afbeeldingen below-the-fold.

De meeste plugins staan je toe om 'lazy loading te omzeilen' op basis van bestandsnaam, klassenaam of andere attributen. Dit betekent dat je de documentatie voor je plugin moet lezen of gewoon googelen op '[jouw plugin naam] + bypass lazy loading'. Bewerk vervolgens je template bestand en verander je hoofdafbeelding dienovereenkomstig of verander de afbeeldingen in je pagina-editor.

Workaround voor 'Largest Contentful Paint image was lazily loaded'

Soms staat je CMS je niet toe om de lazy loading instellingen van afbeeldingen te wijzigen. In dat geval zijn er nog steeds enkele workarounds die je kunt gebruiken om de impact te minimaliseren.

• Lazy load alle afbeeldingen om ervoor te zorgen dat below the fold 'eager' afbeeldingen niet worden gedownload voor de LCP afbeelding
  
• Vermijd achtergrondafbeeldingen om ervoor te zorgen dat er geen achtergrondafbeeldingen worden gedownload voor het LCP element
  
• Preload het LCP element. Dit zal ervoor zorgen dat de LCP afbeelding zo vroeg mogelijk wordt ingepland voor download
  
• Schakel JavaScript gebaseerde lazy loading uit en schakel over naar native lazy loading. Dit zal in ieder geval de JavaScript vertraging verwijderen
  
• Voeg fetchpriority = "high" toe aan het LCP element. Dit zal de afbeelding inplannen voor vroege download
  
• Optimaliseer al je afbeeldingen. Gebruik responsieve afbeeldingen en Next-gen afbeeldingsformaten om de tijd die het kost om de afbeeldingen te downloaden te verlagen.