The Most Effective Way to Avoid the FOUC

Going further with Paul Irish's solution

We all have to deal with it at some point.

The Flash Of Unstyled Content. Yuck. What a name. According to TechRepublic it has its origins documented as far back as 2001. There are a wide range of fixes. This fix however is super duper easy to implement and it’s a vanilla solution.

First, add a class to your html document

<html class="no-js">...

Then put this little guy at the very-bottom of your scripts file:

(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)

And finally add this to your CSS, render content invisible until it loads:

.no-js {
 visibility: hidden;
 opacity: 0;
}

.js {
 visibility: visible;
 opacity: 1;
}

The obvious downside to this is pretty awful. If a user comes along that doesn’t have JS enabled, your page loads but it isn’t visible. It really comes down to a pros and cons list for your users. If you’re Facebook or Google, you probably have this baked into every single product because every single product uses JS in some small or large way.

I’m not saying this is the best solution ever — I’m just saying it’s the most effective solution we have right now. This method is a Frankenstein version of Paul Irish’s approach. Which if you’re going to use this FOUC solution you better be using Irish’s DOM Based JS Routing. Then you can really iron down when and where you want JS to fire.

Like what you see?

Join my newsletter for web stuff, design, and everything in-between. Delivered right into your inbox. You can unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *