Fiks advarselen Largest Contentful Paint image was lazily loaded i Lighthouse

Largest Contentful Paint image was lazily loaded - kort oppsummert.

Lazy loading av Largest Contentful Paint-bildet vil utløse en Lighthouse-advarsel. Lazy loadede bilder blir satt i kø for nedlasting mye senere enn ikke-lazy (eager) bilder. Dette vil føre til at bildet rendres senere og forsinke Largest Contentful Paint-metrikken. 

Nettlesere er smarte nok til å finne ut av dette, ikke sant? Ja, nettlesere er ganske smarte, men ikke i dette tilfellet!

Når du lazy loader et bildeelement, forteller du eksplisitt nettleseren om å nedprioritere dette bildet.

Dette betyr at alle andre ikke-lazy bilder vil bli planlagt for nedlasting tidligere enn dine lazy bilder. Når dette lazy bildet er ditt LCP-element, vil du sannsynligvis forsinke din LCP. Kanskje til og med mye!

Det blir enda verre når du bruker JavaScript-baserte lazy loading-biblioteker som lazysizes.js. Nå vil nettleseren ikke bare forsinke LCP-bildeelementet ditt, du må også vente på at JavaScript lastes ned og kjøres.

Fiks Lighthouse-advarselen ved å fjerne loading="lazy"-attributtet fra LCP-bildet ditt eller ved å oppdatere filtrene på pluginene dine for å omgå lazy loading for LCP-bildet.

Hva er advarselen 'Largest Contentful Paint image was lazily loaded'?

Denne advarselen gis når Largest Contentful Paint-bildet er lazy-loadet av nettleseren. Hvorfor? Fordi lazy loading av det viktigste bildet på siden (Largest Contentful Paint-elementet) er en dårlig idé. For pagespeed-formål bør du laste dette elementet så tidlig som mulig. Lazy loading av dette elementet kan forsinke Largest Contentful Paint.

En rask påminnelse: lazy loading

Lazy loading er når et element, ofte et bilde, ikke blir planlagt for nedlasting av nettleseren umiddelbart under sidelasting, men heller når elementet er nær den synlige delen av skjermen. Det finnes 2 metoder for lazy loading.

Nativ lazy loading

Nativ lazy loading bruker nettleserens native lazy loading API. For bilder er det så enkelt som å legge til loading="lazy" på bildetaggen. Nativ lazy loading er for øyeblikket støttet av alle moderne nettlesere.

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

JavaScript-basert lazy loading

JavaScript-basert lazy loading bruker et JavaScript API kalt intersection observer for å bestemme når et bilde er i eller nær det synlige viewporten. Når et bilde er i det synlige viewporten, byttes bilde-src-en ut med det endelige bildet. Vanligvis kan du gjenkjenne JavaScript-basert lazy loading ved data-src-attributtet på bildet. JavaScript lazy loading støttes av enda flere nettlesere, men har en alvorlig ulempe: 'det bruker JavaScript'. For at lazy loading i det hele tatt skal begynne, må en JavaScript-fil lastes ned. Dette betyr at JavaScript-basert lazy loading aldri kan være like rask og effektiv som nativ lazy loading

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

Hvordan påvirker et 'lazy loadet Largest Contentful Paint-bilde' pagespeed?

Lazy loading av det elementet vil forsinke øyeblikket da LCP-bildet tegnes på skjermen. Dette vil føre til at en besøkende tror at siden laster saktere fordi det tar lengre tid å bli 'visuelt klar'

Det viktigste bildet, ofte LCP-elementet, bør lastes umiddelbart for å sikre at det kan tegnes på skjermen så raskt som mulig.

Nå tenker du kanskje at en nettleser ville vært smart nok til å finne ut av dette? Du tar feil! Når du lazy loader et bildeelement, forteller du eksplisitt nettleseren om å nedprioritere dette bildet. Dette betyr at alle andre ikke-lazy bilder vil bli planlagt for nedlasting tidligere enn dine lazy bilder. Når dette lazy bildet er ditt LCP-element, vil du sannsynligvis forsinke din LCP. Kanskje til og med mye!

Det blir enda verre når du bruker JavaScript-baserte lazy loading-biblioteker som lazysizes.js. Nå vil nettleseren ikke bare forsinke LCP-bildeelementet ditt, du må også vente på at JavaScript lastes ned og kjøres.

Ta bare en titt på denne Chrome-nettverksfanen der jeg lazy loadet LCP-bildet (HERO.jpg) og eager loadet 6 andre bilder. Du vil se at HERO-bildet er det siste bildet som starter nedlasting og også det siste bildet som fullfører nedlasting!

Litt mer detalj

La oss nå bli litt mer tekniske. Hvorfor kan ikke en nettleser finne ut av dette på egenhånd? Med lazy loading instruerer du spesifikt en nettleser om å nedprioritere et bilde. I mange tilfeller vil dette bety at en nettleser vil starte nedlasting av andre ressurser først. Og det er nettopp det som forårsaker forsinkelsen i LCP.

• Lazy bilder blir satt i kø for nedlasting mye senere enn ikke-lazy (eager) bilder.
• Lazy bilder lastes ofte ned med lav prioritet.
• Andre elementer som vanlige bilder, deferred scripts, fonter osv. kan bli planlagt for nedlasting tidligere enn lazy bilder.
• JavaScript-basert lazy loading er avhengig av et JavaScript som må lastes ned og kjøres før lazy loading i det hele tatt kan begynne.
  

Hvordan fikse 'Largest Contentful Paint image was lazily loaded'

Å fikse advarselen om det lazy Largest Contentful Paint-bildet er enkelt. Bare ikke lazy load dette bildet.

I teorien

• Hvis du bruker nativ lazy loading, fjern loading="lazy" fra LCP-elementet eller endre det til loading="eager"
• Hvis du bruker JavaScript-basert lazy loading, kan du vurdere å bytte til den raskere native lazy loadingen eller bare utelate LCP-bildet fra lazy loading.
• Hvis du bruker en slags bildekomponent som next/image, sett strategy="eager".

I praksis

I praksis kan dette gi noen hodepiner. Mange nettsteder bruker optimaliseringsplugins som lazy loader alle bildene på skjermen for deg. Disse pluginene skiller ikke mellom viktige, alltid synlige bilder og bilder under folden.

De fleste plugins lar deg 'omgå lazy loading' basert på filnavn, klassenavn eller andre attributter. Dette betyr at du må lese dokumentasjonen for pluginen din eller bare google '[ditt plugin-navn] + bypass lazy loading'. Deretter redigerer du malfilen din og endrer hovedbildet ditt tilsvarende eller endrer bildene i sideredigereren din.

Løsning for 'Largest Contentful Paint image was lazily loaded'

Noen ganger lar ikke CMS-et ditt deg endre lazy loading-innstillingene for bilder. I så fall finnes det fortsatt noen løsninger du kan bruke for å minimere påvirkningen.

• Lazy load alle bilder for å sikre at bilder under folden som er 'eager' ikke lastes ned før LCP-bildet
  
• Unngå bakgrunnsbilder for å sikre at ingen bakgrunnsbilder lastes ned før LCP-elementet
  
• Forhåndslast LCP-elementet. Dette vil sørge for at LCP-bildet planlegges for nedlasting så tidlig som mulig
  
• Deaktiver JavaScript-basert lazy loading og bytt til nativ lazy loading. Dette vil i det minste fjerne JavaScript-forsinkelsen
  
• Legg til fetchpriority = "high" på LCP-elementet. Dette vil planlegge bildet for tidlig nedlasting
  
• Optimaliser alle bildene dine. Bruk responsive bilder og neste generasjons bildeformater for å redusere tiden det tar å laste ned bildene.