تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

يمكنك استخدام السمة 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.
لا تزال الحدود الدنيا الجديدة لإطار العرض تعني أنّه من المحتمل أن يكون قد تم تحميل الصور في الوقت الذي ينتقل فيه المستخدم إليها.

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

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

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

في Chrome، يؤدي الحدّ الأدنى الجديد للّمسافة من مساحة العرض إلى تحميل 90 كيلوبايت من الصور مقارنةً بتحميل LazySizes الذي يبلغ 70 كيلوبايت في ظلّ ظروف الشبكة نفسها. — مقارنة بين الحدود الدنيا المستخدَمة لميزة "التحميل المُتأخر" في Chrome وLazySizes

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

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

كيف يمكنني التعامل مع المتصفّحات التي لا تتيح ميزة "التحميل البطيء"؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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