Inline CSS? Thoughts, opinions?


#1

I guess this would boil down to which one values more, ease of maintainability of your code/language or page load speed performance and thus perceived performance. However, if you can keep your HTML+CSS (combined) under 14kb (using gzip compression) would there be any real negative to making your CSS inline?

I know the current way to do it is like this:

{% capture include_to_sassify %} {% include css/main.scss %} {% endcapture %} {{ include_to_sassify | scssify }}

I have very small pages (on average 5kb) and my full css stylesheet is only 2kb when gzipped. Would it be worth it to just inline the whole thing, or should I keep that 2kb cached? I use Cloudfront to serve my files. It seems like such a trivial amount that keeping it cached would be a joke.

I guess what I’m looking for is any strong arguments for against inlining my styles?


#2

I say test it with and without inlining you’re CSS with WebPageTest, PageSpeed Insights, and GTmetrix and see how it fairs.


#3

I’ve since stripped down my CSS into individual components for specific pages and now have a google PageSpeed Insight score of 100 on both the mobile and desktop versions. GTmetrix tells me the load time is about 0.4ms roughly, but I’ve learned some things from these resources. For example, I did not know you can serve a gzipped ico file. Some other suggestions on those sites I will probably follow, I have a very small javascript file so I’ll be inlining it.

Improving speed is becoming an obsession I think.

Thank you for the useful resources.


#4

One downside to inlining CSS in this way is that it can impact your build times.

Running the scssify filter at the top of each page means that the same SCSS gets compiled to CSS on every page. That can add up if you have a lot of pages. I’ve been living with it for now, since I’d rather not pass the cost onto the end user, but I’d like to find a better way.