التحميل الكسول للصور: متى ينفع ومتى يضر

ما هو التحميل الكسول؟

هو أن لا يحمّل المتصفح الصورة حتى تقترب من نافذة العرض. وتفعّله بسمة واحدة: <img src="a.webp" loading="lazy" width="800" height="450" alt="...">. يوفّر عرض النطاق ويسرّع ظهور ما يراه الزائر أولًا.

أين تستخدمه وأين لا؟

• استخدمه للصور الواقعة أسفل الشاشة الأولى: معارض الصور والمقالات الطويلة وبطاقات المنتجات.
• لا تستخدمه للصورة الرئيسية الظاهرة فور فتح الصفحة (غالبًا عنصر LCP)، فتأخيرها يبطّئ أهم مقياس. اجعلها عادية وأضف fetchpriority="high" لها.

لا تنسَ الأبعاد

حدّد width وheight لكل صورة حتى يحجز المتصفح المساحة مسبقًا، وإلا تقفز الصفحة عند ظهور الصورة (تحرّك التخطيط CLS). مع تحميل كسول تصبح هذه الأبعاد أهم.

للحصول على الأبعاد الصحيحة راجع حاسبة حجم الصورة ودليل الصور المتجاوبة.

كيف تتحقق؟

افتح الصفحة في أدوات المطوّر، وتبويب الشبكة، وتأكد أن صور أسفل الصفحة لا تُطلب قبل التمرير، وأن الصورة الأولى تُطلب فورًا.

أسئلة شائعة

متى لا أستعمل loading=lazy؟

للصورة الأولى المرئية فور تحميل الصفحة.

هل يؤثر على السيو؟

التحميل الكسول المعتمد على سمة المتصفح تدعمه Google جيدًا، بشرط أن تكون الصورة موجودة في HTML.