Lazy loading udskyder download af off-screen-ressourcer, indtil brugeren scroller hen imod dem. Den native HTML-tilgang bruger attributten loading="lazy" på <img>- og <iframe>-elementer og understøttes i alle moderne browsere. JavaScript-kode kan lazy-loades med dynamisk import() og route-level code splitting, og observers bygget på IntersectionObserver kan defer næsten enhver anden ressource, siden ikke har brug for ved first paint.
Hvorfor det er vigtigt
Billeder og indlejrede medier er typisk de tungeste assets på en side. At indlæse dem alle på forhånd spilder båndbredde på indhold, brugeren måske aldrig ser, og konkurrerer med de netværksforespørgsler, der faktisk driver LCP. På mobile og langsomme forbindelser oversættes dette direkte til højere bounce rates og dårligere Core Web Vitals-scorer.
Sådan bruger du det
- Tilføj
loading="lazy"til alle billeder og iframes, der ligger under folden. - Lazy-load aldrig hero- eller LCP-billedet — den forsinkelse vises direkte i LCP. Brug
fetchpriority="high"på hero-billedet i stedet. - Sæt eksplicitte
width- ogheight-attributter på alle billeder for at reservere layoutplads og forhindre CLS. - For single-page apps: split route bundles, så ikke-besøgte routes ikke leveres ved first load.
- Verificér ændringen i Lighthouse under "Defer offscreen images"-auditten, og tjek derefter reel bruger-lab data over tid.