في الوقت الحالي، تشكّل الصور أهم مواد العرض على الويب من حيث إجمالي حجم عمليات النقل وعدد الطلبات لكل صفحة. بلغ متوسط حجم النقل الإجمالي لصفحة الويب 2 ميغابايت تقريبًا اعتبارًا من حزيران (يونيو) 2022، وكانت الصور وحدها تمثل نصف هذا الحجم تقريبًا. وليس من المبالغة القول إن تحسين طلبات الصور قد يكون أكبر عملية تحسين للأداء يمكنك إجراؤها.
ستتعرّف لاحقًا على كيفية تطوّر الصور المتجاوبة مع مختلف الأجهزة لحلّ المشاكل التي حدثت من خلال محاولة عرض صورة واحدة لجميع الاحتمالات. في هذا القسم، ستطّلع على مقاييس الأداء الرئيسية المرتبطة بالصور وكيفية تحسينها.
تأجيل طلبات الصور
بينما أنت على وشك معرفة عدد من الطرق لضمان صغر حجم طلبات الصور وفعاليتها قدر الإمكان، فإنّ أسرع طلب صورة
سيكون دائمًا هو الطلب الذي لا يتم تقديمه. لذلك، أريد أن أشارككم التغيير الأكثر تأثيرًا الذي يمكنك إجراؤه في طريقة عرض مواد عرض الصور للمستخدمين، وهي السمة loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
تضمن هذه السمة عدم إرسال طلبات الحصول على الصور إلى أن تقترب من إطار العرض الخاص بالمستخدم، ما يؤجّلها عن التحميل الأوليّ للصفحة، أي الوقت الذي يكون فيه المتصفّح في أكثر حالاته ازدحامًا، وتزيل تلك الطلبات من مسار العرض الحرج.
قد يكون استخدام هذه السمة بسيطًا كما قد يكون عمليًا، لذلك يمكن أن يكون لاستخدام هذه السمة تأثيرًا إيجابيًا كبيرًا على الأداء: لن يتم أبدًا طلب الصورة التي لا تقع ضمن إطار العرض للمستخدم، ولن يتم إهدار أي نطاق ترددي على الصور التي لن يراها المستخدم مطلقًا.
ومع ذلك، هناك مشكلة: تأجيل هذه الطلبات يعني عدم الاستفادة من العمليات المحسّنة للغاية في المتصفحات لطلب الصور في أقرب وقت ممكن. في حال استخدام loading="lazy" على عناصر img في الجزء العلوي من التنسيق، وبالتالي زيادة احتمال ظهورها في إطار عرض المستخدم عند تحميل الصفحة لأول مرة، يمكن أن تبدو هذه الصور أبطأ بكثير بالنسبة إلى المستخدم النهائي.
أولوية الجلب
السمة loading هي مثال على الجهود الكبيرة التي تهدف إلى توفير معايير ويب أكبر من أجل منح مطوّري البرامج المزيد من القوة في تحديد كيفية ترتيب متصفّحات الويب حسب الأولوية للطلبات.
على الأرجح أنّك على دراية بالأساليب الأساسية لاسترجاع أولوية المتصفحات:
على سبيل المثال، يُعدّ طلب توفير ملف CSS خارجي في <head> لمستند ضروريًا بما يكفي لحظر العرض، في حين سيتم تأجيل طلب
ملف JavaScript خارجي يزيد عن </body> مباشرةً إلى أن تكتمل عملية العرض. إذا كانت قيمة السمة loading في <img> هي "كسول"،
سيتم تأجيل طلب الصورة المرتبطة إلى أن يحدِّد المتصفّح أنها ستظهر للمستخدم. وإلا، فستكون لهذه الصورة نفس
أولوية أي صورة أخرى على الصفحة.
تهدف السمة fetchpriority إلى منح المطوّرين تحكمًا أكثر دقة في أولوية الأصول، ما يسمح لك بوضع علامة على الموارد باعتبارها ذات أولوية "عالية" و"منخفضة" بالنسبة إلى الموارد من النوع نفسه. وتتشابه حالات استخدام fetchpriority مع السمة loading، إلا أنّها أكثر شمولية. على سبيل المثال، يمكنك استخدام fetchpriority="low" على صورة تم عرضها بعد تفاعل المستخدم فقط
(سواء كانت هذه الصورة تقع ضمن إطار العرض الخاص بالمستخدم أم لا) لمنح الأولوية للصور المرئية في مكان آخر على الصفحة، أو fetchpriority="high"
لمنح الأولوية للصورة التي تعرف أنّها ستظهر على الفور في إطار العرض فور عرض الصفحة.
يُرجى العلم أنّ السمة fetchpriority تختلف عن السمة loading في أنّها لا تغيّر جذريًا في سلوك المتصفّح. وهو لا يطلب من المتصفّح تحميل مواد عرض معيّنة قبل غيرها، بل يمنحه سياقًا حيويًا للقرارات التي يتّخذها بشأن طلب مواد العرض.
قياس تأثير الصور
عند تحسين مواد عرض الصور، غالبًا ما يكون الأداء الملاحظ أكثر أهمية وأكثر صعوبة من إجمالي حجم النقل وحده.
توفّر "مؤشرات أداء الويب" مقاييس وإرشادات قابلة للقياس وقابلة للاستخدام لتحسين تجربة المستخدمين على الويب، مع تسليط الضوء على مشاكل مثل بطء وقت الاستجابة من خادم الويب ومشاكل العرض وحالات التأخير في التفاعل. مؤشرات أداء الويب الأساسية هي مجموعة فرعية من هذه الأهداف، وتركّز بالليزر على تجربة المستخدم المباشرة لصفحة فردية، وهي مجموعة من القياسات الفنية التي تحدّد معًا مدى سرعة تجربة المستخدم.
متغيّرات التصميم التراكمية
متغيّرات التصميم التراكمية (CLS) هي مقياس للثبات البصري. وهو مقياس لتسجيل مدى تغيُّر تنسيق المحتوى في الصفحة أثناء تحميل مواد العرض وعرض الصفحة. فأي شخص قضى وقتًا طويلاً في استخدام الويب فقد مكانه على المدى الطويل من النص بسبب "قفزة" الصفحة بسبب عرض خط ويب أو مصدر صورة متأخر، أو إبعاد عنصر تفاعلي فجأة عن المؤشر. إنّ ارتفاع متغيّرات التصميم التراكمية (CLS) هو مصدر إزعاج في أفضل الأحوال، ويؤدي إلى حدوث خطأ لدى المستخدم في أسوأ الأحوال، زر "إلغاء" الذي ينتقل إلى مساحة كانت تشغلها سابقًا زر "التأكيد" تمامًا كما ينقر المستخدم على سبيل المثال.
مع ارتفاع أوقات التحميل والمساحة التي يمكن أن تشغلها في التخطيط، يمكن أن تكون الصور سببًا شائعًا في ارتفاع درجات متغيّرات التصميم التراكمية (CLS).
بفضل التغييرات الأخيرة نسبيًا في المتصفّحات الحديثة، أصبح من الأسهل تجنُّب الحصول على نتائج متغيّرات التصميم التراكمية (CLS) العالية بسبب الصور.
إذا كنت تعمل على الواجهة الأمامية منذ بضع سنوات، ستكون على دراية بالسمتَين width وheight في <img>:
قبل انتشار CSS على نطاق واسع، كانت هاتان السمتان الطريقة الوحيدة للتحكم في حجم الصورة.
<img src="image.jpg" height="200" width="400" alt="…">
لم يتم استخدام هذه السمات في محاولة للحفاظ على مشاكل النمط بشكل منفصل عن ترميزنا، لا سيما أن تصميم الويب سريع الاستجابة جعل من الضروري تحديد الحجم المستند إلى النسبة المئوية عبر CSS. في بدايات تصميم الويب السريع الاستجابة، كان طلب المساعدة "إزالة سمتَي width وheight" غير المستخدَمين هو نصائح شائعة، لأنّ القيم التي حدّدناها في CSS، max-width: 100% وheight: auto، كانت ستلغي هذه القيم.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
وبعد إزالة السمتَين height وwidth كما في المثال السابق، إنّ الطريقة الوحيدة التي يستخدمها المتصفّح لتحديد ارتفاع الصورة في هذه الحالة هي طلب المصدر وتحليله وعرضه بنسبة العرض إلى الارتفاع الأساسية استنادًا إلى عرض المساحة التي يشغلها في التنسيق بعد تطبيق أوراق الأنماط. وتحدث معظم هذه العمليات بعد عرض الصفحة،
مع جعل الارتفاع المحسوب حديثًا متغيّرات إضافية في التصميم.
بدءًا من عام 2019، تم تعديل سلوك المتصفّح للتعامل مع سمتَي width وheight بشكل مختلف. بدلاً من استخدام قيم هذه السمات لتحديد الحجم الثابت المستند إلى البكسل للعنصر img في التنسيق، يمكن الاعتقاد بأنّ هذه السمات تمثّل نسبة العرض إلى الارتفاع للصورة، على الرغم من أنّ البنية هي نفسها. ستقسّم المتصفحات الحديثة هذه القيم على بعضها البعض من أجل
تحديد نسبة العرض إلى الارتفاع الأساسية لعنصر img قبل عرض الصفحة، ما يسمح لها بحجز المساحة التي ستشغلها الصورة أثناء عرض التنسيق.
كقاعدة، عليك دائمًا استخدام السمتَين height وwidth على <img>، مع استخدام قيم تتطابق مع الحجم الأساسي لمصدر الصورة، طالما أنّك حدّدت height: auto إلى جانب max-width: 100% لإلغاء الارتفاع من سمة HTML.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
عند استخدام السمتَين width وheight في عناصر <img>، ستتجنّب ارتفاع نتيجة متغيّرات التصميم التراكمية (CLS) بسبب الصور.
تجدر الإشارة إلى أنّه ليس هناك أي تأثير سلبي لهذا الأسلوب، إذ يعتمد على سلوك قديم للمتصفّح، إذ إنّ أي متصفّح متوافق مع لغة CSS الأساسية سيعمل على النحو المعتاد، مع إلغاء السمتَين height وwidth في الترميز باستخدام أنماطك.
على الرغم من أنّ السمتَين width وheight تتجنّبان مشاكل متغيّرات التصميم التراكمية (CLS) من خلال حجز مساحة التنسيق اللازمة للصور، من غير المحبّذ أيضًا أن تظهر فجوة فارغة أو عنصر نائب منخفض الجودة أمام المستخدمين أثناء انتظارهم لنقل الصورة وعرضها. على الرغم من أنّ هناك إجراءات يمكنك تنفيذها للحدّ من التأثير القابل للقياس والملحوظ
للصور التي يتم تحميلها ببطء، فإنّ الطريقة الوحيدة لتقديم صورة معروضة بالكامل للمستخدم بسرعة أكبر هي من خلال تقليل حجم نقلها.
سرعة عرض أكبر جزء من المحتوى على الصفحة
يقيس مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة" (LCP) الوقت المستغرق لعرض أكبر عنصر "محتوى" مرئي في إطار العرض الخاص بالمستخدم، وهو عنصر المحتوى الذي يشغل أكبر نسبة مئوية من الصفحة المرئية. وقد يبدو هذا مقياسًا محددًا بشكل مفرط في الظاهر، غير أن هذا العنصر يعمل كوكيل عملي للنقطة التي تم فيها عرض معظم الصفحة، من منظور المستخدم. إنّ سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) هو مقياس حيوي للأداء (الملاحظ).
قد تكون مقاييس مثل DOMContentLoaded أو الحدث window.onload مفيدة لتحديد وقت اكتمال عملية تحميل الصفحة الحالية من الناحية الفنية، ولكنّها لا تتوافق بالضرورة مع تجربة المستخدم على الصفحة. وسيتم تضمين التأخير البسيط في عرض عنصر خارج إطار العرض للمستخدم في أي من هذين المقياسين، ولكن من المحتمل ألا يتم اكتشافه تمامًا من قبل مستخدم حقيقي.
وتعني سرعة LCP الطويلة أن انطباع المستخدم الأول عن الصفحة - أهم محتوى داخل إطار العرض الحالي - هو أن الصفحة بطيئة أو معطلة تمامًا.
يؤثر تصور المستخدم الذي يتم تسجيله من خلال سرعة عرض أكبر جزء من المحتوى على الصفحة تأثيرًا مباشرًا على تجربة المستخدم. أظهرت تجربة أجرتها شركة Vodafone في العام الماضي أنّ تحسّنًا بنسبة 31% في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لم يؤد فقط إلى زيادة في المبيعات بنسبة 8%، وهي نتيجة قوية في حد ذاتها، بل أدى إلى زيادة بنسبة 15% في عدد الزوّار الذين أصبحوا عملاء محتملين ("معدّل الزيارات إلى العملاء المحتملين") وتحسّنًا بنسبة 11% في عدد سلة التسوّق ("معدّل الزيارات إلى العملاء").
في أكثر من %70 من صفحات الويب، يتضمن العنصر الأكبر في إطار العرض الأولي صورة، إما كعنصر <img> مستقل أو عنصر به صورة خلفية. بعبارة أخرى، تستند نسبة% 70 من نتائج LCP للصفحات
إلى أداء الصور. لا يتطلب الأمر الكثير من الخيال لمعرفة السبب: من المحتمل جدًا
أن يتم العثور على الصور والشعارات
الكبيرة والملفتة للانتباه في "الجزء المرئي من الصفحة".
هناك بعض الخطوات التي يمكنك اتّخاذها لتجنُّب حدوث تأخير في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP): أولاً، يجب عدم تحديد loading="lazy" مطلقًا على صورة في "الجزء المرئي من الصفحة" لأنّ تأخير الطلب إلى ما بعد عرض الصفحة سيكون له على الأرجح تأثير سلبي كبير في درجة سرعة عرض أكبر جزء من المحتوى على الصفحة.
ثانيًا، يمكن أن يؤدي استخدام fetchpriority="high" إلى إعلام المتصفّح بأنّه يجب إعطاء الأولوية لنقل هذه الصورة فوق الصور في أي مكان آخر في الصفحة.
مع وضع هذه القواعد في الاعتبار بشكل مباشر، إنّ أهم إجراء يمكنك تنفيذه لتحسين نتيجة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) للصفحة هو تقليل مقدار الوقت المستغرق لنقل تلك الصور وعرضها. ولإجراء ذلك، عليك إبقاء مصادر الصور صغيرة وفعّالة قدر الإمكان (بدون التضحية بجودتها بالطبع) وضمان حصول المستخدمين فقط على مواد عرض الصور الأكثر أهمية لسياقات التصفّح.
الخاتمة
تشكّل مواد عرض الصور أكبر استنزاف لنقل البيانات لدى المستخدمين، وهو معدّل نقل البيانات الذي يتم أخذه عن نقل كل مواد العرض الأخرى الضرورية لعرض الصفحة. تقدّم الصور مشاكل كبيرة من حيث الأداء الملحوظ، سواء أثناء عرض تخطيط الصفحة المحيطة أو بعده. باختصار: مواد عرض الصور تسبّب ضررًا.
قد يكون ذلك أمرًا شاقًا، في حين أن "الويب سيكون أفضل في حالة وجود عدد أقل من الصور" سيكون صحيحًا بالتأكيد من حيث الأداء فقط، إلا أنه سيضرّ مستخدميها أيضًا بشكل كبير. تشكّل الصور جزءًا أساسيًا من الويب، ويجب ألا تتنازل عن جودة المحتوى الهادف من أجل الأداء وحده.
في بقية هذه الدورة، ستتعرّف على التكنولوجيات التي تستند إليها مواد عرض الصور والتقنيات الخاصة بنا للتخفيف من آثارها على الأداء بدون المساس بالجودة.