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

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

Barry Pollard

Yoav Weiss

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

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

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

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

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

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

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

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

المصدر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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