If you can't inline your CSS... what can you do?

Inlining CSS is a powerful tool if your critical CSS is small enough and your development process allows automation of it. The first thing can be achieved by using TailwindCSS, the other one is much more tricky. If you cannot do both, you might want to skip inlining CSS altogether, because long-term cost might outweigh the benefits. Unhappiness of your teammates is also a cost. Recently I found a way to improve render time of an already fast website, where we could not inline CSS for above reasons.

Before

By default a lot of pages are using main domain for html (app server) and put assets, including blocking ones, on CDN. This forces browser to negotiate SSL with second domain before anything can be painted on the screen. You can see that on below screenshot at position 2.

Waterfall before

Step one

After putting main CSS on the same domain, we can observe start render (first green line from the left) move left a little bit on the timeline. This is what we were going after.

Waterfall after step one

Step two

On this particular page, some menu items require javascript to work properly. To make menu interactive as soon as possible I decided to serve JS from the same domain as well.

Waterfall after step two

Note

If you want to minimize the speed penalty caused by not using CDN, use CDN behind the path you used for assets. You can configure your http server (or Cloudflare if you use it) to forward requests starting with /assets path to mycdn.com/assets/. And this is how it works in this case.

You might ask, why bother with all this if it’s only 30-50ms faster. Well, you are right. You might have much bigger fish to fry. In this case I was close to the wall. It was easy gain and those are pretty rare when you used all the standard methods already. The law of diminishing returns is a real thing. The faster your page get, the harder it is to get faster.

Cache busting

Cache busting is still a thing, and you need to remember about it. The most common ways of invalidating cache is by changing the filename, or adding query string when requesting it.

If you don’t do that, your CDN might ignore file changes you deployed.