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

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

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

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

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

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

• استخدام Intersection Monitorer 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" تلقائيًا عند عدم وجود قيمة صريحة أو إذا شكوى linter في حال عدم ضبطها بشكل صريح.

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

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

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

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

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

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

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

يختلف حد المسافة وفقًا للعوامل التالية:

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

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

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

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

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

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

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

الحدود القديمة مقابل الحدود الجديدة:

الحدود الجديدة والحدود الجديدة لتحديد "LazySizes" (مكتبة طريقة \"التحميل الكسول\" الرائجة في JavaScript):

تقديم سمات أبعاد الصور

أثناء تحميل المتصفح لإحدى الصور، لا يتعرّف على أبعاد الصورة على الفور، ما لم يتم تحديدها بشكل صريح. للسماح للمتصفح بحجز مساحة كافية على الصفحة لإضافة الصور وتجنُّب متغيّرات التصميم غير المرغوب فيها، ننصحك بإضافة السمتين 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" العمل مع الصور في إطار العرض التي لا تظهر على الفور؟

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

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

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

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

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

كيف أتعامل مع المتصفِّحات التي لا تتيح "التحميل الكسول"؟ {browsers-dont-support}

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

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

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

• استبدل <img src> بـ <img data-src> لتجنّب التحميل الزائد في المتصفحات غير المتوافقة. إذا كانت السمة loading متاحة، يمكنك استبدال data-src بالسمة src.
• إذا لم يكن loading متوافقًا، يمكنك تحميل عنصر احتياطي بدءًا من استخدام طريقة \"التحميل الكسول\"، باستخدام الفئة 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 متوافقة أيضًا في المتصفّحات؟

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

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

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

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

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

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

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

استخدام طريقة التحميل الكسول للصور لتحسين الأداء

يمكن أن يساعد توافق المتصفّح مع الصور التي يتم تحميلها في التحميل الكسول على تسهيل عملية تحسين أداء صفحاتك إلى حدّ كبير.

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