How To Fix Divi Flashing Unstyled Content On Page Load

Is your Divi site flashing unstyled content on page load? This is called FOUC and it will display the browser’s default styling briefly before your stylesheets are loaded. With FOUC your content will be shifting and that looks unprofessional. And with shifting content you are likely to get some CLS issues.

If you have a jumping header issue in Divi then follow my tutorial on how to fix the jumping header in Divi.

How Does Flashing Content Look Like

A website with flashing content looks like this for a brief moment.

Divi FOUC Issue

This is some of the default styling for this page. And after the page load has finished it looks like this.

Fully loaded page

How To Fix Flashing Content In Divi

In most cases this will work for me. Go to Divi > Theme Options > Integration > Add code to the < head > of your blog

Add the follwing snippet:

<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>

And that should fix the issue. If you have any question please let me know in the comments.

1 thought on “How To Fix Divi Flashing Unstyled Content On Page Load”

Leave a Comment

0 Shares
Share
Pin
Tweet