تحميل الصور المتجاوبة مسبقًا

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

يمكنك التحميل المُسبَق للصور المتجاوبة، ما يتيح تحميل صورك بشكل أسرع بكثير من خلال مساعدة المتصفّح في تحديد الصورة الصحيحة من srcset قبل عرض العلامة img.

نظرة عامة على الصور المتجاوبة

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

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

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

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

نظرة عامة حول التحميل المُسبَق

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset وimagesizes

يستخدم العنصر <link> السمتَين imagesrcset وimagesizes لتحميل الصور المتجاوبة مسبقًا. استخدِمها إلى جانب <link rel="preload">، مع استخدام بنية srcset وsizes في العنصر <img>.

على سبيل المثال، إذا أردت التحميل المُسبَق لصورة متجاوبة تم تحديدها باستخدام:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

يمكنك إجراء ذلك من خلال إضافة ما يلي إلى <head> في HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

يؤدي ذلك إلى بدء طلب باستخدام منطق اختيار الموارد نفسه الذي تستخدمه السمتان srcset وsizes.

حالات الاستخدام

في ما يلي بعض حالات استخدام التحميل المُسبَق للصور المتجاوبة.

التحميل المُسبَق للصور المتجاوبة التي يتم إدراجها بشكل ديناميكي

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

يمكنك فحص هذه المشكلة على موقع إلكتروني يتضمّن معرض صور يتم تحميله بشكل ديناميكي:

  1. افتح عرض الشرائح التجريبي هذا في علامة تبويب جديدة.
  2. اضغط على Control+Shift+J (أو Command+Option+J على جهاز Mac) لفتح "أدوات مطوّري البرامج".
  3. انقر على علامة التبويب الشبكة.
  4. في القائمة المنسدلة التقييد، اختَر الجيل الثالث السريع.
  5. أزِل العلامة من مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
  6. إعادة تحميل الصفحة
لوحة &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج في Chrome&quot; تعرض مخططًا انحداريًا لمورد JPEG يبدأ تنزيله فقط بعد بعض JavaScript.
بدون التحميل المُسبَق، تبدأ الصور في التحميل بعد أن ينتهي المتصفّح من تشغيل النص البرمجي. بالنسبة إلى الصورة الأولى، يكون هذا التأخير غير ضروري.

يؤدي استخدام preload هنا إلى بدء تحميل الصورة مسبقًا، ما يتيح عرضها عندما يحتاج المتصفح إلى ذلك.

لوحة &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج في Chrome&quot; تعرض مخططًا تسلسليًا مع تنزيل مورد JPEG بالتوازي مع بعض JavaScript.
يسمح التحميل المُسبَق للصورة الأولى ببدء تحميلها في الوقت نفسه الذي يتم فيه تحميل النص البرمجي.

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

التحميل المُسبَق لصور الخلفية باستخدام image-set

إذا كانت لديك صور خلفية مختلفة لكثافات الشاشة المختلفة، يمكنك تحديدها في CSS باستخدام بنية image-set. يمكن للمتصفّح بعد ذلك اختيار الصورة التي سيتم عرضها استنادًا إلى DPR في الشاشة.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

تكمن المشكلة في صور الخلفية التي يتم تحديدها باستخدام CSS في أنّ المتصفّح لا يكتشفها إلا بعد تنزيل جميع ملفات CSS ومعالجتها في <head> الخاصة بالصفحة.

يمكنك فحص هذه المشكلة على مثال لموقع إلكتروني يتضمّن صورة خلفية متجاوبة.

لوحة &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج في Chrome&quot; تعرض مخططًا انحداريًا لمورد JPEG بدأ تنزيله فقط بعد بعض CSS.
في هذا المثال، لا يبدأ تنزيل الصورة إلا بعد تنزيل ملف CSS بالكامل، ما يؤدي إلى تأخير غير ضروري في عرض الصورة.

تتيح لك ميزة التحميل المُسبَق للصور المتجاوبة تحميل هذه الصور بشكل أسرع.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

يسمح لك حذف السمة href بضمان أنّ المتصفحات التي لا تتوافق مع imagesrcset في العنصر <link>، ولكنها تتوافق مع image-set في CSS، ستنزّل المصدر الصحيح. ومع ذلك، لن يستفيدوا من التحميل المُسبَق في هذه الحالة.

يمكنك الاطّلاع على طريقة عمل المثال السابق مع صورة خلفية متجاوبة تم تحميلها مسبقًا في العرض التوضيحي للتحميل المسبق للخلفية المتجاوبة.

لوحة &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج في Chrome&quot; تعرض مخططًا تسلسليًا مع تنزيل مورد JPEG بالتوازي مع بعض ملفات CSS.
هنا يبدأ تنزيل الصورة وCSS في الوقت نفسه، ما يتيح تحميل الصورة بشكل أسرع.

التأثيرات العملية للتحميل المُسبَق للصور المتجاوبة

يمكن أن يؤدي التحميل المُسبَق للصور المتجاوبة إلى تسريعها من الناحية النظرية، ولكن ما هو تأثير ذلك عمليًا؟

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

وقد أدّى ذلك إلى النتائج التالية لكل من عدم التحميل المُسبَق والتحميل المُسبَق للصور:

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

التحميل المُسبَق و<picture>

يناقش فريق عمل أداء الويب إضافة عنصر مكافئ للتحميل المُسبَق لكل من srcset وsizes، ولكن ليس العنصر <picture>، الذي يتعامل مع حالة الاستخدام "توجيه الفن".

لا يزال هناك عدد من المشاكل الفنية التي يجب حلّها بشأن التحميل المسبق <picture>، ولكن في الوقت الحالي، تتوفّر حلول بديلة:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

تتضمّن منطق اختيار مصدر الصورة الخاص بالعنصر <picture> عملية البحث في سمات media الخاصة بعناصر <source> بالترتيب، والعثور على أول عنصر مطابق، واستخدام المورد المرفق.

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

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

التحميل المُسبَق وtype

يتيح العنصر <picture> أيضًا مطابقة أول type، ما يسمح لك بتوفير تنسيقات صور مختلفة ليتمكّن المتصفّح من اختيار أول تنسيق صور يتوافق معه.

لا تتوافق حالة الاستخدام هذه إلا جزئيًا مع التحميل المُسبَق: يجب ألا تنزّل المتصفحات عمليات التحميل المُسبَق إلا للأنواع المتوافقة. لذا يمكنك استخدام هذا الإجراء لمنع المتصفّحات من التحميل المُسبَق لأنواع mimetypes غير المتوافقة من خلال تضمينها في التحميل المُسبَق:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

ومع ذلك، على عكس <picture>، لن يتوقف عند أول نوع متوافق. لذا، إذا تم تضمين عمليات تحميل مسبق متعددة لأنواع متعددة، سيتم تحميل جميع الصور مسبقًا:

لا تفعل ذلك — التحميل المُسبَق لأنواع متعددة:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

بدلاً من ذلك، يمكنك إجراء ما يلي: التحميل المُسبَق للنوع الأكثر تفضيلاً:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

يعمل التحميل المُسبَق للتنسيق الأحدث (AVIF في هذه الحالة) على تحسين الأداء تدريجيًا، حيث تستفيد المتصفحات المتوافقة مع هذا النوع من التحميل المُسبَق، بينما لا تستفيد المتصفحات الأخرى منه.

بالنسبة إلى المواقع الإلكترونية التي يمكن العثور فيها على الصورة بسرعة في HTML، ننصحك بتجنُّب التحميل المُسبَق، والسماح لماسح التحميل المُسبَق بدلاً من ذلك باسترداد الصور من العنصرَين <picture> و<source>. هذه إحدى أفضل الممارسات على أي حال، لا سيما عند استخدام Fetch Priority للمساعدة في تحديد أولويات الصورة المناسبة، لأنّها تتيح التحميل المُسبَق للصورة المحدّدة استنادًا إلى توافق المتصفّح. كما يزيل خطر أن تصبح عملية التحميل المُسبَق قديمة من الترميز الرئيسي عند تغيير الصور أو الصفحات.

التأثيرات في مقياس "سرعة عرض أكبر محتوى مرئي" (LCP)

بما أنّ الصور يمكن أن تكون من العناصر المرشّحة لمقياس "سرعة عرض أكبر محتوى مرئي" (LCP)، يمكن أن يؤدي التحميل المُسبَق لها إلى تحسين مقياس LCP لموقعك الإلكتروني.

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