4

I'm conscientious when it comes to building web pages and my PageSpeed score always used to be around 90-100.

However in recent times it has been in the 80's for desktop and and 70's for mobile.

The main thing I struggle with is "Eliminate render-blocking CSS in above-the-fold content." I understand what this means and I understand how to fix it, but I cannot see that it is at all practical to do. If I'm understanding correctly:

  1. You have to determine which CSS is required to render above the fold content and inline it - although this is a challenge it's probably the least of our worries compared with the following...

  2. Your regular external CSS file will still render block, so you then have to defer this and load it via JavaScript instead. I find it kind of incredulous that we're relying on JavaScript to help style the page.

  3. The inlined content won't be cached. And if your above the fold content is things like your header and navigation this is likely to be the above the fold content on every single page and thus the caching of the associated styles is surely a good thing.

  4. If you have multiple break points in a responsive design, to avoid a flash of unstyled content you would presumably need to include various media queries within the inlined content. And then have the same media queries within your external CSS. And then if ever you change them, remember to change them in both places.

  5. If your site is very basic then the inlined content might be quite small, but with a more complicated design the inlined content might be quite large. Besides which separating the two is a nightmare from a workflow point of view.

Am I the only one who feels bitter about this? Are there any examples out there where people are doing this effectively? (the only examples I've seen is where people inline their entire CSS which I don't believe is a good solution).

Is it conceivable Google will eventually drop this recommendation on the fact it does not appear practical for 99% of websites?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
MrCarrot
  • 2,546
  • 1
  • 23
  • 29
  • 1
    I tend to not worry about it and focus on all of the items that I can address, interested to see some in depth answers/opinions here, although there are similar questions already: http://stackoverflow.com/questions/18761251/eliminate-render-blocking-css-in-above-the-fold-content?rq=1 – David Alsbright May 28 '15 at 22:39
  • I too am bitter! Was wondering if you've changed your views at all? – D.Tate Mar 31 '16 at 22:41

1 Answers1

0

I think it is hard to determine which CSS is needed for above-the-fold content. See for example this article by Luke Wroblewski: There is no fold. Using inline CSS in the head might be a good idea for pages that have a huge CSS file because the perceived performance is improved, but in general I tend to keep my CSS file small and to compress&gzip it.

If your sites CSS is pretty small it might be better to inline the CSS because the HTTP Lookup, server response and sending the file might take more time than actually simply having the CSS in the head of the HTML.

I also agree with 3), that the CSS is not cached. Inlined CSS might be useful for a microsite or a landingpage to have a fast loading page to increase conversions, but it might have a bad influence on an online-shop because people are usually more "browsing" the page and therefore load different pages (and always need to load the inlined CSS).

There seem to be some discussions about whether CSS should be inlined. Also, Google PageSpeed gives you recommendations on how to make your page load faster, but its not said that they are always right. There are so many different websites, you should always see for every page what can be improved in which way. Sometimes it's not the inlined CSS that improves the page load but an image that is removed from the page.

  • Yes I always compress and gzip CSS and keep everything to a minimum, however render blocking CSS is always an orange or red exclamation mark in my PageSpeed results and seems to be bumping scores down by a fair amount – MrCarrot May 29 '15 at 10:20
  • As I said, Google only gives recommendations. It shouldn't be your goal to have 100 percent on Google PageSpeed but to have to best speed for your users. If you don't feel comfortable with inlining CSS then don't do it. You can also run some tests (A/B testing) to see if the load time improves in a way that it is worth inlining it and ignoring things like caching. –  May 29 '15 at 14:56