Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
1  
Is Google checking just 1 page when you have your CSS embedded? Because 1 page will potentially be slightly quicker with the CSS embedded since it avoids the additional HTTP request. However, if the CSS is external (and therefore cached) then the 2nd request should be quicker. –  w3d Feb 20 at 16:00
    
@w3d is correct. Google doesn't index just one page, it reads a bunch of pages, and thus, only reads the external CSS once. Definitely put all shared CSS in one external file, and many argue that you should just put all CSS in one file, and minify it plus use site compression. –  Rodolfo Feb 20 at 22:09
    
My CSS is minimized and I am using GZIP compression. Google page speed penalizes by lowering the speed score if I use external CSS and JS files as they they this slows down the correct displaying of 1st screen... –  CamSpy Feb 21 at 8:27
    
+ look into the code of Google pages, you will see that Google has all javascript and CSS inline, not as external files. This is some serious sign... –  CamSpy Feb 21 at 8:32
    
It depends on what Google pages you are referring to. The Google home page, for instance, is possibly the single most popular page on the planet (emphasis on single) - so inlines everything. However, other pages, such as the GWT Help pages refer to both external CSS and JS files. This is what CDN are specifically designed for. –  w3d Feb 21 at 11:25

2 Answers 2

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.