Why Sliders and Carousels Are Bad for Your Homepage

Tecnoacquisti.com
Optimization and Web Vitals

The following tutorial is partly a translation of the article Rethink Sliders And Carousels published by GTmetrix on March 31, 2022.

Do you use a slider or a carousel on your homepage? Despite their widespread use, this type of content is not an optimal solution for your website; let's see in this tutorial why.

"Potevamo stupirvi con effetti speciali..."

Image galleries or product/service carousels are ubiquitous on the internet as they represent an excellent visual feature for homepages; however, website and ecommerce owners who use them often overlook the negative impact on performance. In this tutorial, we will examine and explain why we recommend revising the strategy and giving up sliders and carousels. The 1980s TELEFUNKEN advertisement stated "We could amaze you with special effects..." today, the majority of sliders are inserted into websites without any purpose other than to fill some "gap" with something flashy.

Advantages of using sliders

First of all, let's examine some advantages of using an image or content slider on your website/ecommerce:

Show more key headlines on the homepage: for example, in an online newspaper, we can display the main news in a scrolling format.
Show more content on your homepage: scrolling content allows you to showcase more products/services in less space.
Add movement to the page: this solution is very popular among website owners who believe it captures the customer's attention.

These are very similar solutions; the second method is more commonly used in ecommerce to display sales promotions and new arrivals in a position where they are seen first upon entering the homepage. Of course, for this use to make sense, there must be an internal graphic designer or a service that compensates for the lack of one, responsible for creating the sliders and keeping them constantly updated. We will also see why it is just a myth that these contents capture customers' attention.

Why not use sliders then?

There are many disadvantages to using sliders, let's look at the most important ones:

1. Impact on performance

Well yes, a slider, regardless of the "weight" of the images, has a very negative impact on performance. This is the most serious disadvantage and the main reason why many like us are opposed to their use.

a. Why do they have such a big impact? More requests, more elements, and more scripts running.

Sliders and carousels require additional CSS and JavaScript code for their functionality, which results in an increase in requests needed to load the page (images, CSS, and JavaScript). More CSS requests usually lead to greater rendering blocking, which extends an important metric Web Vitals: Largest Contentful Paint (LCP) of your page. At the same time, JavaScript has an execution impact, all at the expense of the browser and the device visiting our site. This leads to excessive load on the main thread, impacting the page's TBT.

Thus, they generally impact two important metrics, namely LCP and TBT.

Some modules and plug-ins that allow the insertion of sliders in our ecommerce / website add further issues by repeatedly requesting images and, in addition to the time required for page loading, increase costs for visitors from mobile devices where connections are bandwidth-consuming. This problem affects Lighthouse, which is unable to determine the Time to Interactive (TTI) of the page, as some scripts continue to request images. This issue causes GTmetrix to fail the page analysis.

b. Heavy resource requests above-the-fold*

If you have a slider on your homepage as a focal point, it will have a negative impact on performance as your customer's/visitor's browser has to do a lot of work to render the various elements. The browser will need to load the CSS to determine the style, load the different images for display, and the JS to add dynamic functionalities, all in a key area of your page. All processing is done by the visitor's device, not your server, and is therefore subject to its performance. This leads to a higher LCP time.

For sliders full of animations, with multiple images and other special effects (such as those achievable with Slider Revolution), they can lead to a significant deterioration of the Largest Contentful Paint (LCP) metric, especially on mobile, as all processing is handled by the visitor's browser and the CPU and hardware resources of their Smartphone/Tablet.

*) Above the fold is the top part of the web page, visible immediately to the user without the need to use the scroll bar.

2. Are sliders really effective?

Even if you can accept the decline in performance and the failure to meet Web Vitals metrics (and you shouldn't), sliders, contrary to popular belief, are not the most effective method for displaying content. Let's see why:

a. Lack of engagement

Scrolling content offers practically minimal or no engagement after the first slide.

This data can be retrieved from the analysis of the statistics on the clicks received by the various slides. GTmetrix provides the example of the Notre Dame school website. Even when considering the first slides, studies show that users interact very little with the slides, as highlighted by the extremely low click percentages.

b. Lack of clarity and user frustration

More slides are not the best solution for showcasing promotions or important proposals. Too often we see sliders that contain too many messages, making it impossible to focus on the offer. Additionally, they can take control away from the visitor - especially when they are on autoplay - often the duration between the first slide and the next is too short for the visitor, and your message gets lost.

Too many messages and too little time between slides can cause users to completely ignore sliders. Sliders do not have a universal navigation structure (some use arrows, others use dots, some require scrolling, others lack navigation), which leads users to ignore them even when it is possible to navigate through them or stop them with the mouse.

C. Some visitors ignore the information presented in the banners.

Banner Blindness is a term used to describe the behavior of visitors who deliberately ignore the information present in banners as they are mistaken for advertisements (ads). Using a static image instead of a slider can convey your message more effectively.

D. Reduced accessibility

This is a very overlooked topic; with slides, accessibility can be reduced for some visitors. Depending on the type of module or plug-in used, the slides may move too quickly for visitors with low literacy, reduced mobility, or visual impairments.

A static image is more effective as the lack of movement does not create the same problems, and visitors can take their time to read and grasp the content presented at their own pace.

3.Problemi with mobile devices

All the issues related to the use of sliders on desktop are also present on mobile devices. Some problems, such as the impact on performance, can be even greater due to less powerful hardware and smaller screen sizes.

Additional problems arise if a responsive design is not followed; even when it is done, one is often forced to create two distinct sliders, increasing the work required for their production and maintenance. Resizing the images of the slides on mobile can make the text unreadable due to the small sizes.

4.Impatto on SEO

There are two main reasons why sliders can affect the SEO ranking of your ecommerce/website.

If the slider contains text that search engines cannot crawl.
The degradation of performance impacts Web Vitals metrics.

Google uses Web Vitals as one of many signals in its search engine ranking algorithm.

If your site's Web Vitals are not good enough, the search engine ranking may suffer, potentially leading to a decrease in site traffic and less engagement/conversions.

Conclusions

As we have seen, sliders are not an effective method for displaying content and our offers. Contrary to popular belief, statistical analyses and studies have shown that they do not engage users, who often have a poor browsing experience with them.

Given the disadvantages that sliders entail, it is necessary to think of alternatives. We agree with the analysis from GTmetrix; we have objectively supported the uselessness of sliders and the disadvantages of using them multiple times. The same opinion is shared by WP ROCKET, one of the best caching systems for WordPress.

GTmetrix offers additional articles to delve deeper into the topic, some in favor of sliders and some against.

In the specific case of an ecommerce site in PrestaShop or another platform, we advise against the use of slides and carousels, as their issues distract attention and reduce conversions. Moreover, an ecommerce system is already very complex to optimize for loading times and does not need additional JavaScript or CSS that could even conflict with those necessary for managing the cart.

Author: Loris Modena

Improve your e-commerce capabilities

Why sliders and carousels are a bad idea for your homepage?