Lazy loading — Udskyd indlæsning af billeder og ressourcer

Lazy loading er en performance-teknik der udskyder indlæsning af billeder og ressourcer til de er ved at blive synlige i brugerens viewport. For SEO er lazy loading relevant fordi det reducerer den initiale sideindlæsningstid og forbedrer LCP — men fejlagtig lazy loading af LCP-billedet er en hyppig årsag til dårlige Core Web Vitals. HTML5’s native loading=lazy-attribut er den anbefalede implementering og understøttes af alle moderne browsere.

Hvad er lazy loading?

Lazy loading er en performance-teknik der udskyder indlæsning af ressourcer — typisk billeder og iframes — til de faktisk er nødvendige. I stedet for at downloade alle billeder på en side ved indlæsning, ventes der til brugeren scroller tæt på dem.

Resultatet: færre bytes downloadet ved sideindlæsning, hurtigere Time to First Byte, bedre Largest Contentful Paint og lavere dataforbrug for brugeren.

Native lazy loading — loading=“lazy”

Browser-native lazy loading er den enkleste implementering og kræver blot en HTML-attribut:

<img src="billede.jpg" alt="Beskrivelse" loading="lazy">

Browseren beslutter selv hvornår billedet skal hentes baseret på viewport-afstand. Understøttet i alle moderne browsere siden 2019-2020.

Det samme gælder iframes:

<iframe src="https://maps.google.com/..." loading="lazy"></iframe>

Lazy loading og LCP — den kritiske undtagelse

Her er den vigtigste regel for lazy loading og SEO:

Above-the-fold billeder og LCP-billedet bør ALDRIG have loading=“lazy”.

LCP (Largest Contentful Paint) måler hvornår det største synlige element er loadet. Hvis det primære hero-billede lazy loades, forsinkes LCP direkte — fordi browseren ikke starter download af billedet før det er “tæt nok” på viewport, og dermed er siden synlig men billedet mangler.

Korrekt strategi:

• Above-the-fold billeder: loading="eager" (eller slet ingen loading-attribut, da eager er standard)
• Below-the-fold billeder: loading="lazy"

<!-- Forsidebillede — IKKE lazy -->
<img src="hero.jpg" alt="..." loading="eager" fetchpriority="high">

<!-- Produktbilleder nederst på siden -->
<img src="produkt-5.jpg" alt="..." loading="lazy">

JavaScript-baseret lazy loading — Intersection Observer

Inden browser-native lazy loading eksisterede, brugte udviklere JavaScript og Intersection Observer API:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

HTML med data-src:

<img data-src="billede.jpg" alt="...">

JavaScript-lazy loading er stadig relevant for mere komplekse scenarier og legacy-support, men native loading="lazy" er den foretrukne løsning.

Lazy loading af scripts og iframes

Scripts kan lazy loades ved at bruge defer og async attributter, eller ved dynamisk at tilføje script-tags til DOM’en:

// Indlæs chat-widget kun når brugeren ruller til bunden
window.addEventListener('scroll', () => {
  if (scrollNearBottom()) {
    const script = document.createElement('script');
    script.src = '/chat-widget.js';
    document.body.appendChild(script);
  }
}, { once: true });

Tunge iframes (YouTube-videoer, Google Maps) er fremragende kandidater til lazy loading — en enkelt YouTube-iframe kan tilføje hundredvis af KB til sideindlæsningen.

Googlebot og lazy loading

Googlebot understøtter loading="lazy" og indlæser lazy-loadede ressourcer under rendering. Men der er en vigtig detalje:

Googlebot scroller ikke sider ved rendering. Det simulerer viewport-indlæsning men scroller ikke manuelt ned. Googles rendering er dog forbedret, og Googlebot indlæser nu typisk lazy-loadede ressourcer.

For at være sikker på at indhold i billeder (alt-tekst, filnavne) og tekst nær lazy-loadede billeder indexeres korrekt, bør HTML-strukturen ikke afhænge af at JavaScript-lazy loading er kørt.

Lazy loading og CLS

Lazy-loadede billeder uden angivne dimensions (width og height) kan forårsage Cumulative Layout Shift — sideindholdet hopper når billedet loades og fylder pladsen. Angiv altid dimensions:

<img src="billede.jpg" alt="..." loading="lazy" width="800" height="600">

Browseren reserverer plads til billedet og undgår layout shift.

---

Ofte stillede spørgsmål

Skal alle billeder have loading=“lazy”?

Nej. Above-the-fold billeder og LCP-billedet bør ikke lazy loades. Brug lazy loading på billeder der er under folden — typisk alt andet end hero- og topbilleder.

Kan lazy loading skade SEO?

Forkert implementeret lazy loading kan skade LCP (hvis det bruges på above-the-fold billeder) eller føre til at Googlebot ikke ser billeder. Korrekt implementering forbedrer performance og skader ikke SEO.

Er loading=“lazy” understøttet i alle browsere?

Alle moderne browsere understøtter loading="lazy". IE understøtter det ikke, men IE har ingen signifikant markedsandel i 2026.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.