How to Fix the Common Divi Cumulative Layout Shift (CLS) Issue
I’ve worked on a number of Divi websites, and although it’s one of my top rated themes and page builders, I have noticed a few issues which have been shared across multiple sites. One of these issues is that a lot of Divi sites have Cumulative Layout Shift (CLS).
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Google Core Web Vital which measures the visible stability of a website during the page load.
In its simplest terms, CLS is the measure of how often the website moves or"shifts" unexpectedly while the page is loading, and how much the content is shifted. Passing Google Core Web Vitals can have a positive impact on your website’s SEO and search engine ranking.
How do I fix Divi’s Cumulative Layout Shift (CLS) issue?
To fix the Cumulative Layout Shift (CLS) issue that is common on Divi websites, we need to set the opacity to 0 until the page is ready, so you, your visitors, and the Googlebot won’t see any un-styled content.
To do this, simply go to Divi -> Theme Options -> Integration and add the following code into the <head> section. This code can also be added into a child theme or a header plugin if preferred. This is exactly the kind of issue I fix in my development work.
/* Fix Divi CLS */
<style type="text/css">
.hidden {opacity: 0;}
</style>
<script type="text/javascript">
jQuery('html').addClass('hidden');
jQuery(document).ready(function() {
jQuery('html').removeClass('hidden');
});
</script>Related guides
Want this handled for you?
I do this for clients every day. Get my free audit and I’ll tell you exactly what’s worth fixing on your site.