تحميل الصور الكسول في 2026: صفحات أسرع دون الإضرار بـ LCP

آخر تحديث: June 28, 2026

يساعد التحميل الكسول (Lazy loading) في جعل الصفحات الثقيلة بالصور تبدو أسرع، لأن المتصفح يمكنه تخطي طلبات الصور التي تقع تحت طية العرض أثناء التقديم الأولي. ومع الاستخدام غير الدقيق، يمكن أن يؤخر أيضًا الصورة الواحدة التي يحتاجها المستخدم فورًا: صورة البطل (hero)، أو الصورة الرئيسية للمنتج، أو غلاف المقالة الذي يصبح عنصر Largest Contentful Paint.

يوضح هذا الدليل أين يجب استخدام الخاصية الأصلية loading="lazy"، وأين يجب إبقاء الصور جاهزة للتحميل (eager)، وكيف نشر الصور المحملة بالكسل دون كسر Core Web Vitals أو SEO أو تسليم CDN.

الإجابة السريعة: كيف يجب عليك تحميل الصور بالكسل؟

استخدم التحميل الكسول فقط للصور التي تبدأ خارج منطقة العرض الأولى (viewport). أبقِ صورة LCP المحتملة جاهزة للتحميل، واحتفظ بعرض وارتفاع لكل صورة، وقدم ملفات WebP أو AVIF سريعة الاستجابة من عنوان URL لـ CDN قابل للتخزين المؤقت.

بالنسبة لـ HTML العادي، فإن أبسط تطبيق هو loading="lazy" على عناصر <img> الموجودة تحت طية العرض. لا تقم بإضافته إلى صورة البطل، أو الصورة الرئيسية للمنتج، أو أول صورة مقالة مرئية، أو أي صورة يجب أن تظهر قبل تمرير المستخدم (scroll).

عند الشك، اختبر الصفحة في Lighthouse أو Chrome DevTools. إذا تم الإبلاغ عن صورة محملة بالكسل على أنها عنصر LCP، فقم بإزالة التحميل الكسول من تلك الصورة وفكر في استخدام fetchpriority="high".

ما الذي يغيره التحميل الكسول فعليًا؟

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

إنه لا يجعل الصور كبيرة الحجم صغيرة. تظل صورة JPEG بحجم 2400 px مهدرة بعد تحميلها في النهاية. قم بإقران التحميل الكسول بالتغيير في الحجم (resizing)، والضغط، والتنسيق المتجاوب منذ البداية. يغطي Image Compression Deep Dive تقليل البايتات، بينما يغطي Mobile Image Optimization Guide خاصيتي srcset وأحجام العرض على الهاتف المحمول.

الميزة الأصلية للمتصفح موثقة من قبل MDN كخاصية loading على الصور وعناصر iframe في HTMLImageElement.loading. بالنسبة للمواقع الحديثة، يفضل استخدام ميزة المتصفح هذه قبل إضافة مكتبة JavaScript للتحميل الكسول.

ما هي الصور التي لا ينبغي تحميلها بالكسل؟

لا تقم بتحميل الصور بالكسل التي تحدد الانطباع الأول للصفحة. الخطأ الشائع هو تطبيق loading="lazy" على كل صورة في قالب نظام إدارة المحتوى (CMS) لأنه يبدو وكأنه حل عالمي للأداء.

حافظ على هذه الصور جاهزة للتحميل:

1. صورة البطل الرئيسية.
2. صورة المنتج فوق زر الشراء.
3. أول صورة في المقالة عندما تظهر بالقرب من الجزء العلوي على الهاتف المحمول.
4. شعار أو لقطة شاشة واجهة يجب أن تكون مرئية قبل التفاعل.
5. أي صورة يبلغ عنها Chrome على أنها عنصر LCP.

تتعامل إرشادات Google لـ Core Web Vitals مع LCP باعتباره وقت عرض أكبر عنصر محتوى مرئي في منطقة العرض؛ انظر Largest Contentful Paint. عندما يكون هذا العنصر صورة، فإن تأخير طلبه هو أحد أسرع الطرق لتدهور المقياس.

استخدم هذه القاعدة للقوالب: يجب أن تكون خانة الصورة الأولى افتراضياً جاهزة للتحميل (eager)، ويجب أن تكون الكتل المتكررة اللاحقة من الصور افتراضياً محملة بالكسل (lazy). ثم قم بالتجاوز حسب نوع الصفحة عندما تُظهر لقطات الشاشة للهاتف المحمول منطقة عرض أولى مختلفة.

كيف تقوم بتطبيق التحميل الكسول في HTML؟

استخدم العلامات الأصلية أولاً:

<img
  src="/images/gallery-chair.webp"
  alt="كرسي الجوز المصور من الأمام لمعرض المنتجات"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

تعتبر سمتا width و height مهمتين بقدر أهمية loading. فهما يسمحان للمتصفح بتخصيص مساحة التخطيط قبل وصول الملف. بدون مساحة مخصصة، يمكن لصورة متأخرة أن تدفع النص إلى أسفل الصفحة وتخلق Cumulative Layout Shift.

للصور المتجاوبة (responsive images)، احتفظ بالتحميل الكسول على عنصر <img> الاحتياطي:

<picture>
  <source type="image/avif" srcset="/images/gallery-chair-800.avif 800w, /images/gallery-chair-1200.avif 1200w">
  <source type="image/webp" srcset="/images/gallery-chair-800.webp 800w, /images/gallery-chair-1200.webp 1200w">
  <img
    src="/images/gallery-chair-1200.webp"
    alt="كرسي الجوز المصور من الأمام لمعرض المنتجات"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

بالنسبة لصورة LCP المحتملة، استخدم النمط المعاكس:

<img
  src="/images/product-hero.webp"
  alt="كرسي استرخاء من الجوز بوسادة خضراء على خلفية استوديو بيضاء"
  width="1600"
  height="1000"
  fetchpriority="high"
>

توصي مقالة Google حول browser-level image lazy loading بالتحميل الكسول الأصلي وتحذر من أن الصور في منطقة العرض المرئية الأولى يجب أن يتم تحميلها بشكل طبيعي. لا يزال هذا النص هو خط الأساس الأنظف للنشر في عام 2026.

كيف يؤثر التحميل الكسول على SEO؟

يكون التحميل الكسول آمنًا لـ SEO عندما تظل المحتويات المهمة قابلة للاكتشاف في الصفحة المعروضة (rendered page). يمكن لـ Google معالجة JavaScript الحديث، لكن تحسين محركات البحث للصور يضعف عندما يكون عنوان URL النهائي للصورة مخفيًا وراء التفاعل، أو النص البرمجي الذي يعتمد على التمرير فقط، أو ملفات تعريف الارتباط (cookies)، أو عنصر نائب مكسور.

استخدم علامات <img> أو <picture> العادية لصور المحتوى. حافظ على نص alt الوصفي، وعناوين URL الخاصة بـ CDN القابلة الزحف إليها، والنص المحيط الذي يشرح الصورة. يحتوي Image SEO Guide 2026 على سير عمل أوسع للزحف ونص alt.

تفيد إرشادات Google Search Central لـ JavaScript SEO للتحميل الكسول بأن المحتوى يجب أن يتم تحميله عند رؤيته في منطقة العرض وألا يعتمد على إجراءات المستخدم مثل النقر أو الكتابة؛ انظر Fix lazy-loaded content. هذا حاجز مفيد لمعارض الصور، وعلامات التبويب (tabs)، وصفحات التمرير اللانهائي.

ما مقدار الأداء الذي يمكن أن يوفره التحميل الكسول؟

يعتمد التوفير على عدد الصور الموجودة تحت منطقة العرض الأولى وكمية هذه الملفات. في مقالة طويلة، قد يتجنب المتصفح تنزيل معظم صور الجسم أثناء التحميل الأولي. أما في صفحة منتج قصيرة بصورة مرئية واحدة، فقد لا يوفر التحميل الكسول شيئًا تقريبًا.

لقد قمت بترميز الرسوم البيانية الأربعة في هذه المقالة كملفات WebP محلية بحجم النشر. التجهيزات النهائية تتراوح بين 25 KB و 36 KB لكل منها، لذا فإن التحميل الكسول لا يخفي مشكلة بايتات ضخمة هنا. المكتسب الأكبر يأتي من توقيت الطلب: الغلاف متاح على الفور، ويمكن للمخططات اللاحقة الانتظار حتى يقوم القارئ بالتمرير.

استخدم هذا الترتيب قبل لوم التحميل الكسول:

1. تغيير حجم الصورة المصدر إلى أكبر خانة عرض فعلية.
2. تحويل الصور والرسومات المختلطة إلى WebP أو AVIF.
3. إضافة srcset و sizes لتخطيطات الهاتف المحمول.
4. تخصيص أبعاد الصورة أو نسبة العرض إلى الارتفاع.
5. إبقاء صورة LCP جاهزة للتحميل (eager).
6. تحميل الصور تحت طية العرض بالكسل فقط.
7. النشر عبر CDN مع تخزين مؤقت طويل الأجل.
8. اختبار الصفحة على منطقة عرض ضيقة للهاتف المحمول.

إذا كنت بحاجة إلى تسلسل أوسع، فإن Complete Image Optimization Checklist هو مراجعة نهائية جيدة قبل النشر. بالنسبة لقواعد CDN ورؤوس التخزين المؤقت (cache headers)، استخدم Image CDN Guide.

ما الذي يجب عليك اختباره قبل النشر؟

اختبر الصفحة المعروضة، وليس الكود فقط. عتبات المتصفح للتحميل الكسول الأصلي هي تفاصيل تنفيذية، وقد تؤخر صفحة تعمل على سطح المكتب الصورة الخاطئة على منطقة عرض هاتف محمول بحجم 390 px.

قم بتشغيل فحص النشر هذا:

• يتم تحميل صورة الغلاف أو البطل بشكل جاهز للتحميل (eager).
• لا يتم وسم صورة LCP المحتملة بـ loading="lazy".
• تحتوي كل صورة على width و height أو حاوية ذات نسبة عرض إلى ارتفاع مستقرة.
• تستخدم الصور تحت طية العرض loading="lazy".
• تتضمن الصور المتجاوبة قيم sizes واقعية.
• تعيد عناوين URL لصور CDN رمز HTTP 200.
• تصف أسماء الملفات الصورة المرئية.
• نص Alt محدد وليس مملوءًا بالكلمات المفتاحية.
• لا يقوم Lighthouse أو PageSpeed Insights بوضع علامة على الصورة الكسولة كـ LCP.
• تُظهر لقطة شاشة للهاتف المحمول عدم وجود فجوات كبيرة فارغة أو قفزات في التخطيط.

بالنسبة لفرق المطورين، أضف قاعدة قالب: يجب أن تقوم فقط مكونات صور الجسم المتكررة بالتحميل الكسول افتراضيًا. يجب أن تتطلب مكونات البطل (Hero)، والوسائط الرئيسية للمنتج، والصور التحريرية فوق طية العرض قرارًا صريحًا.

قائمة التحقق للتحميل الكسول لعام 2026

يعمل التحميل الكسول بشكل أفضل كجزء صغير من مسار عمل الصور. يجب أن يأتي بعد فحص التنسيق، والأبعاد، والأولوية، وإمكانية الوصول (accessibility)، وCDN.

قبل الإرسال، افحص منطقة العرض الأولى واسأل سؤالاً عمليًا واحدًا: هل لا تزال الصفحة منطقية إذا انتظرت كل صورة تحت طية العرض حتى التمرير؟ إذا كانت الإجابة نعم، فمن المحتمل أن التحميل الكسول يساعد. إذا بدأت الصفحة بخانة بطل فارغة، قم بإصلاح الأولوية قبل لمس أي شيء آخر.