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.

0 Comments

Submit a Comment

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

JOIN 6AM NATIONPlenty Insightful. Awfully Helpful. Always Free.

Put your website ahead of the digital marketing game!  Become a member of 6AM Nation to receive exclusive bonus offers and free monthly web marketing tips and tricks.  No blood contract needed.  Just great free advice straight into your inbox courtesy of your friendly neighbourhood web designer! Easy-Peasy.

Win The Battle Against Google's 'Public Badge Of Shame'!Significantly Improve Your Website's Loading Speed For Only $249.00 (15% Off)

Protect your brand, improve your page rank, increase traffic, and avoid Google's public "Badge of Shame" with a Studio 6AM WordPress Speed Optimization Package.

You get:

  • Free Website Speed Assessment
  • Page & Browser Caching Configuration
  • Site-wide Java Script and CSS Optimization
  • Deep Optimization of Homepage (Including Images)
  • Before & After Report
  • 15% Off Standard Pricing of $300.00

Submit this form to get your free website speed assessment and a 15% discount upon purchase. 100% Money Back Satisfaction Guarantee.

Pin It on Pinterest