Are you aware that your carousel(s) are ignored by visitors, confuse people and significantly slow down the performance of your website?
- Only 1% of the people actually click on a slide, which almost always was the first slide;
- Sliders confuse people, as you’re sending multiple offers they may or may not be interested in at once;
- People simply ignore your slider, because it triggers banner blindness;
- On that same note, visitors just don’t get the message because they will skip the messages in your slider as they consider it advertisement or promotions;
- They slow down your site, negatively impacting your SEO and conversion rate;
- Sliders don’t always work well on mobile devices;
- They push down your content, which is not smart, as Google already mentioned in 2012;
- It’s most probably as effective to use just one image instead of putting all that effort in slider plugins and images.
– https://yoast.com/opinion-on-sliders/
Even when users click on a slide, it’s almost always the first slide.
https://erikrunyon.com/2013/07/carousel-interaction-stats/
Based on this information, what is the point of having multiple slides in a carousel? (especially considering the previously mentioned downsides) Just use a single static image!
Still Not Convinced?
Not convinced that you shouldn’t use a carousel?
http://shouldiuseacarousel.com/
What If I HAVE To Keep a Carousel?
If you absolutely must have a carousel, there are a few things you can do to reduce the negative impacts to your website’s performance.
ALWAYS Optimize The Images
When you have a carousel you are loading a lot of additional images which are generally large. The very least you can do is optimize them to be as small as possible.
There is a lot to understand about pixel density and image formats to do a good job at image optimization (Image Optimization by Ilya Grigorik) but there are some practical image optimization guides that are useful for those of us that don’t have 20 years of experience working with image formats.
Pure CSS implementation
If you don’t require all the bells and whistles from a JavaScript based carousel you should implement a pure CSS carousel that will have less impact on the performance of your website.
https://medium.com/@_jh3y/how-to-pure-css-carousel-ce1a8cb231c8
Lazy Load Images
Since the images in a carousel are large and may not be seen initially, you can improve the perceived performance of your website by lazy loading the images.
slick
The slick carousel supports several different methods of lazy loading.
- ‘ondemand’ will load the image as soon as you slide to it
- ‘progressive’ loads one image after the other when the page loads.
http://kenwheeler.github.io/slick/
Lazy carousel in bootstrap
A very simple way to support a lazy loading carousel in bootstrap: https://coderwall.com/p/6qaeya/lazy-carousel-in-bootstrapw
