Ditch Your Image Carousels (Improve Your Site Speed & User Experience)

Are you aware that your carousel(s) are ignored by visitors, confuse people and significantly slow down the performance of your website?

 

– https://yoast.com/opinion-on-sliders/

Even when users click on a slide, it’s almost always the first slide.

ND.edu Feature Click-through Rates

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

Leave a reply

Your email address will not be published. Required fields are marked *