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

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