الدروس المُستفادة من استخدام سمة التحميل الموحَّدة
هدفي من هذه المشاركة هو إقناع مطوّري المنصّات والمساهمين في "نظام إدارة المحتوى" (CMS) (أي الأشخاص الذين يطوّرون نوى نظام إدارة المحتوى) أن الوقت قد حان الآن لإتاحة ميزة "التحميل الكسول" للصور على مستوى المتصفّح. سأشارك أيضًا اقتراحات حول كيفية تقديم تجارب عالية الجودة للمستخدم وتفعيل التخصيص من خلال مطوّرين آخرين أثناء تنفيذ طريقة "التحميل الكسول". تستند هذه الإرشادات إلى خبرتنا في إضافة دعم إلى WordPress، بالإضافة إلى مساعدة Joomla و Drupal وTYPO3 في تنفيذ هذه الميزة.
بغض النظر عما إذا كنت مطوّر نظام إدارة محتوى أو مستخدم نظام إدارة المحتوى (أي الشخص الذي ينشئ مواقع إلكترونية باستخدام نظام إدارة المحتوى)، يمكنك استخدام هذه المشاركة للحصول على مزيد من المعلومات حول مزايا التحميل الكسول على مستوى المتصفح في نظام إدارة المحتوى. راجِع قسم الخطوات التالية للحصول على اقتراحات حول كيفية تشجيع منصة نظام إدارة المحتوى على تنفيذ طريقة "التحميل الكسول".
الخلفية
على مدار العام الماضي، أصبحت
الصور الكسولة التحميل وإطارات iframe التي تستخدم السمة loading
جزءًا من معيار HTML الخاص بـ whatWG
وشهدت عمليات استخدام متزايدة من قِبل متصفّحات مختلفة.
ومع ذلك، فإنّ هذه المعالم الرئيسية لا تضع الأساس سوى
لتقديم شبكة الإنترنت بشكل أسرع وأكثر توفيرًا للموارد.
وهي الآن في المنظومة المتكاملة للويب الموزَّعة للاستفادة من السمة loading.
إنّ أنظمة إدارة المحتوى
تشترك حوالي 60% من المواقع الإلكترونية،
لذلك تلعب هذه المنصات دورًا حيويًا في إتاحة الميزات الحديثة للمتصفّح
على الويب. مع بعض أنظمة إدارة المحتوى الرائجة المفتوحة المصدر، مثل WordPress وJoomla وTYPO3 التي سبق أن أتاحت السمة loading في الصور، لنلقي نظرة على الأساليب والنقاط الرئيسية ذات الصلة باستخدام هذه الميزة في منصات أنظمة إدارة المحتوى الأخرى أيضًا. تُعدّ وسائط التحميل الكسول ميزة أساسية لأداء الويب يجب أن تستفيد منها المواقع الإلكترونية على نطاق واسع، لذلك ننصح باستخدامها على المستوى الأساسي في نظام إدارة المحتوى (CMS).
حالة تنفيذ طريقة "التحميل الكسول" الآن
توحيد المقاييس
يؤدّي استخدام ميزات المتصفّح غير الموحّدة في أنظمة إدارة المحتوى إلى تسهيل إجراء الاختبارات على نطاق واسع وقد تظهر مجالات تحسين محتملة. مع ذلك، هناك إجماع عام على أنظمة إدارة المحتوى (CMS) هو أنّه ما دامت ميزة المتصفّح غير موحّدة، يُفضَّل تنفيذها على شكل إضافة أو مكوّن إضافي للنظام الأساسي المعنيّ. لا يمكن النظر في استخدام ميزة ما إلا مرة واحدة فقط في النظام الأساسي الأساسي.
المتصفحات المتوافقة
يمكن أيضًا لغالبية مستخدمي نظام إدارة المحتوى الاستفادة من هذه الميزة بالنسبة إلى المتصفّح. إذا كانت هناك نسبة مئوية كبيرة من المتصفّحات التي لا تتوفّر فيها الميزة بعد، يجب أن تضمن هذه الميزة على الأقل ألّا يكون لها أي تأثير سلبي على الأقل بالنسبة إليها.
حدود المسافة من إطار العرض
من المخاوف الشائعة المتعلّقة بعمليات "التحميل الكسول" أنّها تزيد من حيث المبدأ احتمالية عدم تحميل صورة بعد ظهورها في إطار عرض المستخدم، وذلك لأنّ دورة التحميل تبدأ في مرحلة لاحقة. وعلى عكس الحلول السابقة المستندة إلى 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. إذا كان الجمهور الذي يستخدم نظام إدارة المحتوى (CMS) خبيرًا في التكنولوجيا، يمكن أن يتم عرض عنصر تحكّم في واجهة المستخدم لكل صورة وإطار iframe، ما يتيح إيقاف ميزة "التحميل الكسول" لهذا العنصر.
يمكن بدلاً من ذلك أو بالإضافة إلى ذلك، عرض واجهة برمجة التطبيقات للمطوّرين من جهات خارجية
ليتمكّنوا من إجراء تغييرات مماثلة من خلال الرمز البرمجي.
على سبيل المثال، يتيح WordPress تخطّي السمة loading إما لعلامة HTML كاملة أو للسياق أو لعنصر HTML محدّد في المحتوى.
تعديل المحتوى الحالي
على المستوى العام، تتوفر طريقتان لإضافة سمة loading إلى عناصر HTML في "نظام إدارة المحتوى" (CMS):
- أضف السمة من داخل محرر المحتوى في الخلفية، وتحفظها باستمرار في قاعدة البيانات.
- أضف السمة بسرعة عند عرض المحتوى من قاعدة البيانات في الواجهة الأمامية.
ننصح "نظام إدارة المحتوى" (CMS) باختيار إضافة السمة فورًا عند العرض للاستفادة من مزايا التحميل الكسول في أي محتوى حالي أيضًا. إذا كان من الممكن إضافة السمة من خلال المحرّر فقط، ستحصل على أجزاء جديدة من المحتوى فقط أو تم تعديلها مؤخرًا الاستفادة من المزايا، ما يقلّل بشكل كبير من تأثير نظام إدارة المحتوى في توفير موارد الشبكة. علاوةً على ذلك، ستتيح إضافة السمة بسرعة إجراء تعديلات مستقبلية بسهولة، في حال وسّعت إمكانات التحميل الكسول على مستوى المتصفّح بشكل أكبر.
من خلال إضافة السمة بشكل فوري، يجب منح الأولوية للسمة loading التي يُحتمل أن تكون متوفّرة في العنصر. وبهذه الطريقة، يمكن أيضًا لنظام إدارة المحتوى أو إضافة تابعة له تنفيذ
النهج المستند إلى المحررين بدون التسبب في تعارض مع السمات المكررة.
تحسين الأداء من جهة الخادم
عند إضافة السمة loading إلى المحتوى بسرعة باستخدام (على سبيل المثال) برمجيات وسيطة من جهة الخادم، تُعدّ السرعة عاملاً مهمًا. واعتمادًا على نظام إدارة المحتوى، يمكن إضافة السمة إما عبر اجتياز DOM أو التعبيرات العادية، مع التوصية باستخدام السمة الأخيرة لتحسين الأداء.
ويجب الحدّ الأدنى من استخدام التعبيرات العادية، على سبيل المثال، التعبير العادي الواحد الذي يجمع كل علامات img وiframe في المحتوى، بما في ذلك سماتهما، ثم يضيف السمة loading إلى كل سلسلة علامة حسب الاقتضاء. على سبيل المثال، يستعرض WordPress تعبيرًا عاديًا واحدًا لإجراء العديد من العمليات السريعة على عناصر معيّنة، ومن بينها إضافة loading="lazy" تعبير واحد عادي لتسهيل استخدام العديد من الميزات. هذا النوع من التحسين هو أيضًا سبب آخر يستحسن استخدام طريقة "التحميل الكسول" في خدمة "نظام إدارة المحتوى" الأساسية بدلاً من إحدى الإضافات، إذ يتيح تحسين الأداء من جهة الخادم بشكل أفضل.
الخطوات التالية
تحقَّق مما إذا كان هناك طلب دعم حالي يتيح استخدام الميزة في نظام إدارة المحتوى، أو افتح طلبًا جديدًا في حال عدم توفّره بعد. استخدم المراجع لهذه المنشور حسب الحاجة لدعم اقتراحك.
يمكنك إرسال تغريدات لي (felixarntz@) إذا كانت لديك أي أسئلة أو تعليقات، أو لإدراج نظام إدارة المحتوى الخاص بك في هذه الصفحة في حال توفّر ميزة "التحميل الكسول" على مستوى المتصفّح. إذا واجهت تحديات أخرى، فأنا أيضا شغوف بمعرفة المزيد عنها لإيجاد حل.
إذا كنت مطوّرًا لمنصة نظام إدارة محتوى (CMS)، يمكنك دراسة كيف طبّقت أنظمة إدارة المحتوى الأخرى طريقة "التحميل الكسول":
يمكنك الاستفادة من الدروس المستفادة من بحثك والاقتراحات الفنية الواردة من هذه المشاركة لبدء المساهمة بالرموز البرمجية في نظام إدارة المحتوى، على سبيل المثال، على شكل تصحيح أو طلب سحب.
صورة رئيسية من إعداد كولين واتس على موقع Unسباش