Åtgärda Largest Contentful Paint image was lazily loaded i Lighthouse

Largest Contentful Paint image was lazily loaded – i korthet.

Att lazy-ladda Largest Contentful Paint-bilden kommer att utlösa en Lighthouse-varning. Lazy-laddade bilder placeras i kö för nedladdning mycket senare än icke-lazy (eager) bilder. Detta gör att bilden renderas senare och fördröjer Largest Contentful Paint-mätvärdet. 

Webbläsare är smarta nog att lösa detta själva, eller? Ja, webbläsare är ganska smarta, men inte i det här fallet!

När du lazy-laddar ett bildelement säger du uttryckligen åt webbläsaren att nedprioritera denna bild.

Det innebär att alla andra icke-lazy bilder kommer att schemaläggas för nedladdning tidigare än dina lazy-laddade bilder. När denna lazy-laddade bild är ditt LCP-element kommer du sannolikt att fördröja din LCP. Kanske till och med avsevärt!

Det blir ännu värre när du använder JavaScript-baserade lazy-loading-bibliotek som lazysizes.js. Nu fördröjer webbläsaren inte bara ditt LCP-bildelement, du måste dessutom vänta på att JavaScript ska laddas ner och köras.

Åtgärda Lighthouse-varningen genom att ta bort attributet loading="lazy" från din LCP-bild eller genom att uppdatera filtren i dina plugins för att kringgå lazy-loading för LCP-bilden.

Vad är varningen 'Largest Contentful Paint image was lazily loaded'?

Denna varning ges när Largest Contentful Paint-bilden är lazy-laddad av webbläsaren. Varför? Eftersom att lazy-ladda den viktigaste bilden på sidan (Largest Contentful Paint-elementet) är en dålig idé. Ur ett pagespeed-perspektiv bör du ladda detta element så tidigt som möjligt. Att lazy-ladda detta element kan fördröja Largest Contentful Paint.

En snabb påminnelse: lazy-loading

Lazy-loading innebär att ett element, ofta en bild, inte schemaläggs för nedladdning av webbläsaren direkt vid sidladdning utan snarare när elementet är nära den synliga delen av skärmen. Det finns 2 metoder för lazy-loading.

Nativ lazy-loading

Nativ lazy-loading använder webbläsarens inbyggda lazy-loading-API. För bilder är det så enkelt som att lägga till loading="lazy" på bildtaggen. Nativ lazy-loading stöds för närvarande av alla moderna webbläsare.

<img  
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

JavaScript-baserad lazy-loading

JavaScript-baserad lazy-loading använder ett JavaScript-API kallat intersection observer för att avgöra när en bild är i eller nära det synliga viewporten. När en bild är i det synliga viewporten byts bildens src mot den slutliga bilden. Vanligtvis kan du känna igen JavaScript-baserad lazy-loading genom data-src-attributet på bilden. JavaScript-baserad lazy-loading stöds av ännu fler webbläsare men har en allvarlig nackdel: 'den använder JavaScript'. För att lazy-loading ens ska börja måste en JavaScript-fil laddas ner. Det innebär att JavaScript-baserad lazy-loading aldrig kan vara lika snabb och effektiv som nativ lazy-loading

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

Hur påverkar en 'lazy-laddad Largest Contentful Paint-bild' pagespeed?

Att lazy-ladda det elementet kommer att fördröja ögonblicket då LCP-bilden renderas på skärmen. Detta gör att en besökare upplever att sidan laddar långsammare eftersom det tar längre tid att bli 'visuellt klar'

Den viktigaste bilden, ofta LCP-elementet, bör laddas omedelbart för att säkerställa att den kan renderas på skärmen så snabbt som möjligt.

Nu kanske du tror att en webbläsare skulle vara smart nog att lista ut detta? Där har du fel! När du lazy-laddar ett bildelement säger du uttryckligen åt webbläsaren att nedprioritera denna bild. Det innebär att alla andra icke-lazy bilder schemaläggs för nedladdning tidigare än dina lazy-laddade bilder. När denna lazy-laddade bild är ditt LCP-element kommer du sannolikt att fördröja din LCP. Kanske till och med avsevärt!

Det blir ännu värre när du använder JavaScript-baserade lazy-loading-bibliotek som lazysizes.js. Nu fördröjer webbläsaren inte bara ditt LCP-bildelement, du måste dessutom vänta på att JavaScript ska laddas ner och köras.

Ta bara en titt på denna Chrome-nätverksflik där jag lazy-laddade LCP-bilden (HERO.jpg) och eager-laddade 6 andra bilder. Du kan se att HERO-bilden är den sista bilden som börjar laddas ner och även den sista bilden som slutförs!

Lite mer detaljer

Låt oss nu bli lite mer tekniska. Varför kan inte en webbläsare lista ut detta på egen hand? Det beror på att du med lazy-loading uttryckligen instruerar webbläsaren att nedprioritera en bild. I många fall innebär detta att webbläsaren börjar ladda ner andra resurser först. Och det är precis detta som orsakar fördröjningen av LCP.

• Lazy-laddade bilder placeras i kö för nedladdning mycket senare än icke-lazy (eager) bilder.
• Lazy-laddade bilder laddas ofta ner med låg prioritet.
• Andra element som vanliga bilder, uppskjutna skript, typsnitt etc kan schemaläggas för nedladdning tidigare än lazy-laddade bilder.
• JavaScript-baserad lazy-loading är beroende av ett JavaScript som måste laddas ner och köras innan lazy-loading ens kan påbörjas.
  

Hur åtgärdar du 'Largest Contentful Paint image was lazily loaded'

Att åtgärda varningen om den lazy-laddade Largest Contentful Paint-bilden är enkelt. Lazy-ladda helt enkelt inte denna bild.

I teorin

• Om du använder nativ lazy-loading, ta bort loading="lazy" från LCP-elementet eller ändra det till loading="eager"
• Om du använder JavaScript-baserad lazy-loading kan du överväga att byta till den snabbare nativa lazy-loadingen eller helt enkelt undanta LCP-bilden från lazy-loading.
• Om du använder någon typ av bildkomponent som next/image, sätt strategy="eager".

I verkligheten

I verkligheten kan detta orsaka en del huvudvärk. Många webbplatser använder optimeringsplugins som lazy-laddar alla bilder på sidan åt dig. Dessa plugins skiljer inte mellan viktiga, alltid synliga bilder och bilder under vikningen (below-the-fold).

De flesta plugins låter dig 'kringgå lazy-loading' baserat på filnamn, klassnamn eller andra attribut. Det innebär att du behöver läsa dokumentationen för ditt plugin eller helt enkelt googla '[ditt pluginnamn] + bypass lazy loading'. Redigera sedan din mallfil och ändra din huvudbild därefter eller ändra bilderna i din sidredigerare.

Alternativa lösningar för 'Largest Contentful Paint image was lazily loaded'

Ibland låter ditt CMS dig inte ändra lazy-loading-inställningarna för bilder. I sådana fall finns det fortfarande några alternativa lösningar du kan använda för att minimera påverkan.

• Lazy-ladda alla bilder för att säkerställa att bilder under vikningen som är 'eager' inte laddas ner före LCP-bilden
  
• Undvik bakgrundsbilder för att säkerställa att inga bakgrundsbilder laddas ner före LCP-elementet
  
• Förladda (preload) LCP-elementet. Detta säkerställer att LCP-bilden schemaläggs för nedladdning så tidigt som möjligt
  
• Inaktivera JavaScript-baserad lazy-loading och byt till nativ lazy-loading. Detta tar åtminstone bort JavaScript-fördröjningen
  
• Lägg till fetchpriority = "high" på LCP-elementet. Detta schemalägger bilden för tidig nedladdning
  
• Optimera alla dina bilder. Använd responsiva bilder och Next-gen bildformat för att minska tiden det tar att ladda ner bilderna.