في التحميل الكسول (Lazy Loading) لا يُحمَّل أي شيء لا يراه المستخدم حالياً. افترض أن في صفحتك 40 صورة لكن المستخدم يرى في البداية ثلاثاً منها فقط. فلماذا ننزّلها جميعاً في اللحظة نفسها؟ مع التحميل الكسول تُحمَّل بقية الصور حين يمرّر المستخدم إلى الأسفل ويقترب منها.
مثال#
تأمل صفحة قائمة منتجات متجر فيها مئات الصور، أو مقالاً طويلاً بصور كثيرة. بدون التحميل الكسول يجب أن ينزّل هاتف المستخدم حجماً كبيراً وتفتح الصفحة ببطء. ومع التحميل الكسول لا يأتي بسرعة إلا ما في أعلى الصفحة، وتُحمَّل البقية مع التمرير.
كيف يُفعَّل#
في HTML الحديثة يكفي أن تعطي الصورة الخاصية loading="lazy":
<img src="photo.jpg" loading="lazy" alt="وصف الصورة">ويضيف ووردبريس هذه الخاصية افتراضياً لمعظم صور المحتوى. ويمكن لإضافات تحسين السرعة تفعيلها للفيديو وiframe أيضاً.
الفوائد#
- سرعة أكبر للتحميل الأولي
- استهلاك أقل لإنترنت المستخدم، وهذا قيّم لباقات البيانات المحدودة
- تحسين مؤشرات السرعة مثل Core Web Vitals
نقطة مهمة#
لا تطبّق التحميل الكسول على الصورة الرئيسية في أعلى الصفحة (كالبانر أو الصورة البارزة). فهذه الصورة يجب أن تأتي فوراً، وتأخيرها يسيء إلى السرعة المُدرَكة ومؤشرات مثل LCP.
خطأ شائع#
عدم تحديد عرض الصورة وارتفاعها. عندما تتأخر الصورة ولا يُعرف مكانها يقفز المحتوى فجأة وتسوء التجربة. حدّد الأبعاد دائماً.