Attribuutti loading="lazy" käskee selaimen lykätä kuvan tai iframe-elementin lataamisen siihen asti, kunnes se on siirtymässä näkyviin — säästää kaistanleveyttä ja nopeuttaa alkuperäistä lataamista, ilman JavaScriptiä.
html
Attribuutti loading="lazy" käskee selaimen lykätä kuvan tai iframe-elementin lataamisen siihen asti, kunnes se on siirtymässä näkyviin — säästää kaistanleveyttä ja nopeuttaa alkuperäistä lataamista, ilman JavaScriptiä.
lazy — lataa vain, kun vierittäminen tuo sen lähelle näkyvää aluetta.eager (oletus) — lataa välittömästi, riippumatta sijainnista.Selain käyttää marginaalia (lataa hieman ennen kuin elementti vieritetään näkyviin), joten kuva on yleensä valmis silloin kun käyttäjä näkee sen.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Ilman mittoja (tai aspect-ratio-attribuuttia), lazyloadatulla kuvalla ei ole varattu tilaa, joten kun se latautuu sivu hyppää — vahingoittaen Cumulative Layout Shift (CLS) -metriikkaa. Varaa aina tila.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lazyloadaaminen Largest Contentful Paint -kuvasta itse asiassa huonontaa suorituskykyä — se viivästyttää tärkeintä pikseliä. Lazyloadaa vain näkymättömät mediat.
// 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; });
});
Natiivi loading="lazy" poisti tarpeen tälle useimmissa tapauksissa (vaikka IntersectionObserver on edelleen hyödyllinen omalle logiikalle).
Natiivi lazyloadaus vähentää alkuperäisiä tavuja ja pyyntöjä pitkillä sivuilla, joissa on monia kuvia — iso mobiiliyksikkö — ilmaiseksi.
Nuanssit ovat tärkeitä: varaa mitat suojellaksesi CLS:ää, ja pidä näkyvän alueen yläosan/LCP-kuvat eager-tilassa (jopa fetchpriority="high") jotta tärkeä sisältö latautuu silti nopeasti.