بدءًا من إصدار Chrome 73، يمكن دمج رابط rel="preload" والصور المتجاوبة مع مختلف الأجهزة لتحميل الصور بشكلٍ أسرع.
التوافق مع المتصفح
- 73
- 79
- 78
- 17.2
تمنحني هذه المقالة فرصة لمناقشة اثنتين من الأشياء المفضّلة لدي: الصور المتجاوبة والتحميل المسبق. بصفتي شخصًا ساهم بشكل كبير في تطوير كلتا الميزتَين، أنا متحمسة جدًا لرؤيةهما يعملون معًا.
نظرة عامة على الصور المتجاوبة مع مختلف الأجهزة
لنفترض أنّك تتصفّح الويب على شاشة يبلغ عرضها 300 بكسل، وطلبت الصفحة للتو صورة بعرض 1, 500 بكسل. أهدرت تلك الصفحة الكثير من بيانات شبكة الجوّال لأنّ شاشتك لا يمكنها تنفيذ أي إجراء بكل هذه الدقة الإضافية. من المفترض أن يجلب المتصفّح نسخة من الصورة أكبر من حجم شاشتك قليلاً، أي 325 بكسل. يضمن ذلك الحصول على صورة عالية الدقة بدون إهدار أي بيانات. والأفضل من ذلك، سيتم تحميل الصورة بشكل أسرع. تمكّن الصور المتجاوبة مع مختلف الأجهزة المتصفحات من جلب موارد صور مختلفة إلى أجهزة مختلفة. إذا كنت لا تستخدم الصورة على شبكة توصيل المحتوى، عليك حفظ أبعاد متعدّدة لكل صورة وتحديدها في السمة 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">
الصور المتجاوبة + التحميل المسبق = تحميل الصور بشكل أسرع
كانت الصور المتجاوبة والتحميل المُسبق متاحَين على مدار السنوات القليلة الماضية، ولكن في الوقت نفسه كان هناك شيء مفقود: لم تكن هناك طريقة لتحميل الصور المتجاوبة مسبقًا. بدءًا من الإصدار 73 من متصفِّح Chrome، يمكن للمتصفِّح تحميل الصيغة الصحيحة من الصور المتجاوبة المُحدَّدة في srcset مسبقًا قبل أن يكتشف علامة img.
واعتمادًا على بنية موقعك الإلكتروني، قد يؤدي ذلك إلى عرض صور أسرع إلى حد كبير. لقد أجرينا اختبارات على موقع إلكتروني يستخدم JavaScript من أجل استخدام التحميل الكسول للصور المتجاوبة مع مختلف الأجهزة. أدّى التحميل المُسبق إلى تحميل الصور بسرعة أكبر بمقدار 1.2 ثانية.
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) لفتح "أدوات مطوّري البرامج".
انقر على علامة التبويب الشبكة.
في القائمة المنسدلة تقييد، اختَر شبكة الجيل الثالث السريعة.
أوقِف مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
إعادة تحميل الصفحة
يساعد استخدام preload هنا لأن الصورة تبدأ في التحميل مسبقًا، ومن المحتمل أن تكون هناك عندما يحتاج المتصفح إلى عرضها.
لمعرفة الفرق الذي يُحدثه التحميل المُسبق، يمكنك فحص معرض الصور نفسه الذي يتم تحميله ديناميكيًا ولكن مع تحميل الصورة الأولى مسبقًا من خلال اتّباع الخطوات الواردة في المثال الأول.
التحميل المُسبق لصور الخلفية باستخدام مجموعة الصور
إذا كانت لديك صور خلفية مختلفة لكثافات شاشة مختلفة، يمكنك تحديدها في CSS باستخدام بنية image-set. ويمكن للمتصفح بعد ذلك اختيار النموذج الذي سيتم عرضه استنادًا إلى DPR للشاشة.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
تكمن مشكلة صور خلفية CSS في أنه لا يتم اكتشافها بواسطة المتصفح إلا بعد تنزيل جميع صور CSS ومعالجتها في <head> للصفحة، والذي قد يتضمن العديد من ملفات CSS...
يمكنك فحص هذه المشكلة على نموذج موقع إلكتروني يحتوي على صورة خلفية متجاوبة.
يوفّر التحميل المُسبَق للصور المتجاوبة مع مختلف الأجهزة طريقة بسيطة وخالية من الاختراق لتحميل هذه الصور بشكلٍ أسرع.
<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 ثانية. 🎉🎉
وبالطبع، لا يعبّر أي شيء عن الاختلاف المرئي تمامًا مثل مقارنة شريط الصور:
هل تريد التحميل المُسبق و<picture>؟
إذا كنت معتادًا على استخدام الصور المتجاوبة مع مختلف الأجهزة، قد تتساءل عن كيفية استخدام <picture>.
تتحدث مجموعة عمل أداء الويب عن إضافة مكافئ تحميل مسبق لـ srcset وsizes، وليس العنصر <picture> الذي يعالج حالة استخدام "اتجاه الرسومات".
لماذا يتم "إهمال" حالة الاستخدام هذه؟
وعلى الرغم من أهمية حلّ حالة الاستخدام هذه، لا يزال هناك عدد من المشاكل الفنية التي يجب حلّها، ما يعني أنّ الحل في هذه الحالة سيكون به تعقيدات كبيرة. فضلاً عن ذلك، يبدو في معظم الأحيان أنّه يمكن معالجة حالة الاستخدام اليوم، حتى لو كانت بطريقة مبتكرة (انظر أدناه).
بناءً على ذلك، قرّرت مجموعة WG المسؤولة عن أداء الويب شحن srcset أولاً لمعرفة ما إذا كان سيظهر الطلب على دعم مكافئ لـ 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) مسبقًا لتحسين الأداء.
ملخّص
توفّر لنا ميزة "التحميل المُسبق للصور المتجاوبة" فرصًا جديدة ومشوّقة لتحميل الصور المتجاوبة مسبقًا بطرق لم تكن متاحة في السابق إلّا من خلال الاختراق. وهو إضافة جديدة مهمة لصندوق أدوات المطورين الواعي بالسرعة، وهو يتيح لنا التأكد من أن الصور المهمة التي نريد عرضها أمام المستخدمين في أقرب وقت ممكن ستكون هناك عندما نحتاج إليها.