Atributas loading="lazy" nurodo naršyklei atidėti vaizdo arba iframe įkėlimą tol, kol jis beveik įeis į rodinį — taupydamas pralaidumą ir greitindamas pradinę apkrovą be JavaScript.
html
Atributas loading="lazy" nurodo naršyklei atidėti vaizdo arba iframe įkėlimą tol, kol jis beveik įeis į rodinį — taupydamas pralaidumą ir greitindamas pradinę apkrovą be JavaScript.
lazy — įkelti tik slenkant arti rodinio.eager (numatytasis) — įkelti iš karto, nepaisant padėties.Naršyklė naudoja paraštę (įkelia šiek tiek prieš elementui slenkant į rodinį), todėl vaizdas paprastai yra paruoštas, kai jį mato vartotojas.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Be matmenų (arba aspect-ratio), lėtai įkeltas vaizdas neturi rezervuotos vietos, todėl kai jis įkėlus, puslapis šuoliais — kenkia Cumulative Layout Shift (CLS). Visada rezervuokite vietos.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Didžiausio turinio dažo vaizdo lėtas įkėlimas iš tikrųjų kenkia našumui — atideda svarbiausią pikselį. Lėtai įkelkite tik nuo ekrano nutolusius medija.
// 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; });
});
Gimtasis loading="lazy" pašalino šio poreikio daugeliu atvejų (nors IntersectionObserver vis dar naudingas pasirinktinajai logikai).
Gimtasis lėtas įkėlimas sumažina pradines baitus ir prašymus ilgiems puslapiams su daug vaizdų — didelis mobiliojo telefono laimėjimas — nemokamai.
Niuansai yra svarbūs: rezervuokite matmenis, kad apsaugotumėte CLS, ir visada išlaikykite aukštyn nuo sulenkimo/LCP vaizdus noriai (net fetchpriority="high") kad svarbus turinys vis tiek greitai įkėlus.