Kort fortalt: Lazy loading betyder at ressourcer (typisk billeder og iframes) først bliver hentet, når de er ved at komme ind i viewporten. Det reducerer mængden af arbejde ved første load.
Hvorfor bruges det?
- Mindre data og færre requests ved første load
- Hurtigere rendering af det vigtigste
Typiske faldgruber
- Hvis hero/LCP-billede lazy-loades, kan LCP blive dårligere
Praktiske tips
- Lazy-load kun indhold under folden
- Prioritér hero-billeder og kritiske assets
Hvilken indflydelse har lazy loading?
Rigtigt brugt kan lazy loading:
- reducere antal requests ved første load
- reducere dataforbrug på mobil
- forbedre oplevet hastighed på lange sider (blog/guides)
Forkert brugt kan lazy loading:
- gøre LCP dårligere (hvis LCP-elementet bliver lazy-loadet)
- skabe “pop-in” (indhold dukker sent op)
- øge CLS (hvis der ikke er reserveret plads til media)
Hvornår blev lazy loading udbredt?
Lazy loading har eksisteret som teknik længe (via JavaScript), men blev markant mere udbredt da browsere begyndte at understøtte native lazy loading for billeder og iframes. Det gjorde det nemmere at bruge korrekt – men det gør det stadig vigtigt at prioritere det rigtige indhold.
Lazy loading: hvad bør være lazy – og hvad bør ikke?
En simpel regel der ofte virker:
Lazy-load (typisk)
- billeder under folden
- embeds/iframes under folden (video, maps)
- billeder langt nede i artikler
Ikke lazy-load (typisk)
- hero-billede (ofte LCP)
- logo eller kritiske UI-billeder hvis de er synlige ved første paint
- billeder der bruges til layout-stabilitet i første viewport
Sådan tester du om lazy loading hjælper eller skader
Praktisk metode:
- Find LCP-elementet i Lighthouse/PSI
- Bekræft at LCP-ressourcen starter tidligt i Network (ikke “sent”)
- Kig efter CLS: har du reserveret plads til billeder/iframes?
- Test på mobilnetværk (effekter er tydeligere)
Konkrete optimeringer
1) Reserver plads (undgå CLS)
For billeder/iframes:
- angiv dimensioner eller aspect-ratio
- brug placeholders/skeletons med samme størrelse som slutindhold
2) Prioritér LCP korrekt
Hvis hero-billedet er LCP:
- undgå lazy loading
- overvej preload (målrettet)
- brug moderne format + responsive størrelser
3) Hold det simpelt
For aggressive setup kan give flere edge-cases. Start med “under folden” og udvid derfra.
Lazy loading i forhold til AI-resultater og brugeroplevelse
Når sider skal performe godt i både søgning og AI-sammenhænge, er stabil og hurtig gengivelse vigtig. Hvis billeder under folden lazy-loades korrekt, får du:
- hurtigere første indtryk for brugeren
- lavere risiko for at centrale elementer konkurrerer om båndbredde
- mere forudsigelig rendering på mobil
Hvis du derimod lazy-loader kritiske elementer, kan det skabe et langsomt første indtryk, som påvirker både brugeradfærd og kvalitetsopfattelse negativt.
Samspil med andre teknikker
Lazy loading fungerer bedst sammen med:
- responsive billeder (
srcset/sizes) - moderne formater (AVIF/WebP)
- cache headers
- korrekt prioritering af hero-indhold
Det er altså ikke en “enkeltstående løsning”, men en del af en større performance-strategi.
Praktiske scenarier
Scenarie 1: Lang guide med mange screenshots
Her giver lazy loading næsten altid mening under folden. Brugeren skal hurtigt se intro og de første afsnit. Billeder længere nede kan hentes senere.
Scenarie 2: Forside med stort hero-billede
Hero-billedet bør normalt ikke lazy-loades, især hvis det er LCP. Ellers risikerer du at skyde LCP markant i vejret.
Scenarie 3: Produktside med galleri
Første produktbillede kan være prioriteret, mens sekundære billeder i galleriet lazy-loades. På den måde balanceres kvalitet og hastighed.
Hvad du bør gøre før du udruller bredt
- Definér en simpel regel for hele sitet:
- ikke lazy på første viewport
- lazy på under-fold media
- Test på mobil og langsomt netværk.
- Verificér at LCP-elementet starter tidligt i waterfall.
- Kontroller CLS efter ændringer.
Almindelige fejl i teams
- alle billeder får
loading="lazy"via global komponent - man glemmer at måle før/efter
- man fokuserer kun på datamængde og glemmer prioritering
- man reserverer ikke plads til billeder
Udvidet tjekliste
- LCP-billede er identificeret og prioriteret
- Under-fold billeder lazy-loades
- Alle billeder har dimensioner/aspect-ratio
- Responsive størrelser er sat korrekt
- Mobilmåling viser ingen forværring af LCP/CLS
- Waterfall viser færre tidlige ikke-kritiske billedrequests
FAQ
Er lazy loading altid en god idé?
Nej. På korte sider med få billeder kan gevinsten være minimal, og risikoen for at skade LCP/CLS kan være større end fordelen.
Den mest robuste regel er: aldrig lazy-loade første viewport (typisk hero/LCP), og lazy-loade under folden.
Kan lazy loading påvirke SEO?
Det kan det, hvis indhold først loader efter interaktion og ikke kan crawles/renderes korrekt.
For almindelige billeder i artikler er det normalt uproblematisk – især hvis HTML stadig indeholder indholdet, og du kun lazy-loader billeder/iframes.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Forbedr LCP med billeder: hero, formater, preload og responsive størrelser
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
