Fiks Defer offscreen images Lighthouse-advarsel

Hva er 'defer offscreen images' Lighthouse-advarselen?

Hva er defer offscreen images-advarselen i Lighthouse? Lighthouse flagger sider som har enten:

• Bilder som ender under 3 ganger visningsportens høyde.
  Når et bilde ikke er lazy loaded og ender under 3 ganger høyden på den synlige delen av siden, og starter under den synlige delen av siden.
• Og er større enn 0,02 MB eller bruker mer enn 50 ms på å laste.
  Bilder som er enten små eller innebygde ignoreres av Lighthouse. Ofte bruker lazy loading-skript små plassholder-bilder.
• Og ikke har loading-attributtet definert.
  Lighthouse ignorerer bilder som har enten loading="lazy" eller loading="eager"-attributtet.

'Defer offscreen images'-advarselen påvirker ikke direkte noen Lighthouse-metrikker. I teorien kan sider med offscreen-bilder laste ganske raskt. I praksis gjør de det ofte ikke. For mange offscreen-bilder vil mest sannsynlig indirekte påvirke viktige Lighthouse-metrikker som Largest Contentful Paint (LCP).

En rask påminnelse - Hva er lazy loading?

Lazy loading betyr at bilder som ikke befinner seg i den synlige delen av siden kan lastes på et senere tidspunkt, vanligvis rett før de ruller inn i visningsfeltet.

Hva forårsaker 'eager loaded' offscreen-bilder?

Bilder er ikke utsatt som standard. Offscreen-bilder som ikke er utsatt plasseres på siden fordi loading-attributtet for bildet er tomt eller bildet ikke er kompatibelt med det tilpassede lazy loading-biblioteket. Offscreen-bilder forårsakes vanligvis av:

• Dårlig kodede utvidelser i ditt CMS.
• Utvidelser som deaktiverer nativ lazy loading
• Bakgrunnsbilder
• Sidebyggere som genererer dårlig HTML (for eksempel: Elementor eller WP Bakery).
  
• Tekst som er kopiert og limt inn i en WYSIWYG-editor (som TinyMCE).
• Dårlig malkoding.

Hvordan påvirker 'offscreen-bilder' sidehastigheten

Offscreen-bilder påvirker ikke direkte Lighthouse-metrikkene. Det gjør lasting av en nettside unødvendig komplisert, og gjør det nesten umulig å oppnå en høy Lighthouse-poengsum. Nettleseren din må laste ned flere ressurser før nettsiden kan vises på skjermen. Det er 3 problemer med offscreen-bilder.

• Nettleseren din må laste ned flere bilder før siden kan vises.
• Andre ressurser som er nødvendige for å vise siden kan bli forsinket siden de får lavere prioritet
• Nettleseren din kan bruke mye mer minne ved lasting av siden.

Hvordan fikse 'defer offscreen images'

For å fikse 'defer offscreen images' må du lazy loade bilder som ikke er i det synlige visningsfeltet. Du kan gjøre dette ved å legge til nativ lazy loading eller et lazy loading-bibliotek. For å legge til nativ lazy loading, legg bare til 'loading="lazy" på bildeelementet'.

<img      src="image.webp" 
     alt="et nativt lazy loaded bilde" 
     width="300" height="300">

Alternativt kan du legge til et nativt lazy loading-bibliotek som lazysizes eller implementere din egen lazy loading (det er enklere enn du kanskje tror).

Derfra må du gjøre litt undersøkelser. Prøv å finne ut hva som forårsaker at disse bildene plasseres uten utsatt lasting på siden. Det er 5 vanlige årsaker:

1. Dårlig kodede utvidelser i ditt CMS.
   Noen utvidelser kan legge til HTML direkte på siden og ikke bruke de riktige hookene som aktiverer lazy loading.
2. Utvidelser som deaktiverer nativ lazy loading.
   Det finnes utvidelser der ute som deaktiverer nativ lazy loading som standard.
3. Sidebyggere som genererer dårlig HTML
   Sidebyggere som Elementor eller WP Bakery lager ofte oppblåst kode som er langt fra perfekt. Det finnes ingen enkel løsning for dette. Sidebyggere er ofte en del av arbeidsflyten. Løsningen inkluderer å rydde opp i den oppblåste koden og endre arbeidsflyten.
4. Tekst som er kopiert og limt inn i en WYSIWYG-editor
   De fleste WYSIWYG-editorer som TinyMCE gjør en dårlig jobb med å rydde opp i innlimt kode, spesielt når den er limt inn fra en annen rik tekstkilde som Microsoft Word. Disse editorene legger kanskje ikke til lazy loading på bildene dine.
5. Dårlig (mal-)koding.
   Selv når lazy loading er aktivert, kan hardkodede bilder i malene dine fortsatt ikke være lazy loaded. Sjekk malene dine for offscreen-bilder og lazy load dem.

Hvilken er bedre - Nativ lazy loading vs. lazy loading-skript?

Hvilken er bedre? Bør du bruke nettleserens native loading="lazy" eller et lazy loading-skript? Personlig foretrekker jeg nativ lazy loading i nettleseren. Hvorfor? Fordi jeg ikke trenger å bruke et eksternt skript som introduserer ekstra belastning. Nativ lazy loading er rett og slett raskere. Nativ lazy loading støttes imidlertid ikke av Safari. Hvis de fleste av brukerne dine surfer på nettet på sine iPhoner eller Mac-er, vurder å bruke et lazy loading-skript. De fleste gangene oppveier fordelene med nativ lazy loading ulempene ved å ikke støtte Safari.

Alternativ løsning for 'defer offscreen images'

Noen ganger er det ikke mulig å utsette offscreen-bilder. Du har kanskje ikke tilgang til malen, eller CMS-et ditt støtter kanskje ikke lazy loading. Det finnes noen alternative løsninger for å redusere virkningen av offscreen-bilder. Disse løsningene er langt fra perfekte og kan introdusere et helt nytt sett med utfordringer.

• Minifiser og komprimer bildene dine.
  Minifiser og komprimer de nåværende bildene dine. Mindre bilder har mindre innvirkning på lasteytelsen enn store bilder.
• Bruk nye og raskere bildeformater.
  I stedet for png- og jpeg-filformater, bytt til et raskere filformat som WebP.
• Del opp store sider i flere sider.
  Å dele opp store sider i flere sider kan redusere antall bilder som vises på en side.
• Implementer uendelig rulling.
  Uendelig rulling er i bunn og grunn lazy loading, bare ikke for bilder, men for hele deler av nettsiden. Når du ruller gjennom gjentatte elementer som bilder (se for eksempel Pinterest), kan uendelig rulling øke hastigheten på siden din betraktelig.