Atributi loading="lazy" i thotë shfletuesit të vonojë ngarkimin e një imazhi ose kornize derisa ajo të jetë gati të hyjë në viewport — duke kursyer brezhmbajtëje dhe përshpejtuar ngarkimin fillestar, pa JavaScript.
html
Atributi loading="lazy" i thotë shfletuesit të vonojë ngarkimin e një imazhi ose kornize derisa ajo të jetë gati të hyjë në viewport — duke kursyer brezhmbajtëje dhe përshpejtuar ngarkimin fillestar, pa JavaScript.
lazy — ngarko vetëm kur rrëshqitja e afron në viewport.eager (parazgjedhje) — ngarko menjëherë, pavarësisht nga pozicioni.Shfletuesi përdor një buzë (ngarko pak para se elementi të rrëshqisë në pamje) në mënyrë që imazhi zakonisht të jetë gati në kohën kur përdoruesi e sheh.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Pa dimensione (ose aspect-ratio), imazhi i ngarkuar pirtë nuk ka hapësirë të rezervuar, kështu që kur ngarkohet faqja kërcen — duke dëmtuar Cumulative Layout Shift (CLS). Gjithmonë rezervoni hapësirën.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Ngarkimi pirtë i imazhit Largest Contentful Paint në të vërtetë keqëson performancën — vonon pikselën më të rëndësishme. Ngarko pirtë vetëm mediat jashtë ekranit.
// 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; });
});
Ngarkimi naiv loading="lazy" hoqi nevojën për këtë në shumicën e rasteve (megjithëse IntersectionObserver është ende i dobishëm për logjikën e personalizuar).
Ngarkimi naiv i lenë kursezon bajtet fillestarë dhe kërkuesit për faqet e gjata me shumë imazhe — një fitore e madhe në celular — falas.
Niuancat kanë rëndësi: rezervoni dimensionet për të mbrojtur CLS, dhe mbani imazhet mbi palosje/LCP gjendje eager (madje edhe fetchpriority="high") në mënyrë që përmbajtja e rëndësishme të ngarkohet ende shpejt.