Root Cause of Divi CLS [Tutorial Series] – Part 1

by | Feb 3, 2021 | Divi Hacks, Wordpress Optimization

Quick Summary: In this article, we will be exploring the root cause of Divi CLS to better understand why it happens. Once we understand the root cause of Divi CLS, we can begin the process of fixing it.

In the introduction to this tutorial series, Fix Divi CLS Score [Tutorial Series] – Introduction, we discussed what Cumulative Layout Shift (CLS) is and why its important to fix poor Divi CLS scores. A good CLS score (0.1 or lower according to Google’s WebDev CLS Article) will help increase your PageSpeed rankings and improve user experience – both important to achieve better search rankings (Search Engine Optimization). In this article, we will be exploring the root cause of Divi CLS to better understand why it happens. Once we understand the root cause of Divi CLS, we can begin the process of fixing it.

Key Understanding #1 – It Begins With The DOM.

The root cause of Divi CLS, in fact CLS in general, is the way in which the web browser parses (reads and actions) the Document Object Model (DOM). This is just a fancy way of describing how the web browser reads page code, and outputs what you see when you visit a web page. Go to any web page, right click on it and choose ‘view source’. The document you see is the blueprint of the DOM.

The important thing here to understand is that the browser always reads and builds the webpage from top to bottom. Lines at the top of the source code get acted on first and lines at the bottom get acted on last. Such a simple thing, but this is critical to understanding the root cause of Divi CLS.

Tip: Keep in mind that CLS scores are only concerned with elements that are rendered ‘above the fold’, in the user’s initial view port or screen, so this is what we should be concerned with – and remember that ‘above the fold’ will be different for various devices and screen sizes. This means your CLS score for desktop will be different than your mobile CLS score because the viewport is much smaller with less elements to render ‘above the fold’.

As the browser begins to act on the DOM (from top to bottom), instructions of how to display the html elements are provided to the browser via styling. Styling essentially provides the browser with instructions of how to display the elements on your screen (technically referred to as painting). For example, you can style a paragraph tag with a font-size of 18px. This tells the browser to display any text within a paragraph element at the size of 18px. Another example is to style a div tag with padding of 20px, which means to provide 20px of spacing within the div top/bottom/left/right inner dimensions.

Knowing that the browser reads/acts from top to bottom, initial styling set at the top of the DOM can be changed by over-riding styling instructions further down the DOM – this causes the browser to re-paint the element. The result? The element shifts its position and/or dimensions from its original state. Hello Cumulative Layout Shift!

Key Understanding #2 – Root Cause Of Divi CLS.

Divi’s flexibility to style and create stunning designs, is also its major pitfall when it comes to CLS. I’m hard pressed to think of many instances where I don’t make adjustments to Divi’s modules’ default settings in order to achieve the layout I’m after. In a nutshell, the root cause of Divi CLS is due to style adjustments you make to elements on your page.

Out of the box, styling of Divi elements can be achieved in one of three ways, each coming into play further down the DOM. They are:

  1. Divi default css style sheet – loaded in the head (near the top) of your document which provides initial style settings for every element on the page.
  2. Divi-> Theme Options -> Custom CSS (admin panel Divi menu). Rules added here are saved to the database and output as a block of code just before the body opening tag. Because they are further down the DOM, these take priority over the default css style sheet settings declared in #1.
  3. Inline styling – these are created whenever you adjust a module’s default settings (ie adjusting margins/width/font sizes etc) or apply custom css via the module’s advanced tab. The values are stored in your database and are applied directly to the element in the DOM. Because these are output further down the DOM, and at the time of element creation, they take final priority over the styles declared in 1 & 2 above.

The following images illustrate the position/location of each of these on a standard Divi webpage. Take note of the line number in the page source:

1. Default Divi style sheet

Cause of Divi CLS

2. Theme Options Custom CSS

3. Inline styling stored as meta data in the database

Tip: There is an option in Divi->Theme Options->Builder->Advanced tab to generate a static version of custom css. I believe it is intended to write all custom css to a static style sheet and insert it into the head of the of your page. In my experience this has never worked as intended, often serving outdated cached content, leaving me unable to view my changes without clearing the cache and rebuilding the static css file. Not conducive to development!

In practice, let’s say you add a new section, row and image module to your page. You do not add any kind of custom css to the image nor do you adjust the containers default settings (like row or section padding). Because the browser has already read the default styles from Divi’s default css style sheet (top of the DOM), it already knows the styling rules to apply once it reaches the tag. No CLS here.

However, the moment you change module settings or apply custom css to these elements (ie, change the image width to 75%, or remove the padding from the section), the styling rules change from the initial state declared in the Divi css style sheet and are discovered later in the DOM. The browser now needs to repaint the image with this newly discovered information. The result is a layout shift, and worse, if the image is ‘above the fold’, it will become part of your CLS score.

Now that we have a foundational understanding of the root cause of Divi CLS, we can do something about fixing it. In the next article, I will teach you how to use a few free and helpful tools to assist in identifying and understanding your Divi CLS offenders. to ensure you don’t miss the next article in this tutorial series: Part 2 – Tools to Identify and Fix Divi CLS.

Happy Optimizing!

About The Author

Lee Kierstead

Lee Kierstead

Founder/Owner, Studio 6AM - Websites That Work!

Lee has over 12 years experience as a full stack developer and specializes in WordPress design, development and optimization for small business and partnering website designers. Lee lives with his loving family in Whitby, Ontario, Canada.


  1. Ilya

    Can’t thank you enough!
    Brilliantly put: in a simple way, that not a pro person can easily understand!

    Now at least I understand whats going on! (has been struggling with this for a while)
    And understanding is a first step to solution!

    Will wait for your other articles on the topic!

    Thanks again!

    • Lee Kierstead

      Thanks Ilya. Glad I could help!

  2. Tiffani

    Very nice! I subscribed and will be waiting for Part 2! I need so much help. My CLS score is so bad.

    • Lee Kierstead

      Awesome Tiffani! Thanks for subscribing, and I’m glad I can help. The next article will be out shortly. It’s all kind of tricky, but once it clicks for you, you’ll have the score down to nothing in no time! Cheers.

  3. Stephen Cross

    I’ve spent at least 6 weeks of the last 3 months trying to fix Divi speed issues. Got it to an 85 approx on mobile after much trial and error and finally ending up with Astra theme + Divi Builder (so I didn’t have to rebuild entirely)……+ wiping out all other optimization plugins and using Pegasaas alone.

    Fixing CLS just might push me into green. Only just, most likely. Coding changes are over my head and don’t want to go there if in any way avoidable. Awaiting plugins with much anticipation!! I’m more than happy to be a test case if one needed.

    • Lee Kierstead

      Thanks for the comment Stephen. Plugins will help some of the intrinsic issues with the way Divi produces the modules (i.e. width and height attributes on images), but your biggest gains will be with my tested and proven steps outlined in this tutorial series. The case study posts are up next and will be out this month. Happy Optimizing!

  4. Sol

    Amazing! What an awesome post! This makes me want to keep looking throughout your blog for other great articles like this one.

    Thank you for writing these!

  5. Sol

    Oh another suggestion: Since this article is part of a series, I recommend adding a link at the bottom of each article linking the related posts to make navigation between the seamless.

    • Lee Kierstead

      Thank you Sol. Good suggestion. I will be releasing a new website, including a custom plugin store, in the new year. Keep checking back for helpful tutorials and plugins!

  6. Valeria

    Great information, thank you so much!

    • Lee Kierstead

      You are most welcome Valeria!

  7. Vincenzo Barilà

    Great post, thank you!

    • Lee Kierstead

      You are welcome Vincenzo!