Search code examples
htmlcssperformancepagespeed

Inlining CSS in HTML for page speed

I was trying to optimize my web site speed for Google's PageSpeed Insight. The speed test complained about my external CSS files, so I tried inlining them in the HTML document, which lead to a significant increase in the reported page speed.

Now, my CSS styles are not exactly tiny. I have inlined about 12 KB of CSS code, making every page effectively 12 KB larger. So in essence this should make page speeds slower for all users that view more than one page.

I know that Google recommends only inlining "small" style sheets. I wouldn't really consider 12 KB to be very small. So I am actually not very happy with this solution and I'll probably restore my previous version.

Are there any recommendations on when to inline and when not?

Thanks

Solution

  • Best way is using external css files but compressing them and then using those compressed version. This will significantly will reduce the size of files and will also increase the page speed.