Stop Flash of Ugly Site While Divi Loads

Sep 21, 2020

Disclaimer: This site is a labour of love, but love doesn’t buy me matcha lattes. Affiliate commissions for awesome internet tools, on the other hand, totally buys me matcha lattes. This post probably contains some affiliate links. Read my affiliate disclaimer here.

Ever notice how there’s a flash of your ugly unstyled site before Divi loads?

Or perhaps elements that are disabled on desktop show up for a flash and then they disappear when Divi finally loads?

You may be thinking — like most designers — that this is just part of Divi; that it’s unavoidable unless you have a dedicated server.

But, it’s actually easy to fix with just 15 lines of code in the Header. And, full transparency, I figured this out from an old Stack Overflow forum thread from 10 years ago. 🙂

Step 1: Copy this code to your clipboard.

<style type="text/css">
        .fouc-fix { display:none; }
    </style>
<script type="text/javascript">
        try {
            var elm=document.getElementsByTagName("html")[0];
            var old=elm.class || "";
            elm.class=old+" fouc-fix";
            document.addEventListener("DOMContentLoaded",function(event) {
                elm.class=old;
                });
            }
        catch(thr) {
            }
</script>

Step 2: Paste in Theme Options

Open up Theme Options, and then go to Integration.

Paste the code into the first block where it says, “add code to the <head> of your blog.”

Save your changes.

Flush your cache, and then reload your site in Incognito Mode to ensure it worked.

Designerless: Divi Header Code

Hope this helps! Let me know in the comments.

7 Comments

  1. Jessica

    You are my hero! I have been trying to fix the FOUC on one of my divi sites forever without acceptable results. Nothing I tried (even after hours of searching through stack overflow threads) worked without causing other issues with CSS rendering etc. This worked perfectly! And so far I have detected no resulting issues elsewhere. Thank you!!!

    Reply
    • Ysmay

      YES!!! I am so glad this worked for you! It had been driving me nuts for a long time.

      Reply
  2. Selv

    Thank you for the code snippet. But unfortunately it didn’t work on my site. Do you have any tipps why it’s not working? Thanks.

    Reply
    • Ysmay

      Hey Selv. What version of Divi are you using and what browser? Did you clear the site cache after you added the code snippet? Want to drop your URL here in the comments and I can take a look?

      Reply
  3. Radostin Kolev

    I followed all the steps and did everything as shown, but it didnt worked for me. Any ideas ?

    Reply
    • Ysmay

      Hey Radostin. What version of Divi are you using and what browser? Did you clear the cache? Want to drop your URL here in the comments?

      Reply
    • Ysmay

      If it’s for TeracomSystems it appeared to have worked because the site loads quickly and lovely here for me.

      Reply

Leave a Reply