How To Fix Divi Flashing Unstyled Content On Page Load

Mark Hendriksen | March 6, 2021 | 53 Comments

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.

You Might Also Like…

53 thoughts on “How To Fix Divi Flashing Unstyled Content On Page Load”

  1. I don’t have this issue on a consistent basis but it does come up from time to time. Adding this code seems to work visually. It looks like mobile is loading a little smoother too. But when I check stats on gtmetrix, my website is loading a little slower. Any advice on this?

    Reply
  2. You are a life saver. Thank you for this magic script.
    Question is: Why can’t DIVI integrate this script in DIVI Theme.

    Reply
  3. My header was actually jumping and your other tutorial didn’t work for it. But since I was also experiencing the flashing issue, I applied this code in the header and low and behold, this code is what fixed the jumping divi header!!

    Reply
  4. Thanks a lot for the trick !
    If you are using the plugin Code Snippets, here is a working one:

    // Show content of the page only after it was fully loaded
    function hide_page_until_fully_loaded() {
    ?>

    var elm=document.getElementsByTagName(“html”)[0];
    elm.style.display=”none”;
    document.addEventListener(“DOMContentLoaded”,function(event) {elm.style.display=”block”; });

    <?php
    }
    // Add action hook to the header
    add_action("wp_head", "hide_page_until_fully_loaded");

    Reply
  5. here is something interesting and weird at the same time
    the script works fine but….
    when you have a header with 2 sections that both are sticky…
    only the second section sticks

    Reply
      • This is an excellent fix for the annoying FOUC that occurs on, for example, a top nav menu bar from the theme builder. It works great, but to echo a comment earlier, it seems that if there are any sticky sections, rows, or modules on the page, it breaks the stickiness of that element. Are there any workarounds for that?

        Reply
  6. Good solution, this is a horrible thing and the website looks unprofessional, good code! works for me, no more flashing content…

    Reply
  7. Thank you so much for this! I was about to lose my mind with this, and Google led me to this post. Such an easy fix! Thanks a million.

    Reply
  8. Thank you! This was great. I do have a question. Now that I have this in place, each time I refresh it scrolls the page up just a bit. Then again, then again, etc. I could “refresh” my way all the way to the bottom of the screen.

    Any thoughts on that?

    Reply
      • Yep. I take the code out and the scrolling on refresh stops, but then it goes back to blinking unstyled content. Hmmmm….which one is more annoying 🙂

        Reply
  9. Hi, appriciate the snippet. For me one issue was that it broke the frontend Divi Builder. Seems the code runs many times in the builder, and in different frames, and my builder wouldn’t load.

    I added some checks to make sure it was not in build mode, and it seems to work now:

    var queries = new Proxy(new URLSearchParams(window.location.search), {
    get: (searchParams, prop) => searchParams.get(prop),
    });

    if (queries.et_fb == null && queries.et_pb_preview == null && window.location.toString().indexOf(‘http’) != -1) {
    var elm=document.getElementsByTagName(“html”)[0];
    elm.style.display=”none”;
    document.addEventListener(“DOMContentLoaded”,function(event) {elm.style.display=”block”; });
    }

    Reply
  10. It is SHOCKING that the people at DIVI haven’t fixed this problem or incorporated a solution like this.

    Thank you for this. I have been looking for a solution for months!

    Reply
  11. This is brilliant. None of the speed optimisation settings of either plugins or the Divi theme itself were working. This little piece of code has fixed it!!

    Many many thanks.

    Reply
  12. Thank you very much! Worked for me too.
    This is a very useful site, Mark – I tip my hat to you!

    It does make me wonder why ET hasn’t put a toggle among the mass of Divi theme options that applies this code or something similar. Are there any known issues with this method? Performance? Stability?

    Reply
    • Hi Paul,

      Good to hear this worked for you too.

      There are by me no known issues, just that it does not work for everyone. Probably hosting or plugin-related.

      Reply
  13. Thank you, I have been looking for a solution to this problem for some time, thank you very much, great solution it works perfectly.

    Reply
  14. Thank you so much for this quick and easy fix. I really appreciate all the resources you provide – they have saved me from headaches on many occasions.

    Reply
  15. An additional one thousand thank yous! I had a pre-loader to hide this problem but that slowed the site down even more and was annoying. You have freed me!

    Reply
  16. Code works perfectly. Unfortunately posting into divi/options/integration caused Divi Builder to stop working.
    Using the Plugin “Head, Footer and Post Injections” instead, solved the issue.

    Thanks a lot.

    Reply
  17. Thanks so much! Worked like a charm. Went from a 72 Performance (C) to a 98 Performance (A) and a CLS score of 0 with your simple but amazing snippet. Thanks a million!

    Reply
  18. The code works really well. I have 2 header menu’s (1 for desktop / tablet) and 1 for mobile because on mobile I want the woocommerce logo in a different menu bar on mobile.

    Divi kept showing the 2 headers for a brief second while the page was loading and the flashing menu fix did not work. It was especially noticable on mobile. I presume the flashing header fix did not work because divi as actually briefly showing the 2 headers before the javascript loaded the disable css for 1 of the headers depending on the device size. Though a media query in the theme CSS did not work great either.

    This fix worked great. I will gladly wait an extra possible fraction of a second to properly load the header. No more janky flashing of the 2 headers and no more jumping of the logo. Coming from just building pages in html/css/js it felt so amateurish to have jumping headers and unstyled pages on page load.

    While DIVI is great I feel the DIVI header options are severely subpar. I had created a ticket for this issue and DIVI want me to grant remote access so they can look into the issue. Maybe we should all make tickets and submit this code as a fix.

    Sorry for the rant and thanks for the Code!

    Reply
    • Hi Laurens,

      Great to hear this worked for you and thank you for sharing your story about your issue.

      I hope when Divi 5.0 will be released that the flashing header will belong to the past.

      Reply
  19. I’m still having issues, the script seems to make the page flash worse.
    The mega menu is now under control but the mobile menu causes a big issue, wondering how to control opacity on load or hide these elements.

    Reply

Leave a Comment

1 Shares
Share
Pin1
Tweet