Why not use the Sliders?

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 carousel on your homepage? Despite their widespread use, this type of content is not an optimal solution for your website, we see in this tutorial why.

"We could have surprised you with special effects ..."

Scrolling image galleries or product / service carousels are ubiquitous on the internet as they are a great visual feature for homepages, however, the owners of the websites and ecommerce who use them overlook the negative impact on performance. In this tutorial we will review and explain why we recommend reviewing your strategy and forgoing sliders and carousels. The TELEFUNKEN advertisement of the 80s read " We could surprise you with special effects ... " today most of the sliders are inserted in the web sites without any purpose other than to fill some "holes" with something of effect.

Points in favor of using the sliders

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

  1. Show more key headlines on the homepage : for example in an online newspaper we can show the main news scrolling.
  2. Show more content on your homepage : Scrolling content allows you to show more products / services in less space.
  3. Add movement to the page : this solution is very appreciated by website owners who believe they capture the customer's attention.

These are very similar solutions, the second mode is more used in ecommerce to show sales promotions and news , in a position where they are first seen by entering the homepage. Obviously, for this use to make sense there must be an internal graphic or a service that makes up for the lack that deals with creating the sliders and keeping them constantly updated. We will also see why it is only a myth to capture the attention of customers with this content.

So why not use the sliders?

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

1. Impact on performance

Yes, a slider, regardless of the "weight" of the images, has a very negative impact on performance. This is the most serious of the disadvantages and the main reason why many like us are against using them.

to. Why do they impact so much? More requests, more items and more scripts running.

Sliders worsen site performance in general - they usually extend LCP and TBT.

Sliders and carousels require additional CSS and JavaScript code for their functionality, this leads to an increase in requests required to load the page (images, CSS and JavaScript). More CSS requests usually result in higher render blocking, this extends an important Web Vitals : Largest Contentful Paint (LCP) metric of your page. At the same time, JavaScript has an execution impact and everything on the browser and device that visits our site. This leads to an excessive load of the main thread with an impact of the TBT of the page.

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

Total Blocking Time (TBT)

Some modules and plug-ins that allow you to insert sliders in our ecommerce / website, add further problems by repeatedly requesting images and, in addition to the time required to load the page, increase the costs for visitors from mobile devices where the connections they are bandwidth consumed. This problem affects Lighthouse being unable to determine the Time to Interactive (TTI) of the page, as some scripts continue to request images. The problem causes GTmetrix to fail to parse the page.

b. Heavy requests for above-the-fold resources *

If you have a slider on your homepage as a focal point, it will have a negative effect on performance as your customer / visitor's browser has to do a lot of work to make the various elements visible. The browser will have to load the CSS to determine the style, load the different images for display and the JS to add the dynamic functionality, and all in a key area of your page. All processing is the responsibility of the visitor's device not of your server and therefore susceptible to the performance of the same. 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 worsening of the Largest Contentful Paint (LCP) metric especially in mobile since the processing is entirely the responsibility of the browser to visit and of the CPU and HW resources of your Smartphone / Tablet.

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

2. Are the Sliders really effective?

While you can accept the performance decay and failure to meet Web Vitals metrics (and you shouldn't), sliders, contrary to popular belief, aren't the most effective way to show content, let's see why:

to. Lack of involvement

Scrolling content offers virtually no or little engagement after the first slide.

Slider click through rate on the Notre Dame school website Source: Erik Runyon

This data can be retrieved from the analysis of the statistics on the clicks received from the various slides. GTmetrix takes the example of the Notre Dame school website. Even if you look at the first few slides, studies show that users interact very little with the slides, as evidenced by the extremely low click-through rates.

b. Lack of clarity and user frustration

Multiple slides are not the best solution for showing important promotions or proposals. Too often we see sliders that contain too many messages and it is not possible to focus the offer. In addition, they can take the visitor out of control - especially when they are auto-playing - often the duration between the first slide and the next is too short for the visitor and your message is lost.

Too many messages and too little time between slides can cause users to completely ignore the sliders. The sliders they do not have a universal navigation structure (some use arrows, others use dots, some require scrolling, others lack navigation), this leads users to ignore them even when it is possible to navigate between 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 in the banners as they are mistaken for advertisements (ads). Using a static image instead of a slider is able to convey your message more effectively.

D. Reduced accessibility

This is a very neglected topic, with the slides you can reduce the accessibility to some visitors, depending on the type of module or plug-in used, the slides could move too fast for visitors with low literacy, reduced mobility or visually impaired.

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

3. Problems with mobile devices

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

Slider images with text embedded may render the text illegible on mobile screens.

Additional problems are added if you do not follow a responsive design, even if you do so you are often forced to create two distinct sliders, increasing the work necessary for the production and maintenance of the same. Resizing slide images in mobile can make the text unreadable due to the small size.

4.Impact on SEO

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

  • If the slider contains text, search engines cannot crawl it .
  • Performance degradation impacts Viltas web metrics.

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

If your site's Web Vitals aren't good enough, your search engine rankings may suffer, resulting in a potential reduction in site traffic and less engagement / conversions.

Conclusions

As we have seen, the sliders are not an effective method to show the contents and our offers. Contrary to popular belief, statistical analyzes and studies on them have shown that they do not involve the user who often has a bad browsing experience from them.

Given the disadvantages that the sliders entail, it is necessary to think of alternatives. We agree with the GTmetrix analysis several times we have objectively argued the uselessness of the same and the disadvantage of using them. Of the same opinion also WP ROCKET one of the best Cache systems for WordPress.

GTmetrix proposes further articles to deepen the subject, some in favor of the sliders to some against.

In the specific case of an ecommerce in PrestaShop or other platform, we do not recommend the use of slides and carousels, as the problems of the same divert attention and reduce conversions, not least an ecommerce system is already very complex to optimize in the times of loading and does not require additional JavaScript or CSS which could even conflict with those needed for cart management.

Author: Loris Modena

SENIOR DEVELOPER

Per Ind Loris Modena , owner of Arte e Informatica , he began working in the IT sector in 1989 as a system engineer in charge of the maintenance and installation of IT systems. He started programming for the web in 1997 dealing with CGI programming in PERL and then moving on to programming in PHP and JavaScript. In this period he approaches the Open source world and the management of Linux servers.

Product added to wishlist