Skip to content

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

10 Comments

  1. 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!

  2. 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

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

    Thanks! It’s working!!

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

    Does not fix the flash of unstyled content on my website

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

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

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

    Works perfectly! Thanks for that!

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

    Thanks, it works now!

  8. 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 a Comment





Scroll To Top