Fix FOUC ‘flash of unstyled content’ on WordPress

FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load.

Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing it all when the document is ready is a good way to combat FOUC.

add_action('wp_head', 'fouc_protect_against');
/**
 * Combat FOUC in WordPress
 * @link https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
 */
function fouc_protect_against () {
    ?>
        <style type="text/css">
            .hidden {display:none;}
        </style>
        <script type="text/javascript">
         jQuery('html').addClass('hidden');
	            
	 jQuery(document).ready(function($) {		            
	    $('html').removeClass('hidden');	            
	 });  
        </script>
    <?php

}

Add in your functions.php

19 Comments

  1. seki on October 13, 2021 at 1:14 am

    left a thanks comment but thought I would let people know how I implement this in wordpress.
    I use a Code Snippet plugin to add stuff like this – avoids getting trashed by theme updates – not that people use themes these days.
    I add a new snippet paste the code in .. call it something like FOUC fix set the priority to 1 save / activate and boom problem solved.

  2. seki on October 13, 2021 at 1:10 am

    Nice work – thanks for this!

  3. kevin on August 10, 2021 at 10:06 pm

    Any idea where i can place the code in divi?

    • Neil Gowran on August 11, 2021 at 1:40 am

      You need to add it to your themes functions.php file

  4. Charly on January 3, 2021 at 2:56 pm

    Usualy I don’t let comment but for this time… just thank a lot….

  5. DMND on December 9, 2020 at 1:20 pm

    After update on WordPress 5.6 the flash is back. Is there a new code necessary?

  6. Sharon on October 15, 2020 at 2:45 pm

    Got a Wordfence error. Whitelisted it but are there any concerns I should know about?

    Potentially unsafe operation detected.

  7. John on July 23, 2020 at 8:55 am

    You are the best !! Had a FOUC problem problem at work and this worked perfectly ! Thank you so much !!

  8. Pearl on May 13, 2020 at 2:33 am

    Thank you! Worked like a charm

  9. Suzy Loonam on November 17, 2019 at 7:26 pm

    Thanks so much for this. I’ve been asking my theme support people to help and they kept wanting to help me remove my sticky nav bars. I sent it to them for the next person who pays attention to details. :) big, big thanks!

  10. Jussi on November 7, 2019 at 8:12 am

    Hi,

    is this piece of code now working, and could you provide help of using it?
    So can I just place it one the additional CSS box or HTML box?
    So far i am only generating errors :).

    And do you know if this code is going to fix my text flashing problem on my site
    https://www.jussitamminen.com/ ?

    Thank you in advance!

    br
    Jussi

    • Jussi on November 7, 2019 at 11:50 am

      Ok,

      I read the post better and added the code into correct functions.php file.
      However, this code did not remove the problem and it also made the page much slower.

      Jussi

  11. John on September 23, 2019 at 11:06 am

    Thanks! It’s working!!

  12. Taha on September 21, 2019 at 11:32 am

    Does not fix the flash of unstyled content on my website

  13. Mike on September 5, 2019 at 8:30 pm

    I’d been looking for ages for a solution to this – THANK YOU! Works great.

  14. Jegkiralyfi on August 21, 2019 at 5:32 am

    Works perfectly! Thanks for that!

  15. jim on April 12, 2019 at 3:09 am

    Thanks, it works now!

  16. jim on April 11, 2019 at 7:47 pm

    I tried this but it made the whole page white and never loaded the content, even after waiting a while.

    • Neil Gowran on April 12, 2019 at 3:00 am

      I had an error in the code, have updated it now.

Leave all Comment