تخبر السمة 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" />
تحميل صورة Largest Contentful Paint بكسل فعلياً يؤذي الأداء — إنه يؤخر أهم بكسل. حمل بكسل فقط وسائط خارج الشاشة.
// 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 حريصة (حتى fetchpriority="high") بحيث يحمل المحتوى المهم بسرعة.