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.
We’ve built a CPCSS generator that you can use if you just have a few pages that you need to resolve the Flash of Unstyled Content for:
Free Critical Path CSS Generator
Just enter your URL, and hit "Generate". Pegasaas will analyze your page and return the Critical Path CSS that you can insert into the <head>...</head> of your page.