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

وصلنا أخيرًا إلى طريقة "التحميل الكسول" المُدمَج.

يمكنك الآن استخدام الصور التي تستخدم طريقة \"التحميل الكسول\" على مستوى المتصفّح، على الويب. يُظهر هذا الفيديو عرضًا توضيحيًا للميزة:

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

توافُق المتصفح

تتجاهل المتصفّحات التي لا تتيح استخدام السمة loading تلك السمة بدون أي آثار جانبية.

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

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

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

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

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

السمة loading

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

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

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

في ما يلي القيم المسموح بها لسمة loading:

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

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

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

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

إذا كنت تريد زيادة أولوية الاسترجاع لإحدى الصور المهمة (مثل صورة سرعة عرض أكبر جزء من المحتوى على الصفحة)، يجب استخدام أولوية الجلب مع fetchpriority="high".

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

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

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

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

مقارنةً بمكتبات التحميل الكسول في JavaScript، قد يتم اعتبار حدود استرجاع الصور التي يتم تمريرها لعرض المحتوى معتدلة.

حد المسافة غير ثابت ويختلف باختلاف عدة عوامل:

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

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

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

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

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

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

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

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

الحدود الجديدة مقارنةً بأحجام LazySizes (مكتبة JavaScript الشائعة التحميل الكسول):

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

يجب أن تتضمّن الصور سمات الأبعاد

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

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

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

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

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

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

بالإضافة إلى ذلك، يؤدي تحديد أبعاد الصور إلى تقليل احتمال حدوث متغيرات في التصميم. في حال لم تتمكّن من تضمين أبعاد لصورك، يمكن أن يؤدي التحميل الكسول لها إلى التبديل بين توفير موارد الشبكة وزيادة احتمالية حدوث تغيُّر التصميم.

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

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

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

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

تجنُّب الصور التي تستخدم طريقة التحميل الكسول والتي تظهر في أول إطار عرض مرئي

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

ننصحك بإضافة loading=lazy فقط إلى الصور التي يتم وضعها في الجزء غير المرئي من الصفحة، إن أمكن. إنّ الصور التي يتم تحميلها بفارغ الصبر يمكن جلبها على الفور، أمّا الصور التي يتم تحميلها على نحو بطيء، فسيحتاج المتصفّح حاليًا إلى الانتظار حتى يعرف مكان الصورة على الصفحة، وهذا يعتمد على IntersectionObserver.

بوجه عام، يجب تحميل أي صور داخل إطار العرض سريعًا باستخدام الإعدادات الافتراضية للمتصفح. ولست بحاجة إلى تحديد loading=eager لكي يسري ذلك على الصور في إطار العرض.

<!-- 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" في الصور في الجزء المرئي من الصفحة، لأنّ متصفّح Chrome لن يحمِّل صور loading=lazy مسبقًا في الماسح الضوئي للتحميل المُسبق، وسيؤخر أيضًا جلب هذه الصور إلى أن يكتمل التنسيق. للاطّلاع على مزيد من المعلومات، يمكنك الاطّلاع على مقالة تجنُّب الصور ذات التحميل الكسول التي تظهر في أول إطار عرض مرئي.

كيف تعمل السمة loading مع الصور التي تظهر في إطار العرض ولكن لا تظهر مباشرةً (على سبيل المثال: خلف لوحة عرض دوّارة أو صور مخفية بواسطة CSS لأحجام شاشات معيّنة)؟

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

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

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

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

كيف أتعامل مع المتصفِّحات التي لا تتيح "التحميل الكسول"؟

يمكنك إنشاء رمز 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> وتنفيذها بالفعل في Chromium وSafari. يتيح لك ذلك التحميل الكسول لإطارات iframe باستخدام السمة loading. راجِع هذه المقالة المخصّصة حول التحميل الكسول لإطار iframe للحصول على مزيد من المعلومات.

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

التحميل الكسول لجميع الإعلانات التي تظهر للمستخدم في شكل صورة أو إطار iframe تمامًا مثل أي صورة أخرى أو إطار iframe آخر

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

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

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

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

الخلاصة

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

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