Lazy loading er en teknikk som utsetter lasting av bilder, videoer og andre ressurser til de trengs. Nettleseren laster innholdet som er synlig først, og kan hente andre filer etter hvert som de nærmer seg visningsområdet.

I seg selv er dette en liten teknisk endring. Verdien ligger i det den beskytter: hastigheten på det første en besøkende ser.

Hvorfor er det viktig for SEO?

Sidehastighet og Core Web Vitals kan påvirke brukeropplevelsen. Google bruker også signaler knyttet til sideopplevelse som en del av sine bredere rangeringssystemer. En treg side kan også få besøkende til å forlate siden før de rekker å lese noe.

Mobil ytelse er viktig fordi mange bruker telefonen og ulike typer nettverk når de surfer. Statistisk sentralbyrå følger med på internetbruken i Norge, så lokale bedrifter bør ikke anta at alle besøkende har en rask stasjonær tilkobling.

Riktig brukt kan lazy loading bidra til tre ting:

  • Mindre arbeid ved første lasting. Nettleseren kan prioritere ressursene som trengs for den synlige delen av siden.
  • Potensielt bedre LCP. Ved å utsette bilder under det synlige området kan du redusere konkurransen om viktige ressurser som skal lastes inn først.
  • Mindre unødvendig databruk. Bilder som aldri blir nødvendige, blir kanskje ikke lastet ned under besøket.

Slik setter du det opp riktig

Den grunnleggende versjonen bruker ett attributt:

<img src=”produkt.jpg” loading=”lazy” alt=”Norsk ullgenser i grå”>

Native lazy loading støttes av dagens største nettlesere. Likevel er det noen regler som skiller et godt oppsett fra et oppsett som kan skape problemer.

  • Ikke bruk lazy loading over folden

Ikke bruk lazy loading på et bilde som er viktig i det første visningsområdet, spesielt et bilde som kan bli LCP elementet ditt. Bruk loading=”eager” på slike bilder, eller la attributtet være helt borte.

  • Angi bredde og høyde

Uten dimensjoner kan nettleseren kanskje ikke reservere nok plass før bildet lastes inn. Da kan siden hoppe når bildet vises. Det kan påvirke CLS-resultatet ditt og irritere besøkende. Reserver plassen på forhånd.

  • Behold alt teksten

Søkemotorer kan fortsatt lese alt attributter på bilder med lazy loading. Bruk meningsfull alt tekst for informative bilder. Dekorative bilder kan bruke en tom alt-attributt.

  • Test hva Google ser

Test siden i PageSpeed Insights og kontroller den i Google Search Console. Sjekk at viktige bilder lastes inn riktig, og at Google kan finne dem. Ved JavaScript basert lazy loading bør du sørge for at bilde URL-er finnes i den rendrerte HTML koden og ikke bare er avhengige av brukerhandlinger som scrolling.

Avsluttende tanker

Native lazy loading er enkelt å implementere på mange nettsteder. Brukt på riktig måte kan det redusere unødvendig lasting uten å forsinke viktig innhold. Med en god vurdering av hvilke ressurser som skal lastes først, kan lazy loading gjøre ressurskrevende sider lettere uten å forsinke viktig innhold.

Test resultatet i stedet for å stole på at oppsettet fungerer som forventet. Bruk PageSpeed Insights for å sjekke ytelsen og Search Console for å kontrollere om Google får tilgang til det viktige innholdet ditt. Et oppsett bør testes for å sikre at viktig innhold fortsatt er tilgjengelig for både brukere og søkemotorer.

Vanlige spørsmål

Påvirker lazy loading SEO negativt?

Nei, ikke når det er implementert riktig. Google kan behandle bilder med lazy loading, men problemer kan oppstå når viktige bilder forsinkes, eller når JavaScript lasting er avhengig av brukerhandlinger som scrolling.

Bør jeg bruke lazy loading på bilder over folden?

Nei. Et viktig bilde over folden kan bli LCP elementet ditt, og forsinket lasting kan derfor påvirke LCP negativt. Last det inn med en gang, eller bruk loading=”eager” for å gjøre dette tydelig.

Trenger jeg en plugin for lazy loading?

Vanligvis ikke. Moderne WordPress versjoner kan automatisk legge til native lazy loading på bilder som støttes. Sjekk kildekoden på siden og innstillingene for temaet eller eksisterende plugins før du legger til et nytt verktøy for lazy loading.

Påvirker lazy loading alt teksten?

Nei. Alt attributter fungerer som normalt på bilder med lazy loading. Bruk nyttige beskrivelser for informative bilder, slik at både søkemotorer og brukere av skjermlesere kan forstå innholdet.