Optimize CSS Delivery - a suggestion by Google

Question

Google suggests to use very important CSS inline in head and other CSS inside <noscript><link rel="stylesheet" href="small.css"></noscript>.

This raises few questions in my mind:

• How to prioritize CSS in two files. Everything for that page looks important. Display, font etc. If I move it to bottom then how it helps page render. Wont it cause repaint, etc?
• Is that CSS is required after Document ready event? Got it from here.
• How 'CSS can' go inside <noscript></noscript>, which is for script? Will it work when JavaScript is enabled? Is it browsers compatible?

Reference

Answer 1

Based on my reading of the link given in the question:

1. Choose which CSS declarations are inlined based on eliminating the Flash-of-Unstyled-Content effect. So, ensure that all page elements are the correct size and colour. (Of course, this will be impossible if you use web-fonts.)
2. Since the CSS which is not inlined is deferrable, you can load it whenever makes sense. Loading it on DOMContentReady, in my opinion, goes against the point of this optimisation: launching new HTTP requests before the document is completely loaded will potentially slow the rest of the page load. Also, see my next point:
3. The example shows the CSS in a noscript tag as a fallback. Below the example, the page states

   The original small.css is loaded after onload of the page.

i.e. using javascript.

If I could add my own personal opinion to this piece:

• this optimisation seems especially harmful to code readability: style sheets don't belong in noscript tags and, as pointed out in the comments, it doesn't pass validation.
• It will break any potential future enhancements to HTTP (or other protocol) requests, since the network transaction is hard-coded through javascript.
• Finally, under what circumstances would you get a performance gain? Perhaps if your page loads a lot of initially-hidden content; however I would hope that the browser itself is able to optimise the page load better than this hack can.

Take this with a grain of salt, however. I would hesitate to say that Google doesn't know what they're doing.

---

Edit: note on flash-of-unstyled-content (abbreviated FOUC)

Say you a block of text spanning multiple lines, and includes some text with custom styling, say <span class="my-class">. Now, say that your CSS will set .my-class { font-weight:bold }. If that CSS is not part of the inline style sheet, .my-class will suddenly become bold after the deferred loading has finished. The text block may reflow, and might also change size if it requires an extra line.

So, rather than a flash of totally-unstyled content, you have a flash of partly-styled content.

For this reason you should be careful when considering what CSS is deferred. A safe approach would be to only defer CSS which is used to display content which is itself deferred, for example hidden elements which are displayed after user interaction.