Tools to Fix Divi CLS [Tutorial Series] – Part 2

In this article, we will focus on tools to fix Divi CLS. These tools, all of which are currently at your fingertips, will help you identify offending elements that cause poor Divi CLS scores, and more importantly, correct them.

Welcome to Part 2 of the Fix Divi CLS tutorial series. In my previous article Root Cause of Divi CLS [Tutorial Series] – Part 1, we reviewed the root causes of Divi CLS and the reasons why we should fix Divi CLS for better performance scores. In this article, we will focus on tools to fix Divi CLS. These tools, all of which are currently at your fingertips, will help you both identify offending elements that cause Divi CLS as well as correct them. I’ll review each tool in some detail so you have an understanding of how to use them effectively.

Tools to Fix Divi CLS #1 – Know Your Score.

This may seem like a no brainer, but you should assess where your overall CLS score stands prior to implementing any changes. Perhaps your score is already under 0.1 and the only reason you would care to address it is out of sheer interest or, if you’re like me, a tad bit obsessive when it comes to not letting Google bully my sites around.

If you’re using Divi, you most likely will NOT have a CLS score under 0.1, which is the reason you are here, right? The simplest way to get your score from the authoritative source is to run a Google PageSpeed Insights report.

This report will provide you 2 pieces of information related to your CLS score:

1. Origin Summary – this is a summary of experience reflective of users’ real world experience with your site over the past 28 days and is part of Googles algorithm ranking Core Web Vitals. Not much we can do with this data as its purely historical, but its helpful to know how your CLS has been performing (or not).
2. Lab Data – this is the actual calculation that is returned from the current Page Speed Insights report and is reflective of your current score. If it’s over 0.1 (and it most likely is with Divi), you have some work to do.

Tools to Fix Divi CLS # 2 – JavaScript Console Logger

I won’t dive deep on the code used here – the important thing to know is that the script captures and outputs layout shift data to the console tab of your Developer Tools window.

Copy the code below (including the script tags), and paste it into Divi’s Integration panel located at : Divi-> Theme Options->Integrations-> Add code to the < head > of your blog:

<script>
let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log(‘Current CLS value:’, cls, entry);
}
}
}).observe({type: ‘layout-shift’, buffered: true});
</script>

Once you have saved the changes, visit a page on your site, hit Ctrl-Shift-I to open Chrome Developer tools and click on the “console” tab. You will see the output produced by the code as it measures your layout shifts on the page. You can click on the arrows to expand the level of detail which include affected elements, changes in size or changes in position. This will come in super handy when we come to the point of identifying and fixing Divi CLS.

Tools to Fix Divi CLS # 3 – Chrome Developer Tools (Performance-> Experience; Elements-> Box Layout Overlay Colors; and Lighthouse Reports)

This collection of tools is a must have to help identify and fix Divi CLS, and they are already available in your Chrome Browser Developer Tools. Access your developer tools by clicking on CTRL-SHIFT-I on your webpage. Here’s a bit on how each can help identify and diagnose your Divi CLS offenders:

• Performance Tab – When you run a performance capture, layout sifts will be recorded as red bars in the experience row of the report. Clicking on the red bar will provide detailed data of the shifts (much like the JavaScript code above). We will be using this to gauge the offending elements as well as the timing of the shifts in the page load.
• 2. Elements Tab – Boxed Layout – Click the Elements Tab and mouse over any element on the page. Invisible attributes such as margin’s, paddings etc. will be highlighted with a color overlay – orange stands for margin and green stands for padding. This is helpful because it gives you a visual representation of something that you can’t see – a key skill to master in identifying and fixing Divi CLS!
• 3. Lighthouse Reports – these reports are found on the Lighthouse tab of the developer console and basically perform the same function as running a PageSpeed Insight Report. Using these reports instead of PageSpeed saves time and gives you instant feedback on your overall score reduction as you make adjustments.

TIP: When using Chrome Developer Tools to address CLS, always view the page/tools in an incognito window – this will bypass most issues that prevent you from receiving accurate feedback and properly viewing changes that have been implemented.

Tools to Fix Divi CLS #4 – Use a Divi Child Theme

As explained in Part 1 of this series, the majority of Divi CLS issues are caused by late styling of elements as the page is rendered. The fix? Use a child theme style sheet that will be included in the head of your document and will pre-empt the late inline styling produced by the Divi Builder modules. I’m a firm believer in always using a child theme – fixing Divi CLS is just another great reason.

if you need help setting up a Divi child theme, read Elegant Themes’ Ultimate Guide to Creating a Divi Child Theme.

Tools to Fix Divi CLS #5 – Custom Plugins

In certain cases, Divi CLS issues cannot be fixed by pre-empting the styles. Instead these are caused by what I consider to be shortcomings in the code that renders the modules. The biggest offenders by far are Divi’s image module, full-width image module, and blurb modules which are missing default width and height attributes.

Adding explicit width and height attributes to images/videos is a key Google recommendation to reducing your CLS scores as described in web.dev’s article Cumulative Layout Shift (CLS).

If you are not comfortable or interested in modifying code, I have developed a few lightweight plugins to fix the Divi image issues (image, full-width image, blurb) which are available for $8.99 each. The small fee for the plugins helps to offset development costs so I can keep them coming😊. These plugins will be available for download my current website rebuild. If you’d like them before then, just shoot an email to info@studio6am.com and I’ll get them to you.  Note: If you email me, I will absolutely respond.  Because I use a SMTP relay service, my emails sometimes end up in your junk or promotions folder so make sure to check there if you are expecting a response.

That’s it for this article on tools to fix Divi CLS. Spend some time exploring the above noted tools to fix Divi CLS and ensure you have your Child Theme setup! Subscribe to ensure you don’t miss the next article in this tutorial series: Part 3 – Case study examples of identifying and fixing Divi CLS.

Happy Optimizing!