Sliders or Carousels are a typical resource. So typical that, in fact, we generally find them on the home page of a website, above everything. They are that window through which images parade, almost always accompanied by text. The images are usually five or six, they change by themselves after a stipulated time, but if we click on them we will jump to a particular section of the website. In this note we want to show the B side of this resource: the disadvantages of using sliders both in SEO and in the performance (speed) of your site. Do not worry that towards the end we will propose more friendly alternatives with the internet, and with your audience.
Why do sliders slow down your site?
The short answer: they need more programming code; sometimes too for your function. In addition, they load usually very heavy images and its particular method (blocking the loading of the rest of the content). Quality photos that make your site beautiful, yes, but also slow as a turtle.
The 'little program' that is your image/animation carousel always involves extra style sheets (CSS) and additional JavaScript. Therefore, we are talking about a greater number of requests to the server, heavier pages and, in addition, a site that needs more time to finish displaying on the screen. You may use a cache builder like wp rocket to make everything faster, but these components can't do much magic with Sliders and we'll explain why later.
By now I think we all know that Google ranks websites to determine their placement in search results. We have updated this information in our note Core Web Vitals, where we shed light on the importance of the load and its result in the ranking. In fact, it is an excellent note to complement this one. You will understand better the following line:
Sliders or carousels affect Google measurements called LCP (Largest Contentful Page), IDF (First Input Delay), Y CLS (Cumulative Layout Shift). I insist: read our updated report on the Google metrics when positioning sites To understand these crucial variables.
From Slider Revolution to Nivo, via Smart Slider 3, Layer Slider and Soliloquy, the exact average slowdown is a minimum additional second and in the best of cases. These components add up to no less than half mega of weight to the page where they are running, not counting the images themselves.
Set of Negative Practices
The sliders are practically always located in the top of page. In fact, all animation such as texts that come and go, turn on and off but are not necessarily sliders, occupy the same place. As a result, the important content of our site is located below these animated resources. In other words, sliders and other related resources not only do not help with conversions, but they also scroll down the vital content. Unless our brand relies heavily on image, we are making a mistake.
Hand in hand with these negative practices for SEO and performance, we also included something unusual: loading animations. They are not so common but they are: a bar that fills up while the actual content loads, or a little circle that rotates on the spot, similar to a timer. These preload resources are lousy for the UX, in addition to slowing down the site just by their existence and the code they need to work.
Why add elements and lines of programming to the load when what we really need is to make the load as fast as possible? It's the same as trying to get a postman to deliver the mail faster by loading more envelopes. Impossible.
But I use WP Rocket/ LiteSpeed/ x caching program to balance my sliders!
Having cache building program is the difference between good and bad, it's true. But beware: the efforts for cache plugins are placed (among other things) in delay the loading of all content that is not relevant and/or that is not displayed at the top of the page. So the javascript delay function which greatly improves Web Vitals /Gmetrix /etc scores is a double edged sword when it comes to carousels.
Why? because the goal is delay downloading lines of java code until the user interacts with the site. By interaction we mean both a click and the displacement of the content (scrolling). But when our site has a slider at the beginning of a section, it is the content of the carousel itself that is slowed down until the interaction is detected. Thus, the initial rendering of the page that Google rewards so much loses a lot of speed.
Sliders and SEO
Following the new Web Vitals metrics, dealing with the loading optimization of our content in WordPress has become an excellent tool to position, today more than ever. Added to this is the order and discipline of our content. For example, the headers. Sliders, for design reasons, use H1 tags in their animations. Therefore, noise is produced between what should be the true header of our content and what a carousel says it is. Result: multiple H1, H2… How can Google know where the accent is located in our texts?
To make matters worse, Google measures with absolute precision the ease of interaction that a visitor has with the elements of our site. This is mainly where a slider causes a kind of interruption: they are confusing. Images that scroll cyclically do not allow setting any link priority. What is supposed to happen next? Where does the user click? Over an image, a link in the text, a “previous/next frame” arrow? That the sliders allow keyboard commands and functions for reading viewers does not contribute to clarity. And all this negatively influences your SEO.
Sliders and Conversion Rates
Did you know that only 1% of visits to a site click on a slider?
Statistics don't lie. So, given the little interaction that carousels generate, it is a very ineffective visual resource when it comes to selling. for worse, the slides or images that follow the first one in the carousel are rarely seen: either the user immediately scrolls to see the lower content, or our eye has become accustomed to decoding the sliders as simple advertisements. Something to Dodge. Be that as it may, your marketing message is not even seen by your users.
The bottom line is that if the goal of your website is to get conversions, it will be more effective to improve loading time than to make the “world's most attractive and fastest slider”. Then, do not use sliders; instead, work on user interaction with our content in a more controlled and harmonious way.
Recommended alternatives to the old slider
To start, a single static image: the one that counts. The bulk of our institutional image or essence. Or a seasonal product/service. Or a novelty, an announcement, an inauguration, or anniversary. But the key word isone“.
You need more? Perfect: we can always resort to a image gallery. Even with controls, but manual. Example: Three photos are displayed, side by side. If a user wants to see more images, they can use the arrows to "turn the page". But you are interacting with honest, real interest. He's in control. Perhaps again we are resorting to a somewhat controversial element when it comes to multi-device usability, but it is much better than a similar slider or animation box. Try it and then tell me.
Leave a Reply