Attributet loading="lazy" berättar för webbläsaren att fördröja inladdning av en bild eller iframe tills den är på väg att komma in i vyn — sparar bandbredd och påskyndar initial inladdning, utan JavaScript.
html
Attributet loading="lazy" berättar för webbläsaren att fördröja inladdning av en bild eller iframe tills den är på väg att komma in i vyn — sparar bandbredd och påskyndar initial inladdning, utan JavaScript.
lazy — ladda endast när scrollning tar det nära vyn.eager (standard) — ladda omedelbar, oavsett position.Webbläsaren använder en marginal (laddar lite innan elementet rullas in i vyn) så bilden är vanligtvis redo när användaren ser den.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Utan dimensioner (eller aspect-ratio), har den lat-laddat bilden ingen reserverad plats, så när den laddar hoppar sidan — vilket skadar Cumulative Layout Shift (CLS). Reservera alltid plats.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lat inladdning av Largest Contentful Paint bilden försämrar faktiskt prestandan — det fördröjer den viktigaste pixeln. Ladda lat endast media utanför skärmen.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Inbyggd loading="lazy" tog bort behovet av detta i de flesta fall (även om IntersectionObserver fortfarande är användbar för anpassad logik).
Inbyggd lazy loading minskar initiala byte och förfrågningar för långa sidor med många bilder — en stor vinst för mobil — gratis.
Nuanserna är viktiga: reservera dimensioner för att skydda CLS, och håll innehållet över vikningen/LCP eager (även fetchpriority="high") så det viktiga innehållet fortfarande laddar snabbt.