Owl Carousel CLS (Cumulative Layout Shift) fix

December 19, 2021 • Category - CSS, Web Development, Wordpress • 12,202 views
ShareShare on FacebookShare on Twitter

Overview

Sliders and carousels are an extremely common web component used on many websites these days, for better or worse (to read more about the worse part, a good article here). However, as with many things web development related, if the client insists on having a slider/carousel on the home page, as a web developer we have to accommodate that.

Background

Google has announced that from June 2021, they will start to consider “Page Experience” as part of Search ranking, as measured by a set of metrics called Core Web Vitals.

The Core Web Vitals are a set of three metrics designed to measure the “core” experience of whether a website feels fast or slow to the users, and so gives a good experience.

Owl Carousel Image 1

In this article, we will concentrate on CLS (Cumulative Layout Shift) and how sliders/carousels such as Owl Carousel negatively impact CLS scores and provide an easy fix using CSS only.

As per Google documentation:

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. The score is zero to any positive number, where zero means no shifting and the larger the number, the more layout shift on the page. This is important because having pages elements shift while a user is trying to interact with it is a bad user experience. If you can’t seem to find the reason for a high value, try interacting with the page to see how that affects the score.

Using a standard implementation of Owl Carousel, you will typically end up with a CLS score of 0.5 or more. According to Google, anything greater than 0.25 is considered poor, between 0.1 and 0.25 needs improvement, and less than 0.1 is good.

Owl Carousel Image 3

Solution

Owl Carousel chooses to hide the entire carousel on initial page load until all javascript has been loaded – hence why you end with a large layout shift.

The solution is to add a small amount of CSS that displays the first carousel image on initial page load so that the DOM can properly reserve the space required for the carousel, and therefore minimise any layout shift.

.owl-carousel {
    display: block;
}
 
.owl-carousel .slide-owl-wrap:not(:first-child) {
    display: none;
}
 
.owl-carousel img {
    width: 100%;
}

To make this CSS work, a small change to the standard html structure as laid out in the Owl Carousel class documentation is required. Basically an extra div within each div.owl-item needs to be added as shown below:

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">
                <div class="slide-owl-wrap">
                    <img src="..." />
                </div>
            </div>
            <div class="owl-item">
                <div class="slide-owl-wrap">
                    <img src="..." />
                </div>
            </div>
            <div class="owl-item">
                <div class="slide-owl-wrap">
                    <img src="..." />
                </div>
             </div>
        </div>
    </div>
</div>

With this small change, our CLS score has improved dramatically.

Owl Carousel Image 4


13 Comments

Default profile image
Alex Evans2022-01-04
Hi, what is .slide-owl-wrap class? I dont see this class in my download from owl carousel website. Thanks for your help..
Default profile image
bordermedia2022-01-05

Hi Alex, thanks for commenting. Yes you're right, for this solution to work I had to make a small change to the standard html structure as documented on the Owl Carousel site (https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html), and I completely forgot to add that to the article!

I have added the updated html structure to the article above so hopefully that works for you.

Default profile image
Rox2022-03-13
You are brilliant. Thank you so much for your article. Works like a charm!
Default profile image
bordermedia2022-03-14
You are welcome. Happy it helped.
Default profile image
Nick2022-07-05
Bizarrely this seems to cause a double height issue or the second image/slide to show blank for us. Anything we could try?
Default profile image
bordermedia2022-07-11
Did you also make the required html changes as well?
Default profile image
Chris2022-09-15
For me this hides every image after the first because of the display: none; declaration. So when scrolling to any image after the first they are not show. How is this supposed to work? Thank you.
Default profile image
Vu Tru So2022-10-16
same problem, I think using this css .owl-carousel .owl-item{height: 380px;display: block!important;}
Default profile image
bordermedia2022-11-02
Try adding this CSS and see if it helps: .slide-owl-wrap { position: relative; height: 550px; // pick your own height here. }
Default profile image
Edward Crompton2022-11-15
I changed my existing Owl carousel code to implement this, but I now see a single column of ALL the images, I used to see just one, which I could scroll left or right.
Default profile image
David DiGiovanni2022-11-21
This post diagnoses the problem perfectly, but the fix doesn't work at all. The CSS doesn't even make sense, specifically this line: .owl-carousel .slide-owl-wrap:not(:first-child) { display: none; } The way the HTML is structured, .slide-owl-wrap will always be the first-child within the .owl-item element, so this CSS will never get applied. And even if it was applied, it would simply hide the contents of .slide-owl-wrap, which will hide the carousel image. There would need to be additional CSS that shows the image when the slide becomes active.
Default profile image
David2022-11-22
Take back my previous comment. I didn't realize that the .owl-item class is being added when the page loads. So this solution actually is pretty slick and it wasn't working for me for another reason. Sorry for the confusion! Feel free to delete this comment and my other one.
Default profile image
bordermedia2022-11-22
Glad it's working for you now.

Leave a Comment

Share your questions, thoughts and ideas while maintaining a considerate tone towards others, thank you.

All fields are required - your email address will not be published.