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.
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.
Hi Theresa! Hard to say without seeing the backend of your site. I’ve used this on dozens of my sites and never had an issue. If you’d like to, email me your site and I can take a look. Cheers!
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.
Hi back again for a quick question please.
I am finding my sites seem to jump/fold down on load. I don’t have any plugins or extra items at the moment.
Do you see it and if you do have a solution? Thanks
https://designs.visnetmedia.com.au/neomode/
Hi, thanks a lot, this completely removes any CLS from desktop. It doesn’t seem to reduce CLS as much on mobile, is that because of the mobile dropdown menu? Or am I missing something?
Hey Richard, thank you for the help. Do you have solution for CLS on mobile devices? THanks in advance