كما هي الحال الآن، تمثّل الصور أكبر مواد العرض على الويب من حيث إجمالي حجم النقل. وعدد الطلبات لكل صفحة. متوسط حجم النقل الإجمالي لصفحة الويب يساوي تقريبًا 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) الوقت المستغرَق لعرض أكبر عنصر "محتوى" مرئي في إطار عرض المستخدم، وهو المحتوى الذي يشغل أكبر نسبة مئوية من الصفحة المرئية. قد يبدو أنه مقياس محدد للغاية على السطح، لكن يعمل كخادم وكيل عملي للنقطة التي يتم فيها عرض معظم الصفحة، من منظور المستخدم. إنّ سرعة عرض أكبر محتوى مرئي لقياس الأداء (الملاحظ).
يمكن أن تكون مقاييس مثل DOMContentLoaded أو حدث window.onload مفيدة لتحديد وقت تحميل الصفحة الحالية.
قد اكتملت من الناحية التقنية، ولكنها لا تتوافق بالضرورة مع تجربة المستخدم في الصفحة. تأخير بسيط في عرض أحد العناصر
خارج إطار عرض المستخدم، من الممكن أن يتم تضمينها في أي من هذين المقياسين، ولكن من المحتمل ألا يكتشفها المستخدم الحقيقي على الإطلاق.
يشير مقياس LCP الطويل إلى أنّ الانطباع الأول لدى المستخدم عن الصفحة - وهو المحتوى الأهم داخل إطار العرض الحالي - هو أن الصفحة بطيئة،
أو تقسيمها بشكل مباشر.
إنّ تصور المستخدم الذي يسجّله مقياس LCP له تأثير مباشر في تجربة المستخدم. تجربة أجرتها شركة Vodafone العام الماضي أنّ التحسُّن بنسبة 31% في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) لم يؤدِّ فقط إلى زيادة بنسبة% 8 في المبيعات، وهي نتيجة قوية في حد ذاتها، بل أدّت إلى زيادة بنسبة %15 أيضًا في إجمالي عدد المستخدمين. تحسُّن في عدد الزوّار الذين أصبحوا عملاء محتملين ("معدل الزيارات إلى العملاء المحتملين") وتحسُّن بنسبة 11% في عدد المستخدمين الذين زاروا عربة التسوق الخاصة بهم ("معدل الزيارات إلى سلة التسوق").
في أكثر من 70% من صفحات الويب، يكون العنصر الأكبر في البداية
يتضمّن إطار العرض صورة، إما كعنصر <img> مستقل أو عنصر ذو صورة خلفية. أو بعبارةٍ أخرى،
70% من الصفحات تستند نتائج سرعة عرض أكبر محتوى مرئي (LCP) إلى أداء الصور. لا يتطلب الأمر الكثير من الخيال لمعرفة السبب: كبير، ملفت للانتباه
والصور والشعارات غالبًا ما توجد في "الجزء المرئي من الصفحة".
هناك بعض الخطوات التي يمكنك اتّخاذها لتجنُّب تأخيرات سرعة عرض أكبر محتوى مرئي: أولاً، يجب عدم تحديد loading="lazy" مطلقًا في "الجزء المرئي من الصفحة". أو صورة
لأنّ تأخير الطلب إلى ما بعد عرض الصفحة سيكون له على الأرجح تأثير سلبي كبير في نتيجة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
ثانيًا، يمكن أن يؤدي استخدام ميزة fetchpriority="high" إلى إعلام المتصفّح بأنّه يجب إعطاء الأولوية لنقل هذه الصورة فوق الصور في أي مكان آخر على الصفحة.
مع وضع هذه القواعد في الاعتبار بشكل صحيح، فإنّ أهم إجراء يمكنك تنفيذه لتحسين نتيجة سرعة عرض أكبر محتوى مرئي (LCP) للصفحة هو تقليل الوقت. ما يتطلبه الأمر لنقل تلك الصور وعرضها. ولإجراء ذلك، عليك إبقاء مصادر الصور صغيرة وفعّالة ممكن (بدون التضحية بجودتها بالطبع) والتأكّد من حصول المستخدمين على مواد عرض الصور التي تحقّق أكبر استفادة ذات صلة بسياقات التصفح لديهم.
الخاتمة
مواد عرض الصور هي أكبر مصدر استنزاف لدى المستخدمين معدل نقل البيانات - معدل نقل البيانات المستخرج من نقل كل الأصول الأخرى اللازمة لعرض صفحة. تقدّم الصور مشاكل كبيرة من حيث الأداء الملحوظ، سواء أثناء عرض الصفحة المحيطة أو بعدها. تم عرض تصميمه. باختصار، مواد عرض الصور تلحق الضرر.
قد يكون ذلك شاقًا، ولكن "قد يكون الويب أفضل من خلال استخدام عدد أقل من الصور" ستكون صحيحة بالتأكيد من حيث الأداء وحده، بل سيؤدي أيضًا إلى ضرر كبير لمستخدميه. تعد الصور جزءًا حيويًا من الويب، لذا يجب ألا تتنازل عن جودة المحتوى الهادف لتحقيق الأداء وحده.
في بقية هذه الدورة، ستتعرّف على التقنيات التي تستند إليها أصول الصور والتقنيات اللازمة للتخفيف من حدتها الأداء، دون المساس بالجودة.