How to Stop the Flash of Unstyled Content

How to Stop the Flash of Unstyled Content on Your Web Pages

So you’ve decided to optimize your website for Google PageSpeed.  Excellent!

And you’ve deferred all of your CSS references to the bottom of your page using the loadCSS function.  Super!

But then… what’s this?  Why does your web page look awful for a second or two?

It’s because for a brief moment in time — that seems like an eternity —  your web page has no styles applied to it.  All of your CSS resources are loaded “asynchronously”, which means, “at the same time” as the rest of your site.  And that means that for a brief period of time, the HTML of your web page is rendered without any corresponding styles.

This is called the “Flash of Unstyled Content”.

And it looks awful.

But it loads fast, right?

Yep, but it still looks awful.

So how can we have our web pages load fast, but still have the CSS deferred using loadCSS?

Well, here’s the crux of the problem.  It seems like a catch-22 problem.  If you put the CSS at the bottom, the page looks cruddy, and you have to wait until the CSS loads, which seems to defeat the entire purpose of deferring the CSS in the first place!

But, there is a solution!

The solution is to insert within the <head>…</head> region of your web page, a block of inline styles (<style>…</style>) that contain all of the critical above-the-fold CSS for your page.  Critical above-the-fold styles are what are required to render all the content that is within the view-port of the browser when a visitor first comes to your page.

So how do you GET this “critical above-the-fold css”?

Manually (aka, the hard way)

Well, there are a couple of ways to do it manually.  There is a bookmarklet/Chrome dev tools snippet from Paul Kinlan, as well as one from Scott Jehl.   Probably the easiest of the manual methods is the online critical css generator.

The trouble with each of those methods, however, is that even if you can figure out how to GET the critical CSS (which is time consuming for some, and often incomplete), you then have to manually run the function on each web page, individually, and then manually insert the CSS into your web page.  And if you ever change anything on your web pages, or in your CSS, you have to manually re-calculate the above-the-fold css again, and manually re-insert the styles into your web pages.

Ugh!  Sounds time consuming and problematic, right?

Well, that’s because it is.

Automatically (aka, the easy way)

Okay, so this is where we get to the good stuff.

Wouldn’t it be awesome — I know, magic carpet ride time — if you could just upload your web page, and it automatically had the critical above-the-fold CSS applied to the page, and had the stylesheet references all automatically deferred to the end of the page?

Wouldn’t that be awesome?

Yeah, it would.

And guess what?  You CAN do just that.

You see, we developed a handy-dandy freaking amazing tool called Accelerator that does JUST THAT.  Accelerator is a website plugin that once installed to your website (which takes like five minutes), automatically calculates your critical above-the-fold CSS for you, and automatically inserts it into your web pages.  Automatically.  All for you.  Like freaking magic.

On TOP of all that, it also applies a whole arsenal of other techniques to speed up your site and rocket your Google PageSpeed score.

In fact, we’ve seen web pages that when they have installed Accelerator go from 0/100 to 97/100 instantly.

And the real beauty of Accelerator is that it does it to all of your web pages, throughout your ENTIRE site, all automatically.

So if saving time and headache is what you’re all about, and you want to avoid the dreaded flash of unstyled content, then check out Accelerator.

Or, you can buy it now and start enjoying a faster loading web site in just minutes.