Atribut loading="lazy" govori pregledniku da odgodi učitavanje slike ili iframesa dok se ne približi viewport-u — štedi propusnost i ubrzava početno učitavanje, bez JavaScripta.
html
Atribut loading="lazy" govori pregledniku da odgodi učitavanje slike ili iframesa dok se ne približi viewport-u — štedi propusnost i ubrzava početno učitavanje, bez JavaScripta.
lazy — učitaj samo kada skroliranje priblizi element viewport-u.eager (zadana vrijednost) — učitaj odmah, bez obzira na poziciju.Preglednik koristi marginu (učitava malo prije nego što se element pojavi) tako da je slika obično spremna kada je vidi korisnik.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Bez dimenzija (ili aspect-ratio), ljenivo učitana slika nema rezerviranog prostora, pa se stranica preskače kada se učita — oštećujući Cumulative Layout Shift (CLS). Uvijek rezerviraj prostor.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lijenije učitavanje slike Largest Contentful Paint zapravo šteti performansama — odgađa najvažniji piksel. Čini lijenije učitavanje samo za medije van zaslona.
// 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; });
});
Nativno loading="lazy" uklonilo je potrebu za tim u većini slučajeva (iako je IntersectionObserver i dalje koristan za vlastitu logiku).
Nativno lijenije učitavanje smanjuje početne bajtove i zahtjeve za dugim stranicama s puno slika — veliki mobitel pobjedu — besplatno.
Nijansi su važne: rezerviraj dimenzije kako bi zaštitio CLS, i održavaj slike iznad pregiba/LCP eager (čak fetchpriority="high") kako bi važan sadržaj i dalje brzo učitao.