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