Lazy loading av bilder: slik gjør du siden raskere uten å miste kvalitet

Nettsteder blir stadig tyngre, og bilder er ofte den største synderen. Likevel vil vi ikke ofre kvalitet, spesielt ikke på forsider, produktvisninger og porteføljer.

Lazy loading gir deg en enkel måte å få kortere lastetid, mer fornøyde brukere og ofte bedre rangering i søk, uten å måtte redesigne hele nettsiden.

Hva er lazy loading, egentlig?

Lazy loading betyr at nettleseren bare henter innhold når det faktisk trengs. For bilder vil det si at kun de som er synlige i vinduet ved sideinnlasting lastes først, mens resten venter til brukeren scroller nedover.

På en lang side med mange bilder kan dette være forskjellen mellom en side som føles treg og en som oppleves som umiddelbart responsiv.

Når gir lazy loading mest effekt?

Lazy loading har størst effekt på sider med mange elementer under første skjermområde. Det kan for eksempel være blogginnlegg med mange illustrasjoner, produktlister med mange miniatyrbilder eller lange landingssider.

Har du en enkel side med få bilder, vil gevinsten være mindre, men det skader sjelden, så lenge du ikke lazy-loader det som er helt kritisk å se med én gang.

HTML-attributtet som gjør jobben: loading=”lazy”

Moderne nettlesere støtter lazy loading direkte i HTML gjennom attributtetloading. For bilder ser det slik ut:

<img src=”bilde.jpg” alt=”Beskrivende tekst” loading=”lazy”>

Legger du tilloading=”lazy”på bilder som ikke er øverst på siden, vil nettleseren automatisk utsette lasting til de nærmer seg visningsområdet.

Hvilke bilder bør ikke lazy-loades?

Det er fristende å sette loading=”lazy” på alle bilder, men det er ikke alltid lurt. Alt som er synlig umiddelbart når siden åpnes, bør vanligvis lastes med én gang.

Typisk bør du unngå lazy loading på:

• Logo og viktige merkevareelementer i topp
• Hovedbilde i hero-seksjonen
• Bilder som inngår i kritisk navigasjon
• Elementer som brukes til CLS-følsomme layouter, for eksempel store bakgrunnsbilder som påvirker førsteinntrykket

Slik prioriterer du: førstesideopplevelse og LCP

Google og andre søkemotorer bryr seg om hvor raskt første hovedinntrykk av siden vises. Et ofte brukt mål er LCP, Largest Contentful Paint, som handler om hvor raskt det største synlige elementet er på plass.

Hvis ditt største element er et bilde, bør dette ikke lazy-loades. La det i stedet lastes normalt, og bruk lazy loading på resten for å redusere total belastning og spare brukeren for unødvendig datanedlasting.

Eksempel: enkel side med og uten lazy loading

Tenk deg en artikkelside med et toppbilde og ti bilder videre nedover. Uten lazy loading lastes alle elleve bildene med én gang, selv om brukeren kanskje bare leser første avsnitt.

Legger du til loading=”lazy” på de ti nederste, lastes kun toppbildet først. Når leseren nærmer seg neste bilde, hentes det inn automatisk. Resultatet er mindre data, raskere første visning og ofte en mer responsiv følelse.

Vanlige fallgruver du bør unngå

Selv om lazy loading er enkelt å ta i bruk, er det noen klassiske feil som dukker opp igjen og igjen, spesielt på sider med bildeintensive design.

Her er typiske problemer du bør passe på:

• Bilder popper inn og flytter tekst: sørg for alltid å sette bredde og høyde eller bruke CSS som reserverer plass.
• Lazy loading på ikoner og smågrafikk: kan gi unødvendig flimmer og merkeres som visuelt “hakkete”.
• JavaScript-avhengig lazy loading uten fallback: hvis skriptet feiler, lastes ikke bildene i det hele tatt.
• Lazy loading i kritiske karuseller: brukeren kan oppleve “tom” slider før bildene kommer inn.

Kombiner lazy loading med gode bildevaner

Lazy loading er ikke en erstatning for optimaliserte bilder. Det er et supplement. Dårlig komprimerte, altfor store filer er fortsatt tunge, selv om de lastes sent.

Kombiner derfor lazy loading med:

• Riktig format(for eksempel WebP der det passer, men kontroller støtte og fallback)
• Fornuftig oppløsningtilpasset layouten, ikke originalkameraets 4000+ piksler i bredden
• Srcset og sizesfor å servere mindre bilder til små skjermer
• Beskrivende alt-teksterfor tilgjengelighet og skjermlesere

Når bør du bruke JavaScript-basert lazy loading?

I mange tilfeller er HTML-attributtet nok. Likevel kan det være behov for JavaScript hvis du har spesielle effekter, tilpasset animasjon ved innlasting eller ønsker full kontroll over når og hvordan elementer lastes.

Da brukes ofte Intersection Observer i JavaScript for å reagere når et element kommer inn i synsfeltet. Det gir mer fleksibilitet, men også mer kode å vedlikeholde, så vurder nøye om gevinstene er verdt kompleksiteten.

Slik introduserer du lazy loading på en trygg måte

Hvis du har en eksisterende nettside, kan du begynne forsiktig: legg loading=”lazy” på bilder langt ned på noen få maler og test i vanlige nettlesere og på mobil.

Kontroller visuelt at ingenting “hopper” for brukeren, at skjermlesere fortsatt får korrekte alt-tekster, og at viktige elementer forblir raske. Bygg så gradvis ut når du ser at alt oppfører seg stabilt.

Oppsummering: raskere side med små grep

Lazy loading er en av de enkleste forbedringene du kan innføre for å redusere lastetid for bilde- og medietunge sider. Med ett HTML-attributt kan du ofte spare både brukeren og serveren for unødvendig arbeid.

Nøkkelen er å bruke det målrettet: ikke utsett det viktigste inntrykket, sørg for stabile layouter og kombiner alltid med gjennomtenkt bildeoptimalisering.