Lazy loading av bilder og video: slik gjør du nettsiden raskere uten å miste kvalitet

Mange nettsider føles trege og tunge, selv om innholdet egentlig ikke er så omfattende. Ofte er det bildene og videoene som bremser det hele, særlig på mobil og tregt nett.

Lazy loading er en enkel teknikk som kan gi stor fart uten store endringer i koden. Her får du en jordnær forklaring, konkrete eksempler og typiske fallgruver du bør unngå.

Hva er lazy loading, helt konkret?

Lazy loading betyr at nettleseren venter med å laste inn ressurser til de faktisk trengs. For bilder og video betyr det at kun det som er synlig øverst på siden lastes først, resten lastes inn etter hvert som brukeren scroller nedover.

Fordelen er at siden oppleves raskere, spesielt første gang den åpnes. Brukeren slipper å vente på store filer som ligger langt ned, og du bruker mindre data, noe som er viktig på mobil.

Når bør du bruke lazy loading?

Lazy loading er nyttig på nesten alle sider som har flere bilder eller innebygd video, men det er ekstra viktig i noen situasjoner. For eksempel i nettbutikker med mange produktbilder og i artikler med bildegallerier eller skjermbilder.

Du bør også vurdere lazy loading for lange blogginnlegg, landingssider med mange seksjoner og porteføljer med store bildegrid. Kort sagt: hvis en bruker må scrolle en del før alt er synlig, vil lazy loading som regel gi gevinst.

Den enkleste varianten: HTML-attributtet loading

Moderne nettlesere støtter lazy loading med et enkelt HTML-attributt. For bilder og iframes kan du skrive slik:

Eksempel på bilde:

<img src="produkt.jpg" alt="Produktnavn" loading="lazy">

Eksempel på innebygd video via iframe:

<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Verdier for loading-attributtet

• lazyber nettleseren utsette nedlasting til elementet nærmer seg visning.
• eagerber nettleseren laste det tidlig, selv om det ikke er synlig enda.
• Uten loading-attributt bruker nettleseren standard oppførsel, ofte eager.

For de fleste bilder som ikke ligger helt øverst på siden, erloading=”lazy”et trygt valg.

Hva du aldri bør lazy loade

Selv om det er fristende å slenge på lazy overalt, finnes det noen unntak. Alt som er kritisk for at siden skal oppleves som ferdig lastet, bør lastes med en gang.

Dette gjelder for eksempel logo i toppmenyen, hovedbilde helt øverst, bakgrunnsbilde som gir kontekst til overskriften og bilder i helt enkle hero-seksjoner uten mye annet innhold. Disse bidrar direkte til førsteinntrykket og bør dukke opp raskt.

Tilgjengelighet og lazy loading

Riktig brukt skal ikke lazy loading gå ut over tilgjengeligheten. Skjermlesere leser alt-tekst på bilder når de ligger i DOM-en, selv om bildefilen ikke er lastet inn enda.

Problemer oppstår ofte hvis du bruker JavaScript til å generere bildene dynamisk, eller fjerner og legger til elementer alt etter scroll. Pass på at alle viktige bilder ligger fast i HTML-en, med meningsfulle alt-tekster, uavhengig av om filen er lastet inn eller ikke.

Intersection Observer: mer kontroll med JavaScript

Hvis du trenger mer finstyring enn loading-attributtet gir, kan du brukeIntersection Observer APIi JavaScript. Da kan du, for eksempel, vise en enkel plassholder først, og bytte til originalbildet når det nærmer seg synlig område.

Et enkelt mønster er å ha en liten data-attributt med bildeadressen, og så kopiere den over til src når bildet er i nærheten av viewport.

Eksempel på markup og enkel logikk

HTML:

<img data-src="stor-bilde.jpg" alt="Beskrivelse" loading="lazy">

JavaScript (forenklet):

const imgs = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      obs.unobserve(img);
    }
  });
});
imgs.forEach(img => observer.observe(img));

Vanlige feil og hvordan du unngår dem

En typisk feil er å lazy loade bilder i toppnavigasjon eller hero, som gir ekstra flimmer eller tomme områder helt øverst. Løsningen er å bruke lazy på resten, men la de viktigste få vanlig oppførsel.

En annen feil er å ikke sette bredde og høyde på bilder. Da kan layouten hoppe når bildet lastes inn. Bruk width og height i HTML, eller ratio-bokser i CSS, slik at nettleseren reserverer plass og unngår ubehagelige hopp.

Lazy loading og SEO

Søkemotorer forstår lazy loading langt bedre enn før, særlig når du bruker native loading-attributt. Likevel bør du ikke gjøre det unødvendig komplisert med tunge JavaScript-løsninger som skaper innholdet først etter brukerinteraksjon.

Hold HTML-en så komplett som mulig, med faktiske img-elementer, riktige alt-tekster og en struktur som gir mening også uten JavaScript. Da får du både raskere side og søkemotorer som klarer å forstå det du viser.

Slik kommer du i gang i et eksisterende prosjekt

På mange nettsteder kan du komme langt med et lite grep. Start med å legge til loading=”lazy” på alle bilder som ikke ligger helt i toppen, gjerne via en mal eller et bildekomponent der du har felles logikk.

Deretter kan du måle effekten ved hjelp av verktøy som for eksempel Lighthouse i Chrome, eller lignende testverktøy. Husk at konkrete tall og anbefalinger kan endre seg over tid, så sjekk oppdatert dokumentasjon for verktøyene du bruker.

Oppsummering: små grep, stor effekt

Lazy loading er en av de enkleste måtene å gi nettsiden et merkbart fartsløft på, spesielt hvis du har mange bilder eller video. Med native loading-attributt er terskelen lav, og du trenger sjelden store omskrivninger.

Hvis du samtidig sørger for gode alt-tekster, faste bildeflater og fornuftig prioritering av det som ligger øverst, får du en side som både føles rask, fungerer godt på mobil og er mer behagelig å bruke for alle.