Lazy-load billeder korrekt uden at skade LCP og brugeroplevelse

Målet

At reducere initial load ved kun at hente det nødvendige tidligt.

Lazy loading er effektivt, men kun hvis det bruges rigtigt. Den klassiske fejl er at lazy-loade alt, inklusive hero-billedet. Resultatet er ofte dårligere LCP, selv om total datamængde falder - fordi browseren udsætter netop den ressource der skal definere “hvornår siden er klar”.

Denne guide forudsætter at du kan ændre templates, CMS-felter eller frontend-kode hvor loading-attributter og billedmarkup sættes. Arbejder du i WordPress, Shopify eller headless setup er principperne de samme; implementeringen varierer.

Før du går i gang

Sørg for at have:

• Én test-URL hvor problemet er tydeligt (typisk en side med stort hero-billede).
• Adgang til PageSpeed Insights eller Lighthouse, så du kan se hvilket element der er LCP.
• En plan for hvordan I genererer srcset/sizes (statisk build, image CDN eller CMS-plugin).

Hvis du ikke ved hvilket billede der er LCP, skal du ikke ændre lazy-loading endnu - så find LCP først.

Første skridt: identificér LCP-billedet

Inden du ændrer markup, skal du vide hvilket billede der faktisk er LCP på mobil.

Brug:

• PageSpeed Insights
• DevTools Performance
• Lighthouse

Hvis LCP-elementet er et billede i toppen, skal det prioriteres og ikke udsættes.

Trin-for-trin

1. Identificér LCP-elementet (PSI/Lighthouse)
2. Sørg for at LCP-billedet ikke lazy-loades
3. Lazy-load billeder under folden
4. Servér responsive størrelser (srcset) og moderne formater (AVIF/WebP)

Trin 1: Beskyt hero/LCP-billedet

For hero-billeder:

• undgå loading="lazy" (i native lazy loading; tilsvarende gælder framework-attributter der udskyder load)
• overvej fetchpriority="high" på LCP-billedet hvis andre ressourcer konkurrerer - men kun når du har målt behov
• overvej preload hvis discovery er problemet (se LCP-guide)
• brug korrekt størrelse tæt på faktisk visning (srcset/sizes)

Undtagelse: Hvis LCP ikke er et billede (fx en stor tekstblok), gælder andre regler - men lazy-load på andre billeder i viewport kan stadig skade oplevelsen hvis de fylder visuelt. Brug LCP-elementet som autoritet.

Trin 2: Lazy-load under folden

Billeder under folden er oplagte kandidater:

• artikelbilleder længere nede
• galleri-elementer
• relaterede kort med thumbnails

Det reducerer initial netværkspres og kan forbedre oplevet hastighed. På lange artikler kan du ofte lazy-loade alle billeder under første skærm uden tab af “første indtryk”, fordi LCP allerede er sat af hero/intro.

Sliders og carousels: første slide er ofte synlig med det samme - den bør ikke have aggressiv lazy-load hvis den kan være LCP. Senere slides kan lazy-loades når de nærmer sig viewport (eller ved swipe), så du ikke betaler for alle slides på første paint.

Trin 3: Brug responsive kilder

Selv med lazy loading kan filer være for store.

Derfor:

• brug srcset/sizes
• servér AVIF/WebP når muligt
• undgå at levere desktop-størrelse til mobil

Trin 4: Undgå layout shift

Hvert billede bør have:

• width og height
• eller tydelig aspect-ratio i CSS

Så ved browseren hvor meget plads der skal reserveres, før billedet er hentet.

Typiske fejl i implementering

• lazy loading på logo og hero
• globale regler i CMS der sætter loading="lazy" på alt - også forsiden
• ingen responsive størrelser
• for hård komprimering der sænker kvalitet markant
• ingen fallback hvor AVIF/WebP ikke er tilgængelig
• CLS fordi billeder under folden ikke har width/height - lazy load hjælper ikke hvis layout hopper når de kommer ind

Sådan kontrollerer du resultatet

1. Kør Lighthouse/PSI før og efter på samme URL og enhed (mobil).
2. Bekræft at LCP-tid ikke er steget; hvis den er, er hero stadig for sent prioriteret.
3. I DevTools → Network: filtrér på Img og verificér at hero starter tidligt i waterfall, mens artikelbilleder starter senere (når du scroller eller tæt på viewport).
4. Tjek CLS i lab og helst et par dages feltdata hvis muligt.

Praktisk checkliste før release

• LCP-billede loader uden lazy
• Under-fold billeder bruger lazy loading
• srcset/sizes er sat på centrale billeder
• Billeder har dimensioner eller aspect-ratio
• LCP og CLS målt før/efter

Relateret

• Guide: Forbedr LCP med billeder
• Ordbog: Lazy loading
• Blog: 5 grunde til at en side er langsom

Relaterede guides

Sådan fejlsøger du LCP fra start til slut

2026-03-27

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

2026-03-23

Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.

Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning

2026-04-02

Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.

Gør hero til LCP: sådan ændrer du struktur, CSS og prioritering

2026-04-01

Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.

Forbedr LCP med billeder: hero, formater, preload og responsive størrelser

2026-03-18

Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.

Fjern render blocking CSS og JavaScript for hurtigere første visning

2025-12-20

Lær hvordan du reducerer render blocking fra CSS og JavaScript, så siden viser indhold hurtigere og giver bedre FCP og LCP.

FAQ

Hvornår skal et billede ikke lazy-loades?

Billeder i første viewport, især hero/LCP-billedet, bør normalt ikke lazy-loades. De skal prioriteres højt, så siden virker hurtig fra start.

Forbedrer lazy loading altid performance?

Nej. Forkert brug kan gøre LCP dårligere. Lazy loading hjælper primært på billeder længere nede på siden.

Hvorfor skal width og height angives?

Faste dimensioner eller aspect-ratio reserverer plads, så layoutet ikke hopper, når billedet loader. Det reducerer CLS.

Næste skridt efter guiden

Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.

Se relaterede emnerLæs forklarende blogindlægTjek begreber i ordbogSe hele ordbogen (A–Å)