L-attribut loading="lazy" jgħid lill-browser biex iwaqqaf it-tagħbija ta' stampa jew iframe sa fejn inqal li jidħol fil-viewport — jiffranka bandwidth u jibbaċċa t-tagħbija inizjali, mingħajr JavaScript.
html
L-attribut loading="lazy" jgħid lill-browser biex iwaqqaf it-tagħbija ta' stampa jew iframe sa fejn inqal li jidħol fil-viewport — jiffranka bandwidth u jibbaċċa t-tagħbija inizjali, mingħajr JavaScript.
lazy — agħleb biss meta l-iskroll iwassalha ħdejn il-viewport.eager (default) — agħleb immedjatament, irrispettivament mil-pożizzjoni.Il-browser juża marġni (itagħbija ftit qabel ma l-element jixxobbor fil-view) allura l-stampa hija ġeneralment lesta meta l-utent jara.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Bilgħajr id-dimensjonijiet (jew aspect-ratio), l-istampa mitagħbija neħa m'għandha l-ebda spazju riservat, għalhekk meta titagħbija l-paġna qabża — iqarrixa Cumulative Layout Shift (CLS). Irserva spazju dejjem.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
It-tagħbija neħa tal-istampa Largest Contentful Paint fil-fatt iqarrixa il-prestazzjoni — tiwettaq il-pixel l-aktar importanti. Agħleb neħa biss il-midja off-screen.
// 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; });
});
It-tagħbija neħa nattiva loading="lazy" neħħet il-ħtieġa ta' dan f'ħafna każi (għalkemm IntersectionObserver għadu utli għal-loġika customizzata).
It-tagħbija neħa nattiva tnaqqas il-bytes inizjali u r-rikilesti għal paġni twal b'ħafna stampi — waħda kbira għall-mobile — ħielsa.
In-nuanzi ta' valur: irserva d-dimensjonijiet biex ipproteġi l-CLS, u żomm il-kontenut fuq il-vouċ/LCP istampi eager (anke fetchpriority="high") hekk l-kontenut importanti għadu itagħbija malajr.