Skip to content

Latest commit

 

History

History
54 lines (36 loc) · 2.03 KB

BP_4030_en.md

File metadata and controls

54 lines (36 loc) · 2.03 KB
Raw

Avoid using carousels

Identifiers

GreenIT V2 V3 V4

Categories

Life cycle Tiers Responsible
2. Design User/Device UX/UI Designer

Indications

Priority Implementation difficulty Ecological impact
4 4 4
Saved resources
Processor / RAM / Storage / Network / Queries

Description

Carousels, that are often used to highlight multiple contents, quickly show limits in terms of conversion, which negatively impact user experience. Their presence implies several critical issues:

  • Increased page size due to the presence of dedicated CSS and JavaScript, as well as each carousel screen content.
  • Complexity in terms of web quality insurance and accessibility.
  • Greater use of processor resources in the case of automatic carousels.

Example

<img /> tags have an HTML loading attribute that natively allows progressive images loading. <img src="mon_image.webp" alt="" loading="lazy" />

Some CSS animations attributes involve browser repaint/reflow, requiring device resources use. Prefer carousel animations using CSS transform property to limit this.

Alternative solution

Limit the use of carousels as much as possible by prioritizing static content that is regularly updated. Otherwise:

  • Implement simple and complete components control (stop, next/previous screen)
  • Prefer progressive loading of images displayed on different screens.
  • Prefer animations involving processor resources.
  • Limit the number of screens in the carousel.

Validation rule

The number of ... is equal to or less than
screens in the carousel 3
carousels per page is 1