Preventing Divi from showing a flash of unstyled content on page load

by | Apr 20, 2023 | Divi

Is your flash new Divi website flashing a glimpse of unstyled content when then page loads? This is called a Flash of Unstyled Content or often referred to as FOUC. This is displaying the browser’s (or Browser and Divi’s) default styling briefly before your stylesheets and customer CSS are loaded.

This can cause a Shifting around of some content, and looks a little unprofessional. And with this shifting of content, you are likely to be hit with an increase in the Commulative Layout Shift (CLS) in PageSpeed scores and so on.

How to fix Flashing Content in Divi

In most cases, this will work simply. There might be cases where it doesn’t work flawlessly though.

Log into WordPress to go to Divi > Theme Options

Divi Menu open, with Theme Options highlighted

Once the Theme options is open, choose Integration.

Dont forget to Press the Save button!

Add the following code into the field Add code to the < head > of your blog. You might already have some content in here, such as GoogleAnalytics or Google Tag Manager code.

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

If you are using any form of caching, such as a plugin, or CloudFlare (or similar) you will need to clear/purge your cache.

When Using SwiftPerformance 2.x

If, like me, you are using the awesome SwiftPerformance 2.x plugin, you might want to do a few things differently.

Using a slightly different Approach: