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 Divi → Theme Options → Integration → <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.
