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

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">

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">

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

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

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

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

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

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

  1. افتح عرض الشرائح التجريبي هذا في علامة تبويب جديدة.
  2. اضغط على Control+Shift+J (أو Command+Option+J على جهاز Mac) لفتح "أدوات مطوّري البرامج".
  3. انقر على علامة التبويب الشبكة.
  4. في القائمة المنسدلة التقييد، اختَر 3G السريع.
  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">

يسمح لك حذف السمة 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)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

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

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

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

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

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

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