Sifa loading="lazy" inasema kwa kivinjari kuwa na mzigo uliochezewa wa picha au fremu hadi itakapokuja kuingiza kwenye onyesho — kuokoa bandwidth na kuongeza kasi ya upakaji wa mwanzo, bila JavaScript.
html
Sifa loading="lazy" inasema kwa kivinjari kuwa na mzigo uliochezewa wa picha au fremu hadi itakapokuja kuingiza kwenye onyesho — kuokoa bandwidth na kuongeza kasi ya upakaji wa mwanzo, bila JavaScript.
lazy — pakia tu wakati ukuruta unakuleta karibu na onyesho.eager (chaguo-msingi) — pakia mara moja, bila kujali nafasi.Kivinjari kinatumia kingo (kupakia kidogo kabla kipengele kiingie kwenye onyesho) ili picha kawaida iwe tayari saa ambayo mtumiaji anaiiona.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Bila vipimo (au aspect-ratio), picha iliyopakiwa kwa kupumzika haina nafasi iliyohifadhiwa, kwa hivyo wakati inapakia ukurasa unakwama — kujeruhi Cumulative Layout Shift (CLS). Daima hifadhi nafasi.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Mzigo wa kupumzika wa picha Largest Contentful Paint kwa hakika huaibuka utendakazi — inakamatia pikeli muhimu zaidi. Pakia kwa kupumzika tu media nje ya skrini.
// 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; });
});
loading="lazy" asili ilijaua haja ya hili katika hali nyingi (ingawa IntersectionObserver bado ni muhimu kwa mantiki maalum).
Mzigo wa kupumzika wa asili hupunguza baiti ya mwanzo na maombi ya ukurasa mrefu wenye picha nyingi — jukumu kubwa kwa simu — bure.
Nyancizo ni muhimu: hifadhi vipimo kukamatia CLS, na kumiliki maudhui juu ya kufa/LCP kupaka (hata fetchpriority="high") ili maudhui muhimu bado yapaki kwa kasi.