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

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

Barry Pollard

Yoav Weiss

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

نظرة عامة على الصور المتجاوبة مع مختلف الأجهزة

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

73
79
78
17.2

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

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

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

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

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

50
≤79
85
11.1

المصدر

تتيح لك ميزة التحميل المُسبق إعلام المتصفّح بالموارد المهمة التي تريد تحميلها في أقرب وقت ممكن، قبل أن يتم اكتشافها في 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.

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

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

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

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

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

افتح العرض التوضيحي لعرض الشرائح في علامة تبويب جديدة.
اضغط على Control+Shift+J (أو Command+Option+J على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
انقر على علامة التبويب الشبكة.
في القائمة المنسدلة تقييد، اختَر شبكة الجيل الثالث السريعة.
أوقِف مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
إعادة تحميل الصفحة

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

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

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

تحميل صور الخلفية مسبقًا باستخدام مجموعة الصور

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

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

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

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

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

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

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

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

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

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

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

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

وظل بدء العرض كما هو.
تحسن مؤشر السرعة بشكل طفيف (273 ملي ثانية، لأنّ الصور التي تصل بشكل أسرع لا تشغل مساحة كبيرة من مساحة البكسل).
وتحسّن أداء Last Painted Hero بشكل كبير بمقدار 1.2 ثانية.

لقطة شاشة للمقارنة بين شريط الصور 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 على المواقع الإلكترونية التي تعرض الترميز من جهة العميل مقارنةً بالمواقع الإلكترونية التي ترسل الترميز الكامل من الخادم.