15

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

Community
  • 1
  • 1
Satya Prakash
  • 3,372
  • 3
  • 31
  • 47
  • 2
    Good question. In a brief experiment, the request inside `noscript` is not made when script is enabled (which makes sense). Furthermore, the document structure they suggest [doesn't validate](http://validator.w3.org/). – Tim M. Oct 17 '13 at 07:43
  • 1
    CHeck out this video about how to determine critical css by guys from google: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/ – 2507rkt3 Oct 17 '13 at 18:24
  • 1
    I wouldn't trust everything that google says :-) Their code is ugly and never validates, and they usually don't follow their own rules. One must bear in mind that Google is only as good as their employees, and they are also humans :-) – Dziad Borowy Oct 17 '13 at 20:03
  • I guess this advice is somehow related to their 14kb advice, where important css should go to the first 14kb of a page. As far as I remember this was related to how fast these first 14kb get loaded but I never found a real explanation. –  Oct 17 '13 at 20:15
  • 1
    The ` – Fabrício Matté Oct 17 '13 at 20:18
  • But on google link, i have mentioned, they have example showing noscript with style. I think we need to ask google to describe it in more detail, or delete it from pagespeed checklist. – Satya Prakash Oct 18 '13 at 08:38
  • @tborchowski right, i just got 94/100 for desktop and the point in question is the only road block. It comes in adsense / analytics suggestion. – Satya Prakash Oct 18 '13 at 08:41

1 Answers1

5

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.

Jeremy
  • 2,642
  • 18
  • 36
  • Can you please add more about "eliminating the Flash-of-Unstyled-Content effect"? This looks something actionable even if very minor. – Satya Prakash Oct 22 '13 at 06:19
  • 1
    @SatyaPrakash sure, edited the original answer. Hope that helps; if you're unfamiliar with the concept, googling "FOUC" should get you more resources too. – Jeremy Oct 22 '13 at 07:50
  • Ok, 2 votes and possibly accepted answer. As you said, to me also, it looks, this Google rule is worth not implementing. – Satya Prakash Oct 22 '13 at 11:32