صورة توضيحية أصلية من إعداد حاسوبي.
أجّل الصور البعيدة أسفل الصفحة، لكن لا تؤجل الصورة الأساسية التي يراها الزائر فور الدخول. تطبيق التحميل الكسول على كل الصور قد يؤخر ظهور أهم جزء من الصفحة بدل تسريع التجربة.
ما وظيفة loading="lazy"؟
تسمح الخاصية للمتصفح بتأجيل جلب الصورة حتى تقترب من منطقة العرض. هي مفيدة مثلًا لصورة الخطوة السابعة في شرح طويل. لكنها لا تصغّر ملف الصورة، ولا تصلح دقة زائدة أو ملفًا ضخمًا بمفردها. تشرح Google هذه الحدود في دليل تحميل الصور المؤجل.
مثال لصورتين بوظيفتين مختلفتين
صورة أساسية ظاهرة في أعلى المقال، إذا كانت هي المرشح المهم لـLCP:
<img src="cover.webp" width="1200" height="675"
alt="واجهة إعدادات الشبكة"
fetchpriority="high">صورة توضيحية أبعد في جسم المقال:
<img src="step-7.webp" width="900" height="600"
alt="اختيار الشبكة في الخطوة السابعة"
loading="lazy" decoding="async">أسماء الملفات والأبعاد أمثلة؛ استبدلها ببيانات صورك الحقيقية. خاصية fetchpriority="high" تلميح أولوية، وليست أمرًا بتسريع جميع الصور. لا تضعها على كل صورة. يوصي دليل تحسين LCP بتجنب التحميل الكسول للصورة التي تمثل هذا العنصر.
كيف تتأكد أن التعديل نافع؟
- اختبر رابط المقال عبر PageSpeed Insights، وسجّل عنصر LCP الذي يظهر في التقرير.
- عدّل صورة واحدة بعد حفظ نسخة من القالب، ثم افحص الصفحة على الهاتف.
- تأكد من ظهور الغلاف فورًا ومن تحميل الصور التالية عند التمرير.
- كرر القياس في ظروف متقاربة؛ نتيجة واحدة قد تتغير بسبب الشبكة والخادم والإعلانات.
في Blogger وWordPress، قد يضيف القالب أو ملحق تحسين الصور هذه الخصائص تلقائيًا. افحص النتيجة النهائية قبل إضافة معالجة ثانية؛ لا يكفي أن الكود الذي كتبته صحيح إذا كان القالب يستبدله. تحسين هذا الإعداد وحده لا يضمن ترتيبًا أعلى في البحث.