{"id":24390,"date":"2021-03-06T16:46:40","date_gmt":"2021-03-06T15:46:40","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=24390"},"modified":"2021-04-15T11:23:23","modified_gmt":"2021-04-15T09:23:23","slug":"how-to-fix-divi-flashing-unstyled-content-on-page-load","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-fix-divi-flashing-unstyled-content-on-page-load\/","title":{"rendered":"How To Fix Divi Flashing Unstyled Content On Page Load"},"content":{"rendered":"\n

Is your Divi site flashing unstyled content on page load? This is called FOUC<\/a> 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<\/a> issues.<\/p>\n\n\n\n

If you have a jumping header issue in Divi then follow my tutorial on how to fix the jumping header in Divi<\/a>.<\/p>\n\n\n\n

How Does Flashing Content Look Like<\/h2>\n\n\n\n

A website with flashing content looks like this for a brief moment.<\/p>\n\n\n\n

\"Divi<\/figure><\/div>\n\n\n\n

This is some of the default styling for this page. And after the page load has finished it looks like this.<\/p>\n\n\n\n

\"Fully<\/figure><\/div>\n\n\n\n

How To Fix Flashing Content In Divi<\/h2>\n\n\n\n

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

Add the follwing snippet:<\/p>\n\n\n\n

<script type=\"text\/javascript\">\nvar elm=document.getElementsByTagName(\"html\")[0];\nelm.style.display=\"none\";\ndocument.addEventListener(\"DOMContentLoaded\",function(event) {elm.style.display=\"block\"; });\n<\/script><\/code><\/pre>\n\n\n\n
And that should fix the issue. If you have any question please let me know in the comments.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n