October 27, 2022

How to Ged Rid Of Cumulative Layout Shift (CLS) in Divi

I’m sure you’ve already been in such a situation – you designed a great-looking website but when you test it for performance (using GT Metrix or PageSpeed Insights by Google), the result is not great. Part of the issue is the cumulative layout shift which also doesn’t make a professional impression on your visit because it feels like ‘the layout is jumping‘ when you load the site.

CLS before implementing the jQuery code

CLS after implementing the jQuery code

Simple jQuery/CSS solution

Fortunately, there is an easy way how to fix the issue in Divi. Simply copy/paste the code below to your DiviTheme OptionsIntegration<head>.

<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>

This code will make the website content invisible (opacity 0) until the page is ready so the visitor (and Google) won’t see any unstyled content.

5 2 votes
Article Rating
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Theresa
Theresa
1 month ago

Hi there, thanks I was using this before and it wasn’t working for a theme builder header:

var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });

But with your code every time I refresh the page my header gets taller and taller with each refresh. Why would it be doing that? It also is jumping but smoother than before. I just can’t work out why the header keeps growing.

Theresa
Theresa
1 month ago
Reply to  Richard Pruzek

Hi Richard,
Thank you – I put Divi in Safe Mode and nothing changed so I didn’t think it was a plugin issue. Then after a while I removed the supreme plugin and it worked. For some reason it added an animation class and padding to the page-container.
Your code works really wonderfully for me, thank you for sharing it.

$49

Check out my new Divi child theme

Tias is specifically designed for plumber, electricians, handymen, interior designers, contractors & more

Check These Divi Resources, Too: