أفضل ممارسات لوحات العرض الدوّارة

تحسين لوحات العرض الدوّارة لتحسين الأداء وسهولة الاستخدام

Katie Hempenius

لوحة العرض الدوّارة هي مكوّن لتجربة المستخدم يعرض المحتوى بطريقة تشبه عرض الشرائح. يمكن تشغيل لوحات العرض الدوّارة "تلقائيًا" أو يمكن للمستخدمين التنقّل فيها يدويًا. على الرغم من أنّه يمكن استخدام العروض الدوارة في أماكن أخرى، إلا أنّه يتم استخدامها غالبًا لعرض الصور والمنتجات والعروض الترويجية على الصفحات الرئيسية.

تتناول هذه المقالة أفضل الممارسات المتعلّقة بالأداء وتجربة المستخدم في لوحات العرض الدوّارة.

الأداء

من المفترض أن يكون لعرض الإعلانات الدوّارة المنفَّذ جيدًا تأثير ضئيل جدًا أو بدون أثر على الأداء. ومع ذلك، غالبًا ما تحتوي لوحات العرض الدوّارة على مواد عرض وسائط كبيرة. يمكن أن تؤثّر مواد العرض الكبيرة في الأداء بغض النظر عمّا إذا كانت معروضة في منصّة عرض بعناصر متغيّرة أو في مكان آخر.

• سرعة عرض أكبر محتوى مرئي (LCP)

  غالبًا ما تحتوي لوحات العرض الدوّارة الكبيرة التي تظهر أعلى الصفحة على عنصر LCP للصفحة، وبالتالي يمكن أن يكون لها تأثير كبير في LCP. في هذه السيناريوهات، قد يؤدي تحسين لوحة العرض الدوّارة إلى تحسين LCP بشكل كبير. للحصول على شرح مفصّل حول آلية عمل قياس LCP على الصفحات التي تحتوي على لوحات عرض دوّارة، يُرجى الاطّلاع على القسم قياس LCP للوحات العرض الدوّارة.

• مدى استجابة الصفحة لتفاعلات المستخدم (INP)

  تتطلّب لوحات العرض الدوّارة الحد الأدنى من متطلّبات JavaScript، وبالتالي من المفترض ألا تؤثر في سرعة استجابة الصفحة. إذا تبيّن لك أنّ لوحة العرض الدوّارة لموقعك الإلكتروني تحتوي على نصوص برمجية تستغرق وقتًا طويلاً في التنفيذ، ننصحك باستبدال أدوات لوحة العرض الدوّارة.

• متغيّرات التصميم التراكمية (CLS)

  يستخدم عدد كبير من لوحات العرض الدوّارة صورًا متحركة غير مركّبة وبجودة رديئة يمكن أن تساهم في زيادة متغيّرات التصميم التراكمية (CLS). في الصفحات التي تتضمّن لوحات عرض دوّارة يتم تشغيلها تلقائيًا، قد يؤدي ذلك إلى زيادة مفاجئة في قيمة مقياس CLS. لا يكون هذا النوع من أخطاء CLS عادةً واضحًا للعين البشرية، ما يسهّل تجاهل المشكلة. لتجنُّب هذه الصعوبة، تجنَّب استخدام الصور المتحركة غير المركّبة في لوحة العرض الدوّارة (على سبيل المثال، أثناء انتقالات الشرائح).

أفضل الممارسات المتعلّقة بالأداء

تحميل محتوى العرض الدوّار باستخدام HTML

يجب تحميل محتوى لوحة العرض الدوّارة من خلال ترميز HTML للصفحة لكي يتمكّن المتصفّح من رصده في وقت مبكر من عملية تحميل الصفحة. إنّ استخدام JavaScript لبدء تحميل محتوى لوحة العرض الدوّارة هو على الأرجح أكبر خطأ يؤدي إلى خفض الأداء ويجب تجنّبه عند استخدام لوحات العرض الدوّارة. يؤدّي ذلك إلى تأخير تحميل الصور وي يمكن أن يؤثر سلبًا في LCP.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

لتحسين لوحة العرض الدوّارة المتقدّمة، ننصحك بتحميل الشريحة الأولى بشكل ثابت، ثم تحسينها تدريجيًا لتضمين عناصر التحكّم في التنقّل ومحتوى إضافيًا. تنطبق هذه التقنية على المحتوى الذي يجذب انتباه المستخدِم لفترة طويلة، ما يمنح المحتوى الإضافي الوقت الكافي للتحميل. في البيئات، مثل الصفحات الرئيسية التي قد يبقى فيها المستخدمون لمدّة ثانية أو ثانيتين فقط، قد يكون تحميل صورة واحدة فقط فعّالاً بالمثل.

تجنُّب متغيّرات التصميم

إنّ انتقالات الشرائح وعناصر التحكّم في التنقّل هما المصدران الأكثر شيوعًا ل تغيُّرات التصميم في لوحات العرض الدوّارة:

• عمليات انتقال الشرائح: تحدث عادةً تغييرات التصميم أثناء عمليات انتقال الشرائح نتيجة تعديل السمات التي تؤدي إلى تغيير التصميم في عناصر نموذج DOM. تشمل أمثلة بعض هذه السمات ما يلي: left وtop وwidth و marginTop. لتجنُّب تغييرات التصميم، استخدِم بدلاً من ذلك سمة CSS transform لنقل هذه العناصر. يوضّح هذا العرض التجريبي كيفية استخدام transform ل إنشاء لوحة عرض دوّارة أساسية.

• عناصر التحكّم في التنقّل: يمكن أن يؤدي نقل عناصر التحكّم في التنقّل في لوحة العرض الدوّارة أو إضافتها أو إزالتها من واجهة DOM إلى حدوث تغييرات في التصميم استنادًا إلى كيفية تنفيذ هذه التغييرات. وعادةً ما تُظهر منصات العرض الدوّارة هذا السلوك في استجابةً لمرّة تمرير مؤشر الماوس.

في ما يلي بعض النقاط الشائعة التي تثير الالتباس بشأن قياس CLS في carousels:

• لوحات العرض الدوّارة التي تعمل بالتشغيل التلقائي: إنّ انتقالات الشرائح هي المصدر الأكثر شيوعًا ل متغيّرات التصميم المرتبطة باللوحات الدوّارة. في لوحة العرض الدوّارة التي لا تعمل بالتشغيل التلقائي، تحدث عادةً هذه التغييرات في التنسيق خلال 500 ملي ثانية من تفاعل المستخدم، ولذلك لا يتم احتسابها في "مقياس التغيير التراكمي في التنسيق" (CLS). ومع ذلك، في لوحات العرض الدوّارة التي تعمل بالتشغيل التلقائي، لا يمكن أن تُحتسَب هذه التحولات في التنسيق فحسب ضمن مقياس CLS، بل يمكن أن تتكرّر أيضًا إلى أجل غير مسمى. وبالتالي، من المهم بشكلٍ خاص التأكّد من أنّ لوحة العرض الدوّارة للتشغيل التلقائي ليست مصدرًا لتغييرات التنسيق.

• الانتقال للأعلى أو للأسفل: تسمح بعض لوحات العرض الدوّارة للمستخدمين باستخدام الانتقال للأعلى أو للأسفل للتنقّل في شرائح لوحة العرض الدوّارة. إذا تغيّر موضع بداية عنصر مع تغيّر مقدار التمرير (أي scrollLeft أو scrollTop) بالمقدار نفسه (ولكن في الاتجاه المعاكس)، لا يُعدّ ذلك تغيُّرًا في تنسيق الصفحة شرط أن يحدثا في الإطار نفسه.

لمزيد من المعلومات عن تغيُّرات التنسيق، يُرجى الاطّلاع على مقالة تصحيح أخطاء تغيُّرات التنسيق.

استخدام التكنولوجيا الحديثة

تستخدم العديد من المواقع الإلكترونية مكتبات JavaScript التابعة لجهات خارجية ل تنفيذ لوحات العرض الدوّارة. إذا كنت تستخدِم حاليًا أدوات لوحة العرض الدوّارة القديمة، قد تتمكّن من تحسين الأداء من خلال التبديل إلى أدوات أحدث. تميل الأدوات الأحدث إلى استخدام واجهات برمجة تطبيقات أكثر فعالية، ومن غير المرجّح أن تتطلّب استخدام عناصر إضافية تتعلّق بالتطبيق، مثل jQuery.

ومع ذلك، استنادًا إلى نوع لوحة العرض الدوّارة التي تنشئها، قد لا تحتاج إلى استخدام JavaScript على الإطلاق. تتيح واجهة برمجة التطبيقات الجديدة Scroll Snap تنفيذ عمليات انتقال شبيهة بمنصّات العرض الدوّارة باستخدام HTML و CSS فقط.

في ما يلي بعض المراجع حول استخدام scroll-snap التي قد تكون مفيدة لك:

• إنشاء مكوّن "قصص" (web.dev)
• تصميم الويب من الجيل التالي: ميزة "التمرير السريع" (web.dev)
• منصّة عرض دوّارة تستخدم CSS فقط (CSS Tricks)
• كيفية إنشاء لوحة عرض دوّارة باستخدام CSS فقط (حيل CSS)

تحسين محتوى لوحة العرض الدوّارة

غالبًا ما تحتوي العروض الدوّارة على بعض أكبر الصور في الموقع الإلكتروني، لذا قد يكون من المفيد قضاء بعض الوقت للتأكّد من تحسين هذه الصور بالكامل. إنّ اختيار التنسيق المناسب للصورة ومستوى الضغط، واستخدام شبكة توصيل المحتوى (CDN) للصور، واستخدام srcset لعرض عدّة نُسخ من الصور هي كلّها أساليب يمكنها تقليل حجم نقل الصور.

قياس الأداء

يناقش هذا القسم قياس LCP في ما يتعلّق باللوحات الدوّارة. على الرغم من أنّه تتم معالجة العناصر الدوّارة بالطريقة نفسها التي تتم بها معالجة أي عنصر آخر لتجربة المستخدم أثناء احتساب LCP، إلا أنّ آلية احتساب LCP للعناصر الدوّارة التي يتم تشغيلها تلقائيًا هي نقطة التباس شائعة.

قياس LCP لللوحات الدوّارة

في ما يلي النقاط الرئيسية لفهم آلية احتساب LCP لللوحات الدوّارة:

• يأخذ مقياس LCP عناصر الصفحة في الاعتبار أثناء عرضها في الإطار. لا يتمّ بعد ذلك اعتبار المرشّحين الجدد لعنصر LCP بعد أن يتفاعل المستخدم (بالنقر أو الانتقال للأعلى أو للأسفل أو بالضغط على المفاتيح) مع الصفحة. وبالتالي، يمكن أن تكون أي شريحة في لوحة عرض دوار تتم إعادة تشغيلها تلقائيًا هي عنصر LCP النهائي، في حين أنّ الشريحة الأولى فقط هي المرشح المحتمل لعنصر LCP في لوحة العرض الدوار الثابتة.
• في حال عرض صورتَين متساويتين الحجم، سيتم اعتبار الصورة الأولى عنصر LCP. لا يتم تعديل عنصر LCP إلا عندما يكون العنصر المرشّح لمقياس LCP أكبر من عنصر LCP الحالي. وبالتالي، إذا كانت جميع عناصر لوحة العرض الدوّارة بحجمٍ متساوٍ، يجب أن يكون عنصر LCP هو أول صورة يتم عرضها.
• عند تقييم مرشّحي LCP، يأخذ مقياس LCP في الاعتبار "الحجم المرئي أو الحجم الأساسي، أيهما أصغر". وبالتالي، إذا كان عرض الإعلانات الدوّارة الذي يتم تشغيله تلقائيًا يعرض الصور بحجم ثابت، ولكنه يحتوي على صور بأحجام جوهرية مختلفة أصغر من حجم الشاشة، قد يتغيّر عنصر LCP عند عرض الشرائح الجديدة. في هذه الحالة، إذا تم عرض كل الصور بالحجم نفسه، سيتم اعتبار الصورة ذات الحجم الأساسي الأكبر عنصر LCP. للحفاظ على انخفاض مقياس LCP، يجب التأكّد من أنّ جميع العناصر في لوحة العرض الدوّارة التي تعمل تلقائيًا لها الحجم الأساسي نفسه.

تغييرات على احتساب مقياس LCP لللوحات الدوّارة في الإصدار 88 من Chrome

اعتبارًا من الإصدار Chrome 88، تُعتبر الصور التي تتم إزالتها لاحقًا من نموذج DOM على أنّها أكبر عمليات رسم للمحتوى المحتملة. قبل الإصدار 88 من Chrome، كان يتم استبعاد هذه الصور من الاعتبار. بالنسبة إلى المواقع الإلكترونية التي تستخدم لوحات العرض الدوّارة التي تعمل تلقائيًا، لن يؤثر تغيير التعريف هذا في نتائج LCP بشكل إيجابي أو سلبي.

تم إجراء هذا التغيير استجابةً لمحاولة الرصد التي تبيّن فيها أنّ العديد من المواقع الإلكترونية تُنفّذ عمليات انتقال لوحات العرض الدوّارة عن طريق إزالة الصورة المعروضة سابقًا من شجرة نموذج DOM. قبل الإصدار 88 من Chrome، كانت تتم إزالة العنصر السابق وتعديل LCP في كل مرة يتم فيها عرض شريحة جديدة. لا يؤثر هذا التغيير إلا في لوحات العرض الدوّارة التي يتم تشغيلها تلقائيًا، لأنّه من الناحية النظرية، لا يمكن أن تحدث عملية عرض أكبر محتوى محتمل إلا قبل أن يتفاعل المستخدِم مع الصفحة لأول مرة.

تغييرات على الحدود الدنيا في الإصدار 121 من Chrome

غيّر الإصدار 121 من Chrome سلوك الصور التي يتم التمرير فيها أفقيًا، مثل لوحات العرض الدوّارة. وتستخدم هذه الإعدادات الآن الحدود الدنيا نفسها المستخدَمة في الانتقال العمودي. وهذا يعني أنّه في حالة استخدام لوحة العرض الدوّارة، سيتم تحميل الصور قبل أن تظهر في مساحة العرض. وهذا يعني أنّه من غير المرجّح أن يلاحظ المستخدم تحميل الصورة، ولكن سيؤدي ذلك إلى زيادة عمليات التنزيل. استخدِم العرض التوضيحي لميزة "التحميل البطيء الأفقي" لمقارنة السلوك في Chrome مقارنةً بSafari وFirefox.

اعتبارات أخرى

يتناول هذا القسم أفضل الممارسات المتعلّقة بتجربة المستخدم والمنتجات التي يجب أخذها في الاعتبار عند تنفيذ لوحات العرض الدوّارة. يجب أن تساهم لوحات العرض الدوّارة في تحقيق أهداف نشاطك التجاري وعرض المحتوى بطريقة تسهّل التنقّل فيه وقراءته.

أفضل الممارسات المتعلّقة بالتنقّل

توفير عناصر تحكّم بارزة في التنقّل

يجب أن تكون عناصر التحكّم في التنقّل في لوحة العرض الدوّارة سهلة النقر عليها ومرئية بشكل كبير. إنّ هذا الإجراء نادرًا ما يتم تنفيذه بشكل جيد، فمعظم لوحات العرض الدوّارة تتضمّن عناصر تحكّم في التنقّل صغيرة وملحوظة. يُرجى العِلم أنّه نادرًا ما يكون لون واحد أو نمط واحد من عناصر التحكّم في التنقّل مناسبًا لجميع المواقف. على سبيل المثال، قد يكون من الصعب رؤية سهم ظاهر بوضوح على خلفية داكنة على خلفية فاتحة.

الإشارة إلى مستوى تقدّم التنقّل

يجب أن تقدّم عناصر التحكّم في التنقّل في لوحة العرض الدوّارة سياقًا حول إجمالي عدد العروض التقديمية ومستوى تقدّم المستخدِم في التنقّل بينها. تسهّل هذه المعلومات على المستخدِم الانتقال إلى شريحة معيّنة ومعرفة المحتوى الذي سبق له مشاهدته. في بعض الحالات، يمكن أن يكون تقديم معاينة للمحتوى القادم مفيداً أيضًا ويحسّن التفاعل، سواء كان ذلك من خلال مقتطف من الشريحة التالية أو قائمة بالصور المصغّرة.

إتاحة إيماءات الأجهزة الجوّالة

على الأجهزة الجوّالة، يجب أن تكون إيماءات التمرير السريع متاحة بالإضافة إلى عناصر التحكّم التقليدية في التنقل (مثل الأزرار على الشاشة).

توفير مسارات تنقّل بديلة

بما أنّه من غير المرجّح أن يتفاعل معظم المستخدِمين مع كل محتوى لوحة العرض الدوّارة، يجب أن يكون بإمكانهم الوصول إلى المحتوى الذي تؤدي شرائح لوحة العرض الدوّارة إلى عرضه من مسارات تنقّل أخرى.

أفضل الممارسات لتحسين سهولة القراءة

عدم استخدام ميزة "التشغيل التلقائي"

يؤدي استخدام ميزة التشغيل التلقائي إلى حدوث مشكلتَين متناقضتَين تقريبًا: تميل الرسوم المتحرّكة على الشاشة إلى تشتيت انتباه المستخدِمين وصرف أنظارهم عن المحتوى المهّم أكثر. وفي الوقت نفسه، سيتجاهل المستخدِمون لوحات العرض الدوّارة التي يتم تشغيلها تلقائيًا لأنّهم غالبًا ما يربطون الرسوم المتحرّكة بالإعلانات.

وبالتالي، نادرًا ما يكون التشغيل التلقائي خيارًا جيدًا. إذا كان المحتوى مهمًا، يؤدي عدم استخدام ميزة التشغيل التلقائي إلى زيادة مستوى عرضه إلى أقصى حدّ. وإذا لم يكن محتوى لوحة العرض مهمًا، يؤدي استخدام ميزة التشغيل التلقائي إلى تشتيت الانتباه عن المحتوى الأكثر أهمية. بالإضافة إلى ذلك، قد يكون من الصعب قراءة لوحات العرض الدوّارة التي تعمل تلقائيًا (وقد تكون مزعجة أيضًا). يقرأ المستخدمون المحتوى بسرعات مختلفة، لذا من النادر أن ينتقل لوحة العرض الدوّارة بشكلٍ ثابت في الوقت "الصحيح" للمستخدمين المختلفين.

من الأفضل أن يوجّه المستخدم عملية التنقّل بين الشرائح من خلال عناصر التحكّم في التنقّل. إذا كان عليك استخدام ميزة التشغيل التلقائي، يجب إيقافها عندما يمرّر المستخدم مؤشر الماوس فوق الفيديو. بالإضافة إلى ذلك، يجب أن يراعي معدل انتقال الشرائح محتوى الشريحة، فكلما زاد عدد النصوص التي تحتوي عليها الشريحة، يجب أن تبقى معروضة على الشاشة لفترة أطول.

فصل النصوص عن الصور

غالبًا ما يتم "دمج" محتوى النص في لوحة العرض الدوّارة في ملف الصورة المقابل، بدلاً من عرضه بشكل منفصل باستخدام ترميز HTML. هذه الطريقة سيئة لملف الترجمة والشرح، ومعدلات الترجمة والنشر، ومعدلات الضغط. وتشجع هذه الطريقة أيضًا على استخدام نهج واحد يناسب الجميع لإنشاء مواد العرض. ومع ذلك، نادرًا ما يكون تنسيق الصورة والنص نفسه قابلاً للقراءة بشكلٍ متساوٍ على تنسيقات أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة.

كن موجزًا

لديك جزء من الثانية فقط لجذب انتباه المستخدم. سيزيد استخدام نص قصير ومختصر من فرص وصول رسالتك إلى الجمهور.

أفضل الممارسات المتعلّقة بالمنتجات

تعمل لوحات العرض الدوّارة بشكل جيد في الحالات التي لا يكون فيها استخدام مساحة عمودية إضافية لعرض محتوى إضافي خيارًا. وغالبًا ما تكون منصات العرض الدوّارة على صفحات المنتجات مثالاً جيدًا على حالة الاستخدام هذه.

ومع ذلك، لا يتم استخدام لوحات العرض الدوّارة دائمًا بفعالية.

• إنّ المستخدمين يخلطون بسهولة بين لوحات العرض الدوّارة، خاصةً إذا كانت تحتوي على عروض ترويجية أو كانت تنتقل تلقائيًا، وإعلانات. يميل المستخدِمون إلى تجاهل الإعلانات، وهي ظاهرة تُعرف باسم عدم تمييز إعلانات البنر.
• غالبًا ما يتم استخدام العروض الدوّارة لإرضاء أقسام متعدّدة وتجنّب اتّخاذ قرارات بشأن أولويات النشاط التجاري. ونتيجةً لذلك، يمكن أن تصبح لوحات العرض الدوّارة بسهولة مكانًا لعرض المحتوى غير الفعّال.

اختبار افتراضاتك

يجب تقييم تأثير لوحات العرض الدوّارة في النشاط التجاري، لا سيما تلك المعروضة على الصفحات الرئيسية، واختبارها. يمكن أن تساعدك معدّلات النقر على لوحة العرض الدوّارة في تحديد ما إذا كان لوحة العرض الدوّارة ومحتوى لوحة العرض الدوّارة فعّالَين.

الملاءمة

تعمل لوحات العرض الدوّارة على أفضل نحو عندما تحتوي على محتوى مثير للاهتمام وذي صلة يتم تقديمه في سياق واضح. إذا لم يكن المحتوى يجذب المستخدم خارج لوحة العرض الدوّارة، لن يؤدي وضعه في لوحة العرض الدوّارة إلى تحسين أدائه. إذا كان عليك استخدام لوحة عرض دوّارة، امنح الأولوية للمحتوى وتأكَّد من أنّ كل شريحة مناسبة بدرجة كافية ليرغب المستخدم في النقر للانتقال إلى الشريحة التالية.