Fix Divi CLS Score [Tutorial Series] – Introduction

Quick Summary – In this 5 part tutorial series, I will walk you step by step through the process needed to fix poor Divi CLS scores, using my website redevelopment as a real life trial and error case study. Over the next 5 weeks, we will cover everything you need to know to fix Divi CLS on your site.

How to Fix Divi CLS Scores

I use Elegant Theme’s Divi builder for most of my projects. I love its flexibility and ease of use. I created my maiden business website with Divi, perhaps going a bit (a lot?) overboard with creative customization of modules, layouts, and design elements. Looks great, BUT…

I realized too late in the game that my Page Speed Cumulative Layout Shift score absolutely sucks. Turns out that Divi’s creative flexibility is also a major pitfall. To make matters worse, with the implementation of Google’s Web Vitals last year, the Cumulative Layout Shift (CLS) score has become a major player in Googles’ assessment of your website’s projected user experience and consequently PageSpeed scoring.

Time for a website redevelopment me thinks, with the goal of reducing my CLS top of mind.

In this 5 part tutorial series, I will walk you step by step through the process needed to fix Divi CLS scores, using my website redevelopment  as a real life trial and error case study. Over the next 5 weeks, we will cover everything you need to know to fix Divi CLS on your site including:

• Part 1 – The root causes of Divi CLS.
• Part 2 – Tools to help you identify the offending elements and fix Divi CLS.
• Part 3 – Case study examples of identifying Divi CLS .
• Part 4 – Case study examples to fix Divi CLS.
• Part 5 – Final tips and tricks to help fix Divi CLS and score a 0 (or pretty darn close).

As an added bonus, I will also provide you access to some custom plugins I developed that will help you get the job done, such as automatically adding missing width and height dimensions to Divi Image modules as described in my article How to Add Width and Height Dimensions to Divi Images.

Although my case study focuses on the fix for Divi CLS, the same approach can be used for any WordPress theme, page builder or plugin. After following this tutorial series, you will have all the tools and knowledge needed to fix Divi CLS, and achieve results like my case study as shown below:

Before we dive deep, it’s important that you understand exactly what CLS is, what it isn’t, and why its important.

What is CLS?

In my own words, CLS refers to a non-user initiated shift of any webpage element above the fold (user’s initial viewport) caused by a repositioning of the element in the browser. Non-user initiated means the shift did not occur as a result of a visitor clicking a button, hovering over an element, etc (these are OK), but instead due to a styling repaint of the element. For a more technical explanation, read Google Developers’ article on the topic.

Why is fixing Divi CLS important?

In a nutshell, CLS scores are reflective of poor user experience. Poor user experience can not only be frustrating for your visitors (leading to inevitable page bounces), but it also negatively affects your PageSpeed score. Poor PageSpeed scores means lower search engine rankings. You get the point. So if you care about your site’s ranking, you should care about CLS. For a more detailed read, take a look at Googles 2020 article on Core Web Vitals.

That’s it for now. Subscribe to ensure you don’t miss Part 1 of the series: The root causes of Divi CLS.

Happy Optimizing!