تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Katie Hempenius

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

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

الأداء

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

سرعة عرض أكبر محتوى مرئي (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 التي قد تكون مفيدة لك:

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

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

قياس الأداء

يناقش هذا القسم قياس 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، كانت هذه الصور مستبعدة من المراجعة. بالنسبة إلى المواقع الإلكترونية التي تستخدم التشغيل التلقائي للوحات العرض الدوّارة، سيكون لهذا التغيير في التعريف تأثير محايد أو إيجابي في نتائج سرعة عرض أكبر محتوى مرئي.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كن موجزًا

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

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

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

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

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

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

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

الملاءمة

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