فاحص التحميل الكسول
الصورة الصحيحة في اللحظة الصحيحة

للتحميل الكسول وجهان

يطلب التحميل الكسول من المتصفح ألا ينزّل الصورة إلا عندما توشك على الظهور في الشاشة.

عند استخدامه على الصور الموجودة في الأسفل، يوفّر البيانات ويجعل أعلى الصفحة يصل أسرع. لكن عند استخدامه على الصورة الأولى يفعل العكس.

الصورة الكبيرة الأولى هي غالبًا ما تقيسه Core Web Vitals باسم Largest Contentful Paint. فإذا انتظرت التمرير، تُقيَّم الصفحة كلها على أنها بطيئة.

لذلك فالإجابة الصحيحة تعتمد على مكان كل صورة وعلى اللحظة التي تُحتاج فيها. وهذا هو السؤال الذي يطرحه الفاحص على كل واحدة منها.

أي الصور يجب أن تنتظر

كل ما يحتاج الزائر إلى التمرير للوصول إليه. مثل المعارض، والصور في آخر المقال، والشعارات في التذييل، والفيديوهات المضمّنة.

تستحق الإطارات انتباهًا خاصًا. فالفيديو أو الخريطة المضمّنة تجلب صفحة ثانية كاملة، لذلك كثيرًا ما يوفّر loading="lazy" على iframe أكثر مما يوفّره على أي صورة.

أي الصور يجب ألا تنتظر

الصورة الرئيسية، وصورة المنتج في الأعلى، والشعار في الترويسة، كلها يجب أن تُحمَّل فورًا.

بل إن أكبر صورة في الأعلى يمكن أن تذهب أبعد. فـ fetchpriority="high" يطلب من المتصفح تنزيلها قبل الصور الأخرى، وهذا كثيرًا ما يحسّن Largest Contentful Paint بوضوح.

طلب أولوية عالية وتحميل كسول على الصورة نفسها تناقض، لذلك يعلّمه الفاحص.

لماذا يهم width وheight هنا

الصورة بلا width وheight لا مساحة محجوزة لها. وعندما تصل أخيرًا، يقفز كل ما تحتها، وتحتسب Core Web Vitals ذلك إزاحة في التخطيط.

الصور الكسولة تزيد الأمر سوءًا، لأنها تصل بينما القارئ يمرّر بالفعل. لذلك يعدّ الفاحص غياب الأبعاد خطأ في كل صورة.

اضبط السمتين على النسب الحقيقية للصورة. ومع ذلك يستطيع CSS المتجاوب تغيير حجمها، لأن المتصفح يحتاج إلى النسبة فقط.

تحميل كسول أصلي أم بالسكربت

تخفي الإضافات القديمة العنوان الحقيقي في data-src وتبدّله بسكربت. هذا يعمل للزوار، لكن الزواحف ومن لا يملك JavaScript لا يرون إلا عنصرًا نائبًا.

لا تحتاج سمة loading="lazy" إلى أي سكربت، وتدعمها كل المتصفحات الحالية. لذلك يوصي بها الفاحص أينما وجد النمط القديم.

كيف يُحكم على الموضع

الصفحة المقروءة على الخادم لا تُرسم أبدًا، لذلك يستخدم الفاحص ترتيب الشيفرة. تُعامَل الصور الثلاث الأولى كأنها الشاشة الأولى، وهذا صحيح في معظم التصاميم، لكن نظرة على تصميمك تستحق العناء.