تمت ترجمة هذه الصفحة بواسطة 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) لفتح "أدوات مطوري البرامج".
انقر على علامة التبويب الشبكة.
في القائمة المنسدلة 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. ومع ذلك، لن تستفيد من التحميل المسبق في هذه الحالة.

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

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

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

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

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

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

بدء العرض بقيت على حالها.
مؤشر السرعة تم تحسينها قليلاً (273 ملي ثانية، حيث إن وصول الصور بشكل أسرع لا تشغل مساحة كبيرة من مساحة البكسل).
البطل المرسوم الأخير تحسنت بشكل ملحوظ، بمقدار 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 على المواقع الإلكترونية التي تعرض الترميز على الجهاز العميل. أكثر من المواقع التي ترسل ترميزًا كاملاً من الخادم.