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.
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.
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.
- CSS is still blocking
- CSS and JS might be slower to download than before
- But time saved on SSL handshakes makes up for the difference, and hopefully more
- The bigger the latency, the slower the handshakes, so the difference will be biggest on slow connections
- SSL handshake with CDN domain still has to happen, just in the next request (number 4).
- But that is a good trade-off, since it is a low priority image. If it was high priority, I could inline that SVG and get rid off the request altogether
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 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.
- File name:
- Query string:
If you don’t do that, your CDN might ignore file changes you deployed.