It is no secret that Google loves fast websites, and considers page speed as a factor when deciding page rank.
While Google has a very detailed guide related to page speed and how to optimize your website, it has also recently added that small CSS should, preferably, be inlined.
What exactly is “inlining”? Ideally, if the external CSS resources are small, you should insert those directly into your HTML document, and this is known as inlined small CSS. This will, obviously, help with faster rendering of the page in the web browser and therefore, yield a better result in terms of PageSpeed Insights.
However, a word of caution is advised for web developers who are looking to inline small CSS in their code. Larger CSS resources and stylesheets should preferably not be inlined. In other words, inlining should be reserved for just small CSS resources.
More importantly, you should also avoid inlining CSS attributes within HTML documents, simply because it might lead to code duplication.
To learn more about how to inline small CSS, check out the CSS optimization guide by Google.
What do you think of this practice? Share your views in the comments below.
Any idea what Google considers ‘Small’?
Absolutely, what do they mean by small?
As a developer using standards published by W3, I would still recommend not using inline CSS directly in the HTML. That was the whole idea about having only 1 stylesheet to a complete website, so it could be easily changed one place and cascade throughout the intire website layout.
But on the other hand, that practice was developed before the internet became mobile first. And now it seems to be more important to have a website, that loads faster due to more excessive use of smartphones and tablets to surf the net.
If you have a dynamic website that loads all content on the indexpage anyways, then maybe it is not a bad idea to inline the CSS for all standard elements in the HTML.
Can’t agree more. +1
That’s not what that’s called. In-lining CSS is literally putting it in-line – on the markup – in a style attribute.
What you’re referring to is “embedding”. That’s when the CSS is dumped into the document inside of the “” tag.
Either way, I don’t think it makes any sense that Google would suggest this. What they should be saying is “don’t make another request for that little amount of CSS, put that CSS into an existing stylesheet.”
Inline styling likely makes more sense than embedding CSS in the document. This makes sense because modern rendering engines in browsers take performance hits mostly for selector volume. So, Google may be saying – don’t make a selection in CSS to apply a single rule to a single element – just place it in a style attribute on the element itself. This makes sense. That being said, I find it ridiculous to be concerned with making a handful of additional selections in CSS when you’re likely already making 5000.
My take on the matter: do what is appropriate for the given case and it honestly doesn’t matter. It’s not worth even thinking about – by the time I finish this comment, my browser probably could have parsed and rendered a month’s worth of pageloads.
Unless fully understanding what you’re doing, and having a very compelling reason for it, this is not advice you should take. CSS in the stylesheets. We have learned the lesson already.
Inline CSS is the fastest way to make responsive development a nightmare.