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

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) في ما يلي:

وفيما يلي الحدود الجديدة مقارنةً بـ 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 التصميم، تؤدي إلى تحميل المتصفح للصورة. اختبِر دائمًا عملية التنفيذ بدقة للتأكّد من أنّها تعمل على النحو المطلوب.

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