Eliminating the Flash of Unstyled Content

One of the most perplexing issues, when optimizing your website for Google PageSpeed, is how to deal with the flash of unstyled content once you defer your render-blocking stylesheets.

So, I’m assuming that you’re reading this because you’ve come across the same issue.  You’ve deferred your rendering blocking CSS, but you get the flash of black text on a white background for a second or two.

And it makes your website look awful.

And then you blink and your stylesheets all load in, and it is as it should be.

But for those few, seemingly incredibly long, seconds while your stylesheets load, you can’t help but feel as though you’re “throwing the baby out with the bathwater” by trying to optimize your website for Google PageSpeed.

But there is a solution!

And that 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-path (above the fold) cascading styles for your page.  Critical path (above-the-fold) styles are what are required to render all of the content that is within the viewport of the browser, when a visitor first comes to your page.

Yeah, okay, you maybe already knew that.  So how do you GET this “critical above the fold css”?

There are two ways: manually, or automatically.

Manually (also known as the “hard way”)

There are a few ways that you can 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.  There is also the criticalcss.com website where you can sign up for a monthly fee to get as much critical CSS as your heart desires.

But the trouble with each of those methods, is that even if you can figure out how to GET the critical CSS, you then have to manually insert the styles into each of your web pages, individually.  And if you ever change anything on your web pages, or in your CSS, you have to manually re-calculate the critical css once again, an then once again re-insert the styles into your web pages.

Sounds like fun right?  Maybe not so much.

Automatically (also known as the “easy way”)

So this method is actually a lot more fun.   And by fun, I mean you’re not wasting your time messing around with something that just happens for you — it means you can go do something fun (or productive) with your time.

Wouldn’t it be awesome — that’s right, magic carpet ride time — if you could “flick a switch” and your critical CSS is generated and automatically injected inline into your web page?

Wouldn’t that be awesome?

Yes, yes it would.

And guess what!  You CAN do just that.

You see, we developed this handy-dandy feature into our Pegasaas Accelerator automated Google PageSpeed optimization plugin for WordPress.  Pegasaas Accelerator just does it it.  Automatically.  Like freaking magic.

When a page is requested, the system checks to see if the page has the critical-path CSS cached.  If it does, it then checks to see if the page or post has been updated since the critical styles had been generated.  If it ends up not having any critical path css, or recent critical path css, then it requests, from the Pegasaas API system, the generated critical path CSS for the page or post.  That request gets queued in our system, and then when the CSS is ready, Pegasaas automatically communicates with your website for you that the CSS is ready.  Then, on the next request, your page has the CSS automatically deferred, and the critical-path CSS is automatically injected inline into the <head>…</head> region of your page.

Again, it all happens automatically.  Wayyyy better than the manual method.

On top of that, it also applies a whole arsenal of other techniques to speed up your WordPress website and rocket your Google PageSpeed score.


On a side note, if you are running a traditional website (not WordPress) we also developed a server-side website plugin for non-Wordpress websites that performs the same amazing Google PageSpeed optimization as Pegasaas Accelerator.  You can learn more about Numo Accelerator at i3dthemes.com.

5 Replies to “Eliminating the Flash of Unstyled Content”

Leave a Reply

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