طريقة \"التحميل الكسول\" للصور على مستوى المتصفّح على الويب

Addy Osmani
Houssein Djirdeh
Mathias Bynens
Barry Pollard

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 15.4.

يمكنك استخدام السمة loading لتحميل الصور بشكل كسول بدون الحاجة إلى كتابة رمز تحميل كسول مخصّص أو استخدام مكتبة JavaScript منفصلة. إليك فيديو توضيحي عن هذه الميزة: هنا عرض توضيحي للميزة:

يتم تحميل الصور المحمّلة بشكل كسول عندما ينتقل المستخدم خلال الصفحة.

توضّح هذه الصفحة تفاصيل تنفيذ التحميل الكسول في المتصفّح.

ما هي مزايا التحميل الكسول على مستوى المتصفّح؟

وفقًا لـ HTTP Archive، تُعدّ الصور نوع مواد العرض الأكثر طلبًا لمعظم المواقع الإلكترونية، وعادةً ما تستهلك نطاقًا تردديًا أكبر من أيّ مورد آخر. في النسبة المئوية التسعين، ترسل المواقع الإلكترونية أكثر من 5 ميغابايت من الصور على أجهزة الكمبيوتر والأجهزة الجوّالة.

في السابق، كان هناك طريقتان لتأجيل تحميل الصور خارج الشاشة:

  • استخدام Intersection Observer API
  • استخدام معالِجات الأحداث scroll أو resize أو orientationchange

يمكن أن يتيح أيّ من الخيارَين للمطوّرين تضمين سلوك التحميل الكسول، وقد أنشأ العديد من المطوّرين مكتبات خارجية لتوفير عمليات تجريد أسهل في الاستخدام.

ومع ذلك، بما أنّ التحميل الكسول متاح مباشرةً في المتصفّح، ما مِن حاجة إلى مكتبة خارجية. يضمن التحميل الكسول على مستوى المتصفّح أيضًا استمرار تحميل الصور حتى إذا أوقف العميل JavaScript. يُرجى العِلم أنّ التحميل لا يتم تأجيله إلا عندما تكون JavaScript مفعّلة.

السمة loading

يحمِّل Chrome الصور بأولويات مختلفة استنادًا إلى موضعها بالنسبة إلى إطار عرض الجهاز. يتم تحميل الصور أسفل إطار العرض بأولوية أقل، ولكن يتم جلبها مع ذلك أثناء تحميل الصفحة.

يمكنك استخدام السمة loading لتأجيل تحميل الصور خارج الشاشة بالكامل:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

في ما يلي القيم المتوافقة للسمة loading:

  • lazy: يؤجِّل تحميل المورد إلى أن يصل إلى مسافة محسوبة من إطار العرض.
  • eager: هو سلوك التحميل التلقائي للمتصفّح، وهو نفسه عدم تضمين السمة، ويعني تحميل الصورة بغض النظر عن موضعها على الصفحة. هذه هي القيمة التلقائية، ولكن قد يكون من المفيد ضبطها بشكلٍ صريح إذا كانت أدواتك تضيف تلقائيًا loading="lazy" عندما لا تكون هناك قيمة صريحة، أو إذا كان برنامج التدقيق اللغوي يعرض تحذيرًا إذا لم يتم ضبطها بشكلٍ صريح.

العلاقة بين السمة loading وأولوية الجلب

القيمة eager هي تعليمات لتحميل الصورة كالمعتاد، بدون تأخير التحميل أكثر إذا كانت الصورة خارج الشاشة. لا يتم تحميل الصورة بشكلٍ أسرع من صورة أخرى ليس لها سمة loading.

إذا أردت زيادة أولوية جلب صورة مهمة (مثل، صورة LCP)، استخدِم أولوية الجلب مع fetchpriority="high".

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

الحدود القصوى للمسافة من إطار العرض

يتم تحميل جميع الصور التي يمكن عرضها على الفور بدون الحاجة إلى التمرير بشكلٍ طبيعي. لا يتم جلب الصور البعيدة جدًا أسفل إطار عرض الجهاز إلا عندما ينتقل المستخدم بالقرب منها.

تحاول عملية تنفيذ التحميل الكسول في Chromium ضمان تحميل الصور خارج الشاشة في وقت مبكر بما يكفي لإنهاء تحميلها بحلول الوقت الذي ينتقل فيه المستخدم إليها، وذلك من خلال جلبها قبل أن تصبح مرئية في إطار العرض.

يختلف الحدّ الأقصى للمسافة استنادًا إلى العوامل التالية:

  • نوع مورد الصورة الذي يتم جلبه
  • نوع الاتصال الفعلي

يمكنك العثور على القيم التلقائية لأنواع الاتصال الفعلي المختلفة في مصدر Chromium. يمكنك تجربة هذه الحدود القصوى المختلفة من خلال تقليل سرعة الشبكة في "أدوات مطوّري البرامج".

تحسينات على توفير البيانات والحدود القصوى للمسافة من إطار العرض

في يوليو 2020، أدخل Chrome تحسينات كبيرة لمواءمة الحدود القصوى للمسافة من إطار العرض لتحميل الصور بشكل كسول، وذلك لتلبية توقّعات المطوّرين بشكلٍ أفضل.

على الاتصالات السريعة (شبكة الجيل الرابع)، قلّلنا الحدود القصوى للمسافة من إطار العرض في Chrome من 3000px إلى 1250px، وعلى الاتصالات الأبطأ (شبكة الجيل الثالث أو أقل)، غيّرنا الحدّ الأقصى من 4000px إلى 2500px. يحقّق هذا التغيير هدفَين:

  • <img loading=lazy> يكون سلوك أقرب إلى التجربة التي توفّرها مكتبات التحميل الكسول في JavaScript.
  • لا تزال الحدود القصوى الجديدة للمسافة من إطار العرض تعني أنّه من المحتمل أن يتم تحميل الصور بحلول الوقت الذي ينتقل فيه المستخدم إليها.

يمكنك الاطّلاع أدناه على مقارنة بين الحدود القصوى القديمة والجديدة للمسافة من إطار العرض لأحد العروض التوضيحية على اتصال سريع (شبكة الجيل الرابع):

تم تحسين الحدود الدنيا لتحميل الصور الكسول، ما أدّى إلى تقليل الحدود الدنيا للمسافة من إطار العرض للاتصالات السريعة من 3000 بكسل إلى 1250 بكسل.
مقارنة بين الحدود القصوى القديمة والجديدة المستخدَمة للتحميل الكسول على مستوى المتصفّح

والحدود القصوى الجديدة مقابل LazySizes (مكتبة JavaScript شائعة للتحميل الكسول):

عتبات المسافة الجديدة من إطار العرض في Chrome التي يتم فيها تحميل صور بحجم 90 كيلوبايت مقارنةً بتحميل LazySizes صورًا بحجم 70 كيلوبايت في ظل ظروف الشبكة نفسها
مقارنة بين الحدود القصوى المستخدَمة للتحميل الكسول في Chrome وLazySizes.

إضافة سمات الأبعاد إلى الصور

أثناء تحميل المتصفّح لصورة، لا يعرف أبعادها على الفور، ما لم يتم تحديدها بشكلٍ صريح. للسماح للمتصفّح بحجز مساحة كافية على الصفحة للصور وتجنُّب تغييرات التنسيق المزعجة layout shifts، ننصحك بإضافة width و height إلى جميع <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

بدلاً من ذلك، يمكنك تحديد قيمهما مباشرةً في نمط مضمّن:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

تنطبق أفضل ممارسات ضبط الأبعاد على علامات <img> بغض النظر عمّا إذا كنت تحمِّلها بشكل كسول، ولكن يمكن أن يجعل التحميل الكسول هذه الممارسة أكثر أهمية.

يتم تنفيذ التحميل الكسول في Chromium بطريقة تجعل من المرجّح تحميل الصور فور ظهورها، ولكن لا يزال هناك احتمال ألا يتم تحميلها في الوقت المناسب. إذا حدث ذلك، يؤدي عدم تحديد width وheight في صورك إلى زيادة تأثيرها في المقياس "تغييرات التنسيق التراكمية". إذا لم تتمكّن من تحديد أبعاد صورك، يمكن أن يؤدي تحميلها بشكل كسول إلى توفير موارد الشبكة مع خطر حدوث تغييرات أكبر في التنسيق.

في معظم السيناريوهات، يستمر تحميل الصور بشكل كسول إذا لم تحدّد الأبعاد، ولكن هناك بعض الحالات القصوى التي يجب أن تكون على عِلم بها. بدون تحديد width وheight، تكون أبعاد الصورة تلقائيًا 0×0 بكسل. إذا كان لديك معرض صور، قد يقرّر المتصفّح أنّ جميع الصور تتناسب مع إطار العرض في البداية، لأنّ كل صورة لا تشغل أي مساحة ولا يتم إزاحة أي صورة خارج الشاشة. في هذه الحالة، يقرّر المتصفّح تحميل كل شيء، ما يؤدي إلى تحميل الصفحة بشكلٍ أبطأ.

للاطّلاع على مثال عن كيفية عمل loading مع أعداد كبيرة من الصور، يُرجى الرجوع إلى هذا العرض التوضيحي.

يمكنك أيضًا تحميل الصور بشكل كسول التي حدّدتها باستخدام العنصر <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

على الرغم من أنّ المتصفّح يقرّر الصورة التي سيتم تحميلها من أيّ من عناصر <source> ، ما عليك سوى إضافة loading إلى عنصر <img> الاحتياطي.

تحميل الصور المرئية في إطار العرض الأول بشكلٍ سريع دائمًا

بالنسبة إلى الصور المرئية عندما يحمِّل المستخدم الصفحة لأول مرة، وخاصةً صور LCP، استخدِم سلوك التحميل السريع التلقائي للمتصفّح حتى تكون متاحة على الفور. لمزيد من المعلومات، يُرجى الاطّلاع على تأثيرات الأداء الناتجة عن التحميل الكسول المفرط.

استخدِم loading=lazy للصور خارج إطار العرض الأولي فقط. لا يمكن للمتصفّح تحميل صورة بشكل كسول إلى أن يعرف موضع الصورة على الصفحة، ما يؤدي إلى تحميلها بشكلٍ أبطأ.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

التكيّف مع الإصدارات الأقدم

تتجاهل المتصفّحات التي لا تتيح السمة loading هذه السمة. لا تستفيد هذه المتصفّحات من التحميل الكسول، ولكن لا يؤدي تضمينها إلى أيّ تأثير سلبي.

الأسئلة الشائعة

في ما يلي بعض الأسئلة الشائعة حول التحميل الكسول على مستوى المتصفّح.

هل يمكنني تحميل الصور بشكل كسول تلقائيًا في Chrome؟

في السابق، كان Chromium يحمِّل بشكل كسول تلقائيًا أيّ صور مناسبة للتأجيل إذا كان الوضع البسيط مفعّلاً على Chrome لنظام Android ولم يتم تقديم السمة loading أو تم ضبطها على loading="auto". ومع ذلك، تم إيقاف "الوضع البسيط" وloading="auto"، وليس هناك أيّ خطط لتوفير تحميل الصور بشكل كسول تلقائيًا في Chrome.

هل يمكنني تغيير مدى قرب الصورة من إطار العرض قبل تحميلها؟

هذه القيم مبرمَجة بشكلٍ ثابت ولا يمكن تغييرها من خلال واجهة برمجة التطبيقات. ومع ذلك، قد تتغيّر في المستقبل عندما تجرّب المتصفّحات مسافات ومتغيّرات مختلفة للحدود القصوى.

هل يمكن أن تستخدم صور الخلفية في CSS السمة loading؟

لا، يمكنك استخدامها مع علامات <img> فقط.

يمكن أن يؤدي استخدام loading="lazy" يمكن إلى منع تحميل الصور عندما لا تكون مرئية ولكنها تقع ضمن المسافة المحسوبة. قد تكون هذه الصور خلف شريط دائري أو مخفية من خلال CSS لأحجام شاشة معيّنة. على سبيل المثال، لا يحمِّل Chrome وSafari وFirefox الصور باستخدام النمط display: none;، سواء على عنصر الصورة أو على عنصر رئيسي. ومع ذلك، لا تزال تقنيات إخفاء الصور الأخرى، مثل استخدام النمط opacity:0، تؤدي إلى تحميل المتصفّح للصورة. ننصحك دائمًا باختبار عملية التنفيذ بدقة للتأكّد من أنّها تعمل على النحو المطلوب.

غيّر Chrome 121 سلوك الصور التي يتم تمريرها أفقيًا، مثل الشرائط الدائرية. تستخدم هذه الصور الآن الحدود القصوى نفسها التي يتم استخدامها للتمرير عموديًا. يعني ذلك أنّه في حالة استخدام الشريط الدائري، سيتم تحميل الصور قبل أن تظهر في إطار العرض. يعني ذلك أنّه من غير المرجّح أن يلاحظ المستخدم تحميل الصورة، ولكن على حساب المزيد من عمليات التنزيل. استخدِم العرض التوضيحي للتحميل الكسول الأفقي لمقارنة السلوك في Chrome مقابل Safari وFirefox.

ماذا لو كنت أستخدم حاليًا مكتبة خارجية أو نصًا برمجيًا لتحميل الصور بشكل كسول؟

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

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

كيف يمكنني التعامل مع المتصفّحات التي لا تتيح التحميل الكسول؟

يحظى التحميل الكسول للصور على مستوى المتصفّح بدعم جيد في جميع المتصفّحات الرئيسية، وننصح باستخدامه في معظم حالات الاستخدام لإزالة الحاجة إلى تبعيات إضافية على JavaScript.

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

يمكنك استخدام السمة loading لرصد ما إذا كان المتصفّح يتيح هذه الميزة:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

على سبيل المثال، lazysizes هي مكتبة JavaScript شائعة للتحميل الكسول. يمكنك رصد مدى توفّر السمة loading لتحميل lazysizes كمكتبة احتياطية فقط عندما لا تكون loading متاحة. يعمل ذلك على النحو التالي:

  • استبدِل <img src> بـ <img data-src> لتجنُّب التحميل السريع في المتصفّحات غير المتوافقة. إذا كانت السمة loading متاحة، استبدِل data-src بـ src.
  • إذا لم تكن loading متاحة، حمِّل مكتبة احتياطية من lazysizes وابدأها، باستخدام الفئة lazyload للإشارة إلى الصور التي سيتم تحميلها بشكل كسول:
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

إليك عرض توضيحي عن هذا النمط. جرِّبه في متصفّح قديم للاطّلاع على المكتبة الاحتياطية أثناء العمل.

هل يتم أيضًا دعم التحميل الكسول لإطارات iframe في المتصفّحات؟

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

<iframe loading=lazy> تم أيضًا توحيد السمة. يسمح لك ذلك بتحميل إطارات iframe بشكل كسول باستخدام السمة loading. لمزيد من المعلومات، يُرجى الاطّلاع على حان الوقت لتحميل إطارات iframe خارج الشاشة بشكل كسول.

كيف يؤثر التحميل الكسول على مستوى المتصفّح في الإعلانات على صفحة ويب؟

يتم تحميل جميع الإعلانات المعروضة للمستخدم كصور أو إطارات iframe بشكل كسول تمامًا مثل أيّ صورة أو إطار iframe آخر.

كيف تتم معالجة الصور عند طباعة صفحة ويب؟

يتم تحميل جميع الصور وإطارات iframe على الفور عند طباعة الصفحة. يُرجى الاطّلاع على المشكلة رقم ‎875403 للحصول على التفاصيل.

هل تتعرّف أداة Lighthouse على التحميل الكسول على مستوى المتصفّح؟

تأخذ أداة Lighthouse 6.0 والإصدارات الأحدث في الاعتبار طرق التحميل الكسول للصور خارج الشاشة التي يمكن أن تستخدم حدودًا قصوى مختلفة، ما يسمح لها باجتياز تدقيق "تأجيل تحميل الصور خارج الشاشة".

تحميل الصور بشكل كسول لتحسين الأداء

يمكن أن يسهّل عليك دعم المتصفّح لتحميل الصور بشكل كسول تحسين أداء صفحاتك بشكلٍ كبير.

هل تلاحظ أي سلوك غير عادي مع تفعيل هذه الميزة في Chrome؟ يمكنك الإبلاغ عن خطأ.