Jitata loading="lazy" tana gaya ga browser da ya "jiya jita" hoto ko iframe har sai ya kasance kusa da ya shiga gida — na cid bandwidth da saurin jita na farko, babu JavaScript.
html
Jitata loading="lazy" tana gaya ga browser da ya "jiya jita" hoto ko iframe har sai ya kasance kusa da ya shiga gida — na cid bandwidth da saurin jita na farko, babu JavaScript.
lazy — jita ne kawai lokacin da zaki ja zuwa gida.eager (asali) — jita nan da nan, ba zato waje ba.Browser yana amfani da jiya (jita kadan kafin abin ya shiga gida) don haka hoto kusan jiya lokacin da mai amfani ya ga shi.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Babu girma (ko aspect-ratio), jitawar hoto babu sarari, don haka lokacin da ta jita shafin ya "tsalle" — rashin lafiya ga Cumulative Layout Shift (CLS). Ka ma sarari koyaushe.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Jita Largest Contentful Paint hoto da gaske ana saurin wahallaci — tana jinkiri pixel mafi mahimmanci. Jita ne kawai saruruwan media.
// 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; });
});
Asali loading="lazy" ya cire bukatun wannan a yawancin lokuta (koh da yake IntersectionObserver na da amfani har yanzu don ilimi na jiya).
Asali jita hoto na cire jitatawa da bukatu na farko don shafin da ke da hoto da yawa — babbar nasara na hannu — kyauta.
Danudnudan ya haɗa: ka dauke girma don kariya CLS, da ka dauke abubuwan sama/LCP kyar gaske (har ma fetchpriority="high") don haka mahimmancin abubuwan zai ci gida sauri.