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.

4.7 9 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Ad - SiteGround Web Hosting - Crafted for easy site management. Amazing Speed; Powerful Tools; Top-rated support. Learn more.

Check These Divi Resources, Too: