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.