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

<script type="text/javascript">
  jQuery(document).ready(function() {

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.6 7 votes
Article Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
1 year 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];
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.

1 year 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.

1 year ago
Reply to  Theresa

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

Maximilian Herberstein
Maximilian Herberstein
1 year ago

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?

Arafat Islam
Arafat Islam
8 months ago

Hey Richard, thank you for the help. Do you have solution for CLS on mobile devices? THanks in advance

Ad - SiteGround Web Hosting - Crafted for easy site management. Amazing Speed; Powerful Tools; Top-rated support. Learn more.

Check These Divi Resources, Too: