loading="lazy" ატრიბუტი ეუბნება ბრაუზერს, რომ გადავადოს სურათის ან iframe-ის ჩატვირთვა მანამ, სანამ ის ხედვის პროცესში შემოდის — ზოგავს გამტარობას და აჩქარებს საწყის ჩატვირთვას, JavaScript-ის გარეშე.
html
loading="lazy" ატრიბუტი ეუბნება ბრაუზერს, რომ გადავადოს სურათის ან iframe-ის ჩატვირთვა მანამ, სანამ ის ხედვის პროცესში შემოდის — ზოგავს გამტარობას და აჩქარებს საწყის ჩატვირთვას, JavaScript-ის გარეშე.
lazy — ჩატვირთვა მხოლოდ მაშინ, როდესაც გადახვევა მას ხედვის პროცესის ახლოს მოაქვს.eager (ნაგულისხმები) — მყისიერი ჩატვირთვა, პოზიციის მიუხედავად.ბრაუზერი იყენებს ზღვარს (ჩატვირთვა ოდნავ სანამ ელემენტი ხედვაში გადახვევს) ასე რომ სურათი ჩვეულებრივ მზად არის, როდესაც მომხმარებელი ხედავს.
<img src="x.jpg" loading="lazy" width="800" height="600" />
გამოკლებული ზომები (ან aspect-ratio), ზე-დატვირთული სურათი არ აქვს დაკავებული სივრცე, ამიტომ როდესაც ჩატვირთვა მოხდება გვერდი ხტება — ზიანის მიყენება Cumulative Layout Shift-ს (CLS). ყოველთვის დაკავე სივრცე.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
უდიდესი კონტენტული ხატვა სურათის ზე-დატვირთვა სინამდვილეში ზიანს აყენებს კოშშე — გადავადებს ყველაზე მნიშვნელოვან პიქსელს. ზე-დატვირთვა მხოლოდ ეკრანთან გარეთ მედია.
// 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" მოხსნა ამ საჭიროება უმეტეს შემთხვევაში (თუმცა IntersectionObserver ჯერ კიდევ სასარგებლოა მორგებული ლოგიკისთვის).
ნატიური ზე-დატვირთვა აჭერს საწყის ბაიტებს და მოთხოვნებს გრძელი გვერდებისთვის ბევრი სურათით — დიდი მობილური მოგება — უფასოდ.
ნიუანსები მნიშვნელოვანია: დაკავე ზომები CLS-ის დაცვისთვის, და შენარჩუნება ზღვრის ზემოთ/LCP სურათები eager-ები (თუნდაც fetchpriority="high") ასე რომ მნიშვნელოვანი კონტენტი ჯერ კიდევ სწრაფად ჩატვირთება.