Owl Carousel CLS (Cumulative Layout Shift) fix


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.


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.

Core web vitals image

The 3 components of Core Web Vitals as measured by Google.

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.

Owl Carousel CLS Problem

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.

CLS score as measured in Google lighthouse with standard Owl Carousel install.

CLS score as measured in Google lighthouse with standard Owl Carousel install.


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 class="owl-item">
                <div class="slide-owl-wrap">
                    <img src="..." />
            <div class="owl-item">
                <div class="slide-owl-wrap">
                    <img src="..." />

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

CLS score as measured in Google lighthouse with additional CSS fix.

CLS score as measured in Google lighthouse with additional CSS fix.


  1. Alex Evans says:

    Hi, what is .slide-owl-wrap class? I dont see this class in my download from owl carousel website. Thanks for your help..

    1. bordermedia says:

      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.

  2. Rox says:

    You are brilliant. Thank you so much for your article. Works like a charm!

    1. bordermedia says:

      You are welcome. Happy it helped.

  3. Nick says:

    Bizarrely this seems to cause a double height issue or the second image/slide to show blank for us. Anything we could try?

    1. bordermedia says:

      Did you also make the required html changes as well?

  4. Chris says:

    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.

    1. Vu Tru So says:

      same problem, I think using this css

      .owl-carousel .owl-item{height: 380px;display: block!important;}

    2. bordermedia says:

      Try adding this CSS and see if it helps:

      .slide-owl-wrap {
      position: relative;
      height: 550px; // pick your own height here.

  5. 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.

  6. David DiGiovanni says:

    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.

  7. David says:

    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.

    1. bordermedia says:

      Glad it’s working for you now.

  8. Eugene says:

    Unfortunately it does not work in my case.
    I use it to carousel divs with different backcround images and content…
    The initial HTML looks like this

    some text content

    Does anybody knows the solution for this case?

  9. Tom Armstrong says:

    How do you change the classes that are in the DOM?



Leave a Reply to Chris Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.