التحميل الكسول (Lazy Loading)

التحميل الكسول (Lazy Loading) تقنية تؤجّل تحميل الموارد (الصور والإطارات والفيديو) حتى تقترب من منطقة العرض، بدل تحميل كل شيء دفعةً واحدة عند فتح الصفحة — فتظهر الصفحة أسرع ويقلّ استهلاك النطاق.

نقاط أساسية

• في HTML الحديث: السمة loading="lazy" على img وiframe تفعّله بلا جافاسكربت.
• لا تُكسِل العناصر الظاهرة أوّل الشاشة (خاصّةً عنصر LCP) — كسلها يبطئ الإحساس بالسرعة.
• يقلّل الطلبات الأوّلية ووزن الصفحة الابتدائي، فيتحسّن LCP والأداء المُدرَك.
• أغلب قوالب وإضافات ووردبريس تدعمه افتراضيًا.

كيف يعمل في المتصفّح

عند إضافة السمة loading="lazy" إلى عنصر img أو iframe، يؤجّل المتصفّح جلب الملفّ حتى يقترب العنصر من منطقة العرض المرئية بينما يمرّر الزائر الصفحة لأسفل. تحت الغطاء يعتمد المتصفّح على آلية مراقبة التقاطع (IntersectionObserver) التي تتابع موقع كل عنصر مؤجَّل بالنسبة إلى الشاشة، فما إن يدنو من حافة العرض حتى يطلق طلب التحميل في الوقت المناسب. هذا السلوك مدمج في المتصفّحات الحديثة ولا يحتاج أيّ مكتبة جافاسكربت خارجية، وهو أخفّ وأكثر دقّةً من الحلول القديمة التي كانت تستمع لحدث التمرير وتحسب المواقع يدويًّا. النتيجة أن الموارد البعيدة عن نظر الزائر لا تُطلب إطلاقًا ما لم يصل إليها فعلًا، وكثير من الزوّار يغادرون قبل بلوغ أسفل الصفحة فيُوفَّر كامل تلك البيانات.

أثره على الأداء وعنصر LCP

أكبر فائدة للتحميل الكسول أنه يقلّص عدد الطلبات التي يُطلقها المتصفّح في اللحظات الأولى ويخفّض وزن الصفحة الابتدائي، فتتفرّغ الشبكة والمعالج للموارد الحرجة التي يراها الزائر فورًا. هذا يسرّع ظهور الصفحة ويحسّن مؤشّر LCP والأداء المُدرَك. لكن هنا تكمن أهمّ قاعدة: لا تُكسِل العناصر الظاهرة أوّل الشاشة، وعلى رأسها صورة الهيرو التي تكون غالبًا عنصر LCP نفسه. تكسيل صورة LCP يؤخّر طلبها لأنها تقع داخل العرض من البداية، فيتأخّر رسمها ويسوء التقييم بدل أن يتحسّن. الصواب أن تترك هذه الصورة تُحمَّل بأولوية عالية، بل تمنحها السمة fetchpriority="high" لتحثّ المتصفّح على جلبها قبل غيرها، وتقصر التكسيل على الصور والإطارات الواقعة أسفل الطيّة.

تجنّب القفز البصري وأخطاء شائعة

من الضروري تحديد العرض والارتفاع لكل صورة مؤجَّلة، إمّا بسمتي width وheight أو عبر CSS، حتى يحجز المتصفّح المساحة الصحيحة قبل وصول الصورة. إن أهملت ذلك، فستظهر الصورة فجأةً وتدفع المحتوى المحيط، فيرتفع مؤشّر إزاحة التخطيط (CLS) ويسوء انطباع الاستقرار البصري. أمّا في ووردبريس فالأمر أسهل، إذ تضيف النواة السمة loading="lazy" تلقائيًّا إلى الصور داخل المحتوى منذ سنوات، وتتولّى أغلب القوالب والإضافات بقيّة التفاصيل افتراضيًّا. ومع ذلك تبقى المزالق قائمة: تكسيل كل شيء بلا تمييز يضرّ بصورة الهيرو، والمبالغة في إضافة مكتبات تكسيل خارجية فوق السلوك المدمج تتعارض معه وقد تعطّله. الأسلم أن تعتمد السلوك الأصلي للمتصفّح، وتستثني بوضوح أوّل صورة مرئية، وتضبط الأبعاد دائمًا.