How Website Carousels Are Hurting Your Mobile Site

Speeding up mobile pages is a hot topic for all advertisers, especially since fast site speeds are crucial to a robust mobile advertising strategy. According to Google, 40% of users will bounce off a page if it does not load within three seconds. Faster loading times provide better user experiences, and the best way to speed up your mobile site to put it on a diet – or in other words, reduce the page weight.

Page weight is the overall size of your web page. You can consider these to be the “calories” that add “pounds,” or megabytes, to your page and slow its load time down. Images, fonts, and other site aspects all contribute to page weight, but there’s one popular culprit that has a particularly heavy impact: carousels.

Carousels: the King-sized Candy Bar of Mobile Page Weight

Carousels, or sliders, are banners that contain automatic, rotating images at the top of a web page. These images usually contain text overlays and are typically placed on a home page. They can be used for branding, to highlight promotions, or to display content.

Image via: http://prodigalsolutions.com/home-page-ux-examples/

You can consider these carousels to be the king-sized candy bar of mobile page weight. Sliders add needless bloat to your page. Many carousels use four large images in a rotation that can take up an entire phone screen. In addition, carousels usually use jQuery, which loads all of your images at the same time. All of this slows down page speed and leads to user frustration and site abandonment. Studies have found that a one-second delay in page response can result in a 7% decline in conversions. If a carousel adds just two more seconds in load time, its content would have to improve conversion rates 14% to keep conversions equal.

The Case Against Carousels

Carousels are unlikely to improve conversion rates 14%, however; in fact, they are likely to decrease your conversion rates. According to a University of Notre Dame study, approximately only 1% of site visitors clicked on a feature in the carousel, a poor click-through-rate for content featured prominently on a page. Of these clicks, 84% were on the first position image of the slider. If users do not like what they see in the first frame, they will not have the patience to wait for subsequent frames. Their patience is reduced even further on a mobile device. Even worse, users can be interested in the content of the first frame, but having it revolve to the next slide before they have the chance to click leads to frustration. These users may be unwilling or unable, especially on a mobile device, to navigate back to the first slide. The carousel could be replaced by one static, compressed image to earn better customer satisfaction as well as improve CTR.

Carousels affect other portions of the page as well. Since the carousel takes up most of the page, other content is pushed below the fold and becomes less likely to be clicked. Forcing valuable content lower on the page and slowing down page speed will also hurt your page ranking in organic search results.

Effective Carousel Alternatives

There are several carousel alternatives that still allow you to highlight important information on your page, at lower page weights. To start, instead of a beefy carousel, try a lean, static hero image. Properly designed, a hero image can show equally effective content as a carousel, increase CTR by removing the rotation element, and increase page speed. You should compress the image and reduce the dimensions to move other important content above the fold. Google’s PageSpeed Insights tool is helpful here for determining which images to compress, as well as what other aspects of your site you can optimize to improve site speed.

If you want to showcase products, you can replace the carousel with a gallery that contains smaller, compressed images that do not rotate automatically. Or, remove images altogether and prioritize content to increase time on site. Add a call-to-action button or form fills to entice users to complete an action. Evaluate and test different call to actions, formatting, etc. You can also use tools such as Hotjar and others to gather insight on user engagement with your page and guide your web design.

Mobile speed is crucial for your online sales. It is time to start shedding that page weight and try a new, slimmer, user-friendly mobile site. Ditch the carousels and start seeing results.