How Website Carousels Impact Your Core Web Vitals (& Best Practices)


We’ve all seen them on web pages throughout the internet. Featured slideshows – better known as “carousels” – have increased in popularity over the years with a bag of mixed reviews in their wake. Some of the most consistent criticisms revolve around how they can negatively impact a website’s Core Web Vitals scores when they are not properly implemented.

Ecommerce Marketing Automation

What exactly are Core Web Vitals, you ask? Often abbreviated as CWV, Core Web Vitals are a set of standardized metrics that help developers understand the user experience with a focus on the evaluation of a website’s load time, interactivity, and overall visual stability. Carousels can hurt a website’s CWV scores because of the range in size of their images, causing a slower page load time and poor user experience. Opinions on how to address this issue range from removing them entirely from your website to revamping them into a more optimized experience.

So if you’re building a website for a client where one of the key features is a carousel or you’re a website owner finding it hard to let your own carousel go, worry not. In this post, we’ll break down the details of how carousels affect your Core Web Vitals and what you can do to mitigate their impact for a more balanced user experience.

What Is a Website Carousel?

Let’s first talk about our friend, the carousel. This UX component is easiest described as a slideshow of cards used to showcase either product images, textual information about services and promotions, or a combination of both.

Screenshot of a website carousel example from Apple
Example of a website carousel from Apple

Carousels have a wide variety of use cases. They can be showcased as the header on the homepage with large images or utilized as informational card slideshows using smaller images paired with descriptive text to provide more details on services, awards, reviews, etc. Some carousels don’t feature images at all and are used to highlight a business’s testimonials or other small details.

While carousels can be cumbersome, it’s important to recognize their versatility and potential when choosing to design or build them into a website.

Poorly Implemented Carousels Can Negatively Affect Core Web Vitals Metrics

CWV were created as an initiative by Google to provide unified guidance on how to create a better user experience online. These defined metrics are a good indication of your site’s usability and are also used as an organic ranking factor in Google’s organic search algorithm. So it’s important for your site to perform well with respect to CWV.

When carousels are not implemented properly, they can make or break the user experience on your website and thus lower your CWV scores. Let’s take a look at possible ways that big ol’ carousels could be affecting your site.

Carousel Impact on LCP

The Largest Contentful Paint (LCP) measurement in Core Web Vitals refers to the time it takes for the browser to load the largest image or text content in the viewport. Carousels are often the component that has the greatest impact on LCP when they’re present on a page, especially when utilizing larger images above the fold, as they can be made up of multiple images and lines of text.

According to web.dev, carousels have their LCP calculated based on the first presented image along with the size of each image displayed on the first load of the page. As an example, the LCP will repeatedly recalculate if a carousel is set to “auto-play” or will be impacted if more than one slide image is present on page load and each slide image varies in size, height, or width.

Carousel Impact on FID

First Input Delay (FID) is measured based on the amount of time it takes for the page to respond after a user performs their first action, such as clicking a button or link. Normally when a delay is detected, it has been caused by a component or function of the site that is resource-heavy or render-blocking.

Luckily, carousels generally have minimal Javascript requirements and aren’t usually the cause of issues related to interactivity. If your carousel is causing an extended FID, this may be an indication to consider replacing the tooling behind the component.

Carousel Impact on CLS

Cumulative Layout Shift (CLS) is the measurement of visual stability or the time it takes for the page to stop jumbling around while it finishes fully loading. Carousels can be big, clunky, animated slideshows that ultimately have the potential to take a longer time to load.

Their impact is often heightened if the slides in the carousel do not have consistent measurement properties for height, width, etc., or if the carousel is set to auto-play as it has the potential to cause CLS indefinitely. This could absolutely leave an impact on visitors, but probably not a positive one!

Web Design & UX Best Practices for Implementing Website Carousels

If you feel like it might just be easier to throw the whole carousel away, hang tight! There are some easy ways to account for the quirks of carousels that can help to prevent your CWV scores from taking a dive and create a great user experience all in one swoop. Below we’ll cover some of the best practices for building an easily navigable carousel that loads in no time.

Performance

As previously discussed, optimization can be the greatest guard against your carousel negatively impacting overall performance. Any part of the carousel – images, text, even the structure – can be revisited to cut down on load time.

1. Decrease Layout Shifts

  • Use HTML to load carousel content
    • Changing the structure of your carousel to load the content via the HTML markup will allow the browser to discover the carousel early on in the loading process. Avoid using Javascript to initiate the first load of the carousel, as this can cause delays in images loading and has a large chance of impacting your LCP.
Screenshot of example HTML markup to load carousel content
Example HTML markup to load carousel content
  • Restructure slide transitions
    • A bad CLS score will say it all! Slide transitions are one of the more common causes of layout shifts in carousels because they are often generated by changing the layout-inducing attributes of DOM components. Using the CSS property transform to create the carousel transitions can make all the difference in how smoothly it can shift between slides.

2. Update to More Modern Technology

Websites will often use third-party Javascript to implement carousels, which can be a quick and painless way to add this functionality. Updating to newer tooling may increase the site’s performance if your carousel is using less efficient APIs or has dependencies, such as jQuery.

3. Optimize, Optimize, Optimize!

Carousels are just big slideshows! Often the images in a carousel are some of the largest on the site, which also means they’re often hogging all of the load time if they’re not properly sized and compressed. Selecting the correct image formats, compression levels, and image dimensions are just some of the ways that the images can be reduced to load faster.

Navigation

While your CWV scores are going to be the most noticeable behind-the-scenes measurements that affect functionality, it may also be worth examining how the user experience for your carousel can be improved as a whole. Navigation within carousels can stylistically range from site to site, but here are some quick tips for making the most of this small but powerful section.

1. Design Prominent Navigation Controls

Subtlety may not be your best friend when it comes to designing navigational functionality within a carousel. These controls should be easy to find and click without needing to hunt throughout the image to discover them. Users should also be able to see where they are in the carousel by providing clear navigation progress indicators. Preview thumbnails that update depending on which slide is currently being viewed paired with the quintessential directional arrows on the featured image are just some of the ways you can design the navigation of carousels.

This carousel on Blizzard’s website is a good example of well-designed navigation controls. They provide clear arrow navigation on the sides and a visual aid that highlights blue to show slide progress.

Screenshot of carousel example on Blizzard's website
Website carousel example from Blizzard

2. Don’t Forget About Mobile

Mobile has quickly become one of the most used methods to access websites, and your carousel should reflect that. Adding swipe gestures to allow for easier navigation on mobile will make a world of difference.

This mobile carousel on Home Depot’s website is a good example of what swipe gestures look like in action. They create an easy and intuitive user experience to navigate through the carousel.

Screen recording of scrolling through a mobile carousel on Home Depot's website
Example of a mobile carousel from Home Depot

Readability

We’ve all seen the carousels that overtake a webpage and make them difficult to parse. The main use for carousels is to provide a short slideshow of a business’s services, promotions, and features that can be read and understood in a short amount of time, so let’s keep it brief!

1. Stay Concise

This is an easy consideration that only requires cutting back on verbiage. Keep your copy short and to the point, lest you lose your visitor’s interest.

2. Separate Your Text From Your Images

It might be tempting to sandwich your text directly onto your image as one PNG file, ready to add to a slide – don’t do it! This can create issues related to image compression, localization, and, most importantly, accessibility. An image that may look great on desktop may get absolutely destroyed in quality on mobile. Keep your text separated from your images, and you’ll be doing everyone a favor!

3. Review the Color Contrast

It’s also important to review the color contrast of your carousel. All copy and content, including any buttons, should be easy to differentiate from the background image on the slide. If the colors between your text and images are too similar, they will blend together and become difficult to read.

Website Carousel Example With Good Readability (Do)

This carousel example from Champion’s website uses high color contrast, bold fonts, and brief copy that is easy to read and clearly provides promotional information.

Screenshot of a carousel example on Champion's website
Good website carousel example from Champion

Website Carousel Example With Bad Readability (Don’t)

In this carousel example from Dom Perignon, the copy is brief but the slide has low color contrast and is difficult to read and navigate.

Screenshot of a bad carousel example on Dom Perignon's website
Bad website carousel example from Dom Perignon

Product

It can be beneficial to keep or upgrade your carousel, but sometimes it’s best to reconsider how you’re using it and whether it needs to stay at all.

Carousels are often used incorrectly and can easily become a section of the page that users gloss over because they seem like an advertisement, or they are clearly being overused and have become ineffective. Like any part of your site, it’s within your best interest to regularly test and evaluate the effectiveness of your carousel.

1. Test Effectiveness

Carousel clickthrough rates are the best route to discover how users are interacting with your carousel and to help determine how effective your carousel is.

2. Test Relevancy

  • Are you filling the carousel with content that didn’t perform well outside of it?
  • How are you using your imagery, and is the text featured relevant to your audience?
  • Would the average consumer of your product find the content interesting?

These are questions you should ask yourself when placing content within the carousel. Users are more likely to engage with the carousel if it contains relevant content for them.

Conclusion

Carousels are like anything else in your box of website tools – if you use them in just the right scenario and in just the right way, they can actually benefit your site. A poorly implemented carousel can negatively impact your site speed and overall CWV scores. But if you optimize your carousel’s images, structure, and underlying technology, you can turn your carousel into an asset for your website instead of a burden.

Although we’ve covered great ways to improve your carousel’s impact on CWV scores right now, we’d be remiss not to mention that it’s just as important to consistently measure your core web vitals to make sure your carousel doesn’t go downhill and become a problem again in the future. It’s a process, but that’s web development for you!



Source link

30%* off! Big Savings For Your Small Business!

LEAVE A REPLY

Please enter your comment!
Please enter your name here