الدروس المستفادة من استخدام سمة التحميل الموحدة
هدفي من خلال هذه المشاركة هو إقناع مطوّري منصات CMS والمساهمين فيها (أي الأشخاص الذين يطوّرون نواة نظام إدارة المحتوى) بأنّه حان الوقت الآن لتوفير ميزة "التحميل البطيء للصور" على مستوى المتصفّح. سأشارك أيضًا اقتراحات حول كيفية ضمان تجارب مستخدمين عالية الجودة والسماح للآخرين بالتطوير أثناء تنفيذ ميزة "التحميل البطيء". استندَنا في وضع هذه الإرشادات إلى تجربتنا في إضافة ميزة "الموافقة على المحتوى" إلى WordPress، بالإضافة إلى تجربتنا في مساعدة Joomla وDrupal وTYPO3 على تنفيذ هذه الميزة.
بغض النظر عمّا إذا كنت مطوّرًا لمنصّة نظام إدارة المحتوى أو مستخدمًا له (أي شخص ينشئ مواقع إلكترونية باستخدام نظام إدارة المحتوى)، يمكنك الاطّلاع على هذه المشاركة لمعرفة المزيد عن مزايا ميزة "التحميل البطيء" على مستوى المتصفّح في نظام إدارة المحتوى. اطّلِع على قسم الخطوات التالية للحصول على اقتراحات حول كيفية حثّ منصة نظام إدارة المحتوى على تنفيذ ميزة "التحميل البطيء".
الخلفية
على مدار العام الماضي،
أصبح تحميل الصور وإطارات iframe بشكل بطيء باستخدام سمة loading
جزءًا من معيار HTML في WHATWG
وشهد استخدامًا متزايدًا في المتصفحات المختلفة.
ومع ذلك، لا تضع هذه المعالم سوى الأساس لشبكة ويب أسرع وأكثر توفيرًا للموارد.
أصبح الآن على المنظومة المتكاملة للويب الموزّعة الاستفادة من السمة loading.
توفّر أنظمة إدارة المحتوى
الطاقة اللازمة لحوالي% 60 من المواقع الإلكترونية،
لذلك تلعب هذه المنصات دورًا حيويًا في توفير ميزات المتصفّحات الحديثة على الويب. بما أنّ بعض أنظمة إدارة المحتوى الرائجة ذات المصدر المفتوح، مثل
WordPress و
Joomla و
TYPO3، قد فعّلت استخدام سمة loading في الصور، لنلقِ نظرة على
الطرق التي اتّبعتها هذه الأنظمة والنقاط التي يمكن استخلاصها منها والتي ترتبط باعتماد هذه الميزة
في منصات أنظمة إدارة المحتوى الأخرى أيضًا. إنّ التحميل الكسول للوسائط هو أحد أهم ميزات أداء الويب التي يجب أن تستفيد منها المواقع الإلكترونية على نطاق واسع، ولهذا السبب يُنصح باستخدامه على مستوى نظام إدارة المحتوى الأساسي.
أهمية استخدام ميزة "التحميل الكسول" الآن
توحيد المقاييس
إنّ استخدام ميزات المتصفّح غير المُعَدَّلة في أنظمة إدارة المحتوى يسهّل اختبار الأداء على نطاق واسع ويمكن أن يُظهر مجالات محتملّة للتحسين. ومع ذلك، يُجمع الخبراء بشكل عام على أنّه طالما أنّ ميزة المتصفّح غير موحّدة، يُفضّل تنفيذها في شكل إضافة أو مكوّن إضافي للمنصة المعنية. لا يمكن النظر في استخدام ميزة في الأساس إلا بعد أن يتم توحيده.
دعم المتصفح
يُعدّ توفّر الميزة في المتصفّح مصدر قلق مماثل: من المفترض أن يتمكّن معظم مستخدمي نظام إدارة المحتوى (CMS) من الاستفادة من الميزة. إذا كانت هناك نسبة كبيرة من المتصفّحات لا تتيح استخدام الميزة بعد، يجب أن تضمن الميزة عدم حدوث أي تأثير سلبي على الأقل في هذه المتصفّحات.
حدود المسافة من إطار العرض
من المخاوف الشائعة بشأن عمليات تنفيذ التحميل البطيء أنّها تزيد من احتمال عدم تحميل الصورة بعد أن تصبح مرئية في إطار عرض المستخدم لأنّ دورة التحميل تبدأ في مرحلة لاحقة. على عكس الحلول السابقة المستندة إلى JavaScript، تتعامل المتصفّحات مع هذا الإجراء بحذر بالإضافة إلى ذلك، يمكنها تحسين نهجها استنادًا إلى بيانات تجربة المستخدم في العالم الواقعي، وتقليل التأثير، لذا من المفترض أن يكون من الآمن استخدام ميزة "التحميل البطيء" على مستوى المتصفّح من قِبل منصات إدارة المحتوى.
اقتراحات حول تجربة المستخدم
طلب سمات السمات على العناصر
لتجنّب تغييرات التنسيق، كان هناك اقتراح منذ فترة طويلة يقضي بأن يتضمّن المحتوى المضمّن، مثل الصور أو إطارات iframe، دائمًا سمتَي السمتَين width وheight،
كي يتمكّن المتصفّح من استنتاج نسبة العرض إلى الارتفاع لهذه العناصر قبل تحميلها. يكون هذا الاقتراح ذا صلة بغض النظر عمّا إذا كان يتم تحميل عنصر
بشكل بطيء أم لا. ومع ذلك، بسبب
احتمالية أكبر بنسبة% 0.1 لعدم تحميل الصورة بالكامل بعد ظهورها في مساحة العرض
، يصبح من الأسهل استخدام ميزة "التحميل البطيء".
من الأفضل أن تقدّم أنظمة إدارة المحتوى سمات الأبعاد في جميع الصور وإطارات iframe. وإذا لم يكن ذلك ممكنًا لكل عنصر من هذه العناصر، ننصحك بتخطّي الصور التي يتم تحميلها بشكل بطيء والتي لا تقدّم كلتا السمتَين.
تجنَّب استخدام ميزة "التحميل البطيء" للعناصر التي تظهر فوق مستوى الصفحة.
في الوقت الحالي، ننصحك بإضافة سمات loading="lazy" فقط إلى
الصور وإطارات iframe التي يتم وضعها أسفل الصفحة، لتجنّب تأخّر
في مقياس Largest Contentful Paint، والذي يمكن أن يكون في بعض الحالات
ملحوظًا كما تبيّن في تموز (يوليو) 2021. ومع ذلك، يجب
الاعتراف بأنّه من المعقّد تقييم موضع عنصر
بالنسبة إلى مساحة العرض قبل عملية العرض. ينطبق ذلك بشكل خاص
إذا كان نظام إدارة المحتوى يستخدِم نهجًا آليًا لإضافة سمات loading، ولكن حتى
استنادًا إلى التدخل اليدوي، يجب مراعاة العديد من العوامل، مثل أحجام مساحات العرض المختلفة
ونسَب العرض إلى الارتفاع. ومع ذلك، ننصحك بشدة بعدم تحميل صور "العنصر الرئيسي" والصور الأخرى أو إطارات iframe التي يُرجّح أن تظهر في الجزء المرئي من الصفحة باستخدام ميزة "التحميل المُتأخّر".
تجنُّب استخدام بديل JavaScript
على الرغم من أنّه يمكن استخدام JavaScript لتوفير ميزة "التحميل البطيء" للمتصفّحات التي لا تتوافق (حتى الآن) مع السمة loading،
تعتمد هذه الآليات دائمًا على إزالة السمة src في البداية من
الصورة أو عنصر iframe، ما يؤدي إلى تأخير في المتصفّحات التي تتوافق مع
السمة. بالإضافة إلى ذلك، يؤدي طرح حلّ مستند إلى JavaScript في
واجهات أنظمة إدارة المحتوى (CMS) على نطاق واسع إلى زيادة مساحة المشاكل المحتملة،
وهو ما يساهم في عدم اعتماد أيّ من أنظمة إدارة المحتوى الرئيسية على ميزة التحميل البطيء في الأساس قبل
توفّر ميزة المتصفّح الموحدة.
الاقتراحات الفنية
تفعيل ميزة "التحميل الكسول" تلقائيًا
إنّ الاقتراح العام لأنظمة إدارة المحتوى التي تُنفّذ ميزة "التحميل البطيء" على مستوى المتصفّح هو
تفعيلها تلقائيًا، أي أنّه يجب إضافة loading="lazy" إلى الصور و
إطارات iframe، ويُفضّل
استخدامها فقط مع العناصر التي تتضمّن سمات السمات.
سيؤدي تفعيل الميزة تلقائيًا إلى توفير موارد الشبكة بشكلٍ أكبر مقارنةً بتفعيلها يدويًا، على سبيل المثال، على أساس كل صورة.
يجب عدم إضافةloading="lazy" إلا إلى العناصر التي يُرجّح أن تظهر أسفل الصفحة.
على الرغم من أنّ تنفيذ هذا الشرط قد يكون معقّدًا في نظام إدارة المحتوى (CMS) بسبب عدم توفّر معلومات عن جانب العميل واختلاف أحجام مساحات العرض، يُنصح على الأقل باستخدام أساليب استقرائية تقريبية لحذف عناصر مثل صور المنتجات الرئيسية التي من المرجّح أن تظهر أعلى الصفحة من خلال التحميل غير المتزامن.
السماح بإجراء تعديلات لكل عنصر
على الرغم من أنّه يجب إضافة loading="lazy" إلى الصور وإطارات iframe تلقائيًا، من المهم السماح بحذف السمة من صور معيّنة، على سبيل المثال لتحسين LCP. إذا كان جمهور نظام إدارة المحتوى (CMS) على الصعيدين المتوسط والمتقدّم يُعتبر أكثر دراية بالتكنولوجيا، يمكن أن يكون هذا عنصر تحكّم في واجهة المستخدم معروضًا لكل ملف
صورة وإطار iframe يسمح بإيقاف ميزة "التحميل البطيء" لهذا العنصر.
بدلاً من ذلك أو بالإضافة إلى ذلك، يمكن إتاحة واجهة برمجة التطبيقات للمطوّرين التابعين لجهات خارجية
لكي يتمكّنوا من إجراء تغييرات مشابهة من خلال الرمز البرمجي.
على سبيل المثال، يسمح WordPress بتخطّي سمة loading سواءً ل
علامة HTML أو سياق كامل
أو ل
عنصر HTML محدّد في المحتوى.
إعادة استخدام المحتوى الحالي
بشكل عام، هناك طريقتان لإضافة السمة loading إلى عناصر HTML في نظام إدارة المحتوى:
- يمكنك إضافة السمة من داخل محرِّر المحتوى في الخلفية، مع حفظها باستمرار في قاعدة البيانات.
- أضِف السمة أثناء عرض المحتوى من قاعدة البيانات في الواجهة الأمامية.
ننصحك بأن يختار نظام إدارة المحتوى إضافة السمة أثناء التحميل لتوفير مزايا التحميل البطيء لأي محتوى حالي أيضًا. إذا كان من الممكن إضافة السمة فقط من خلال المحرّر، لن تستفيد سوى أجزاء المحتوى الجديدة أو التي تم تعديلها مؤخرًا من المزايا، ما يؤدي إلى خفض تأثير نظام إدارة المحتوى بشكل كبير في توفير موارد الشبكة. بالإضافة إلى ذلك، ستتيح إضافة السمة على الفور إجراء تعديلات مستقبلية بسهولة، في حال تم توسيع نطاق ميزات التحميل البطيء على مستوى المتصفّح.
من المفترض أن تؤدي إضافة السمة أثناء التشغيل إلى توفير سمة loading حالية على العنصر والسماح لها بالحصول على الأولوية. بهذه الطريقة، يمكن لخدمة إدارة المحتوى أو إحدى إضافاتها أيضًا تنفيذ الأسلوب المستنِد إلى المحرِّر بدون التسبب في تعارض مع السمات المكرّرة.
تحسين الأداء من جهة الخادم
عند إضافة سمة loading إلى المحتوى أثناء التنقل باستخدام (على سبيل المثال)
برنامج وسيط من جهة الخادم، يجب مراعاة السرعة. استنادًا إلى نظام إدارة المحتوى (CMS)، يمكن إضافة سمة
إما من خلال تنقّل DOM أو التعبيرات العادية، مع أنّه
يُنصح باستخدام التعبيرات العادية لتحسين الأداء.
يجب الحدّ من استخدام التعبيرات العادية، على سبيل المثال، استخدام تعبير عادي واحد
يجمع كل علامات img وiframe في المحتوى بما في ذلك
سماتها، ثم يضيف السمة loading إلى كل سلسلة علامات عند الاقتضاء. تذهب منصة WordPress مثلاً إلى أبعد من ذلك، إذ تتيح
استخدام تعبير عادي عام واحد لتنفيذ عمليات مختلفة على الفور على عناصر معيّنة،
وتعدّ إضافة loading="lazy" إحدى هذه العمليات، وذلك باستخدام تعبير عادي واحد
لتسهيل استخدام ميزات متعددة. بالإضافة إلى ذلك، يشكّل هذا النوع من التحسين
سببًا آخر لاقتراح استخدام ميزة "التحميل البطيء" في الأساس المتعلّق بنظام إدارة المحتوى بدلاً من
إضافة، لأنّها تسمح بتحسين الأداء بشكل أفضل من جهة الخادم.
الخطوات التالية
تحقّق ممّا إذا كان هناك طلب حالي لإضافة ميزة في نظام إدارة المحتوى (CMS) أو افتح طلبًا جديدًا إذا لم يكن هناك طلب حتى الآن. استخدِم إشارات إلى هذا المنشور حسب الحاجة لدعم اقتراحك.
يمكنك إرسال تغريدة إليّ (felixarntz@) إذا كانت لديك أسئلة أو ملاحظات، أو إذا أردت إدراج نظام إدارة المحتوى الخاص بك في هذه الصفحة في حال تمت إضافة ميزة الترجيع المُتأخّر على مستوى المتصفّح. إذا واجهت تحديات أخرى، يهمّنا معرفة المزيد عنها لحلّها.
إذا كنت مطوّرًا لمنصّة نظام إدارة المحتوى، اطّلِع على كيفية تنفيذ أنظمة إدارة المحتوى الأخرى لميزة loading:
يمكنك الاستفادة من الدروس المستخلصة من أبحاثك والاقتراحات الفنية من هذا المنشور لبدء المساهمة في رمز نظام إدارة المحتوى (CMS)، على سبيل المثال في شكل تصحيح أو طلب سحب.
الصورة الرئيسية مقدمة من كولين واتس على Unsplash.