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

لوحة "الشبكة" في "أدوات مطوّري البرامج في 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>`

تناقش مجموعة عمل أداء الويب إضافة عنصر تحميل مُسبَق مكافئ لعلامتَي HTML 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 على المواقع الإلكترونية التي تعرِض الترميز على جانب العميل مقارنةً بالمواقع الإلكترونية التي تُرسِل ترميزًا كاملاً من الخادم.