Google recommends inlining small CSS
developers.google.com
Google recommends inlining small CSS
1–10 of 143 posts
Re: Google recommends inlining small CSS
#2> If the external CSS resources are small
It's not a general rule, it's just suggesting that your 50 character block of CSS (that might be dynamic or conditional) would be better off as part of the main markup than a separate request and all the overhead associated with that.
If your static CSS exists in lots of small files, you would strongly benefit from rolling them together.
Both these recommendations may change with new delivery models (ie HTTP2).
Re: Google recommends inlining small CSS
#3> If the external CSS resources are small It's not a general rule, it's just suggesting that your 50 character block of CSS (that might be dynamic or conditional) would be better off as part of the main markup than a separate request and all the overhead associated with that. If your static CSS exists in lots of small files, you would strongly benefit from rolling them together. Both these recommendations may change…
Indeed, just logic
Re: Google recommends inlining small CSS
#4> If the external CSS resources are small It's not a general rule, it's just suggesting that your 50 character block of CSS (that might be dynamic or conditional) would be better off as part of the main markup than a separate request and all the overhead associated with that. If your static CSS exists in lots of small files, you would strongly benefit from rolling them together. Both these recommendations may change…
Interesting research about http2 - http://engineering.khanacademy.org/posts/js-packaging-http2....
Re: Google recommends inlining small CSS
#5This makes perfect sense for classes like ".article51_footer_wrapper_margin50", look up the rule, and sure enough it looks like `.article51_footer_wrapper_margin50 { margin-bottom: 50px; }`
Seriously, just inline rules like that. If it is only applied in one specific place across the entire site either because it cannot or does not need to be made more general, then inlining it is easier to maintain and understand.
Re: Google recommends inlining small CSS
#6Note they mean inlining the css rules in a block.
Not inlining the css as the style attribute of a tag.
The goal is not to have to fetch a second css page.
Re: Google recommends inlining small CSS
#7if you use the google pagespeed apache/nginx module it has an inline_css filter which does this for you, no need to cause yourself a maintenance problem.
Re: Google recommends inlining small CSS
#8If you have single-page web apps, you might as well inline your entire site's CSS, since it's never going to look for the CSS again.
Re: Google recommends inlining small CSS
#9This makes perfect sense for classes like ".article51_footer_wrapper_margin50", look up the rule, and sure enough it looks like `.article51_footer_wrapper_margin50 { margin-bottom: 50px; }` Seriously, just inline rules like that. If it is only applied in one specific place across the entire site either because it cannot or does not need to be made more general, then inlining it is easier to maintain and understand.
[deleted]
Re: Google recommends inlining small CSS
#10Are there any findings about whether such godawful class names affect rendering performance? I mean just matching strings such as this one:
com-google-api-explorer-client-history-EmbeddedHistoryItemView_HistoryItemUiBinderImpl_GenCss_style-showHideHeaders
It's generally really hard for me to take HTML advice from google seriously, their page sources at best look mediocre, and at worst they make my eyes bleed. How can code so complicated lead to such bland looking pages? I know I'm kind of being snarky, but I can't help it. Just look at the source of that page and the linked stylesheets, look at google.com, heck, if you can find me just one elegant page I'll be grateful, because to this day I haven't seen a single one.