Skip to main content
Tweeted twitter.com/#!/StackWebmasters/status/436540485545754624
added 857 characters in body
Source Link
CamSpy
  • 1.6k
  • 2
  • 17
  • 24

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?

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?

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?

Source Link
CamSpy
  • 1.6k
  • 2
  • 17
  • 24

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

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?