How to Fix the Common Divi Flashing of Unstyled Content (FOUC) Issue
As a follow on from a previous article, How to Fix the Common Divi Cumulative Layout Shift (CLS) Issue, I’m back to what I feel is the second most common issue with the popular Divi theme and page builder – which is flashing of unstyled content on page load.
What Causes Flashing of Unstyled Content (FOUC)?
FOUC is caused when your browser loads default styling or raw HTML briefly before the website’s CSS stylesheets are loaded. It’ll appear as if there’s something wrong with the website for a second, and then everything will appear to"snap" into place when the CSS loads.
How do I fix Divi’s Flashing of Unstyled Content (FOUC) issue?
To fix the Flashing of Unstyled Content (FOUC) issue that is common on Divi websites, we need to firstly grab the HTML element (the page), and hide it. This can then be unhidden once the DOM is fully parsed.
The result of this would be a few milliseconds of white, instead of a few milliseconds of unstyled content – This would give the website the appearance of a normal load, and fix any CLS issues that come with the FOUC issue.
To do this, simply go to Divi -> Theme Options -> Integration and add the following code into the <head> section. This code can also be added into a child theme or a header plugin if preferred. This is exactly the kind of issue I fix in my development work.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>Related guides
Want this handled for you?
I do this for clients every day. Get my free audit and I’ll tell you exactly what’s worth fixing on your site.