Google Page Speed's "above the fold" CSS tuning

Question

Putting all 15kb CSS file inline on 100 pages of the site is not smart I think.

How do I pick which CSS classes and IDs from CSS file to put inline (and leave other ones on external CSS file) to a page so the Google Page Speed would give a better score?

UPDATE:

I actually tried doing the following: I truncated the HTML code on a few of the main template pages of the site to leave only content that is visible on 1st screen without scrolling. Then I loaded these pages in browser and used CSS Usage FireBug addon to mark the unused CSS classes. To my wonder, only 9 classes were really unused. Maybe this method is not 100% right.

But seems that when I put all CSS into each page but not as an external CSS file, Google gives me 100/100 for mobile and desktop, but if I use that as an external file (that seems to be the right choice if not taking Google serious) I am only getting 84-90/100

Other question: Do I better get higher ranked by Google Page Speed and expect better SE traffic my way, or I don't mind that and make it the correct way by having external CSS file with all CSS content?

Answer 1

Putting all 15kb CSS file inline on 100 pages of the site is not smart I think.

Correct, that would be bad. Primarily because the browser won't be able to cache this (or rather it will cache it once for every page!). It will be slower and will use more bandwidth.

I would only consider defining CSS in the HEAD section of the page itself (which I assume is what you mean by "inline") if those CSS classes / IDs are only relevant on that one page and there is no possibility of it being reused. Otherwise the styles should all go in your external CSS file.

You would perhaps only consider having the entire CSS in the HEAD section if you were developing a single page website (although for ease of development you would keep it as external until you distributed it).

If "page speed" is a concern then also consider implementing gzip compression on your pages if you haven't already. This serves the compressed page to the client (which is often considerably smaller than the uncompressed page) - so is a lot quicker and also saves you bandwidth.

Page Speed is just one metric that Google will use in order to determine ranking. But only if your site is particularly slow is it likely to count against you. It is more likely to affect your users than your ranking.

Answer 2

First thing you should do is enable the gzip compression in your server or hosting, the 15kb text files after compression is really small.

Inline or not inline is depends on how you manage your website. You don't really need to fine tune every page to do not contain un-used CSS. Just imagine if you have 10,000 page to manage. Sometimes inline CSS is slightly faster as no second request is required.

As the matter of speed, Google do say that page speed will affect ranking but the weight is, if your content is better than your competitor, slightly slower is okay. Therefore, if SEO is important to you focus on contents instead of managing CSS files.