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