I was exploring patterns that enable the browser to render a page as fast as possible by including code alongside the initial HTML so that the browser has everything it needs to start rendering the page, without making additional requests.

Our two go-to options to achieve this goal are inlining and server push (more on how we use those), but each has drawbacks: inlining prevents a file from being cached for reuse, and server push is still a bit experimental, with some browser bugs still being worked out. As I was preparing to describe these caveats, I thought, “I wonder if the new Service Worker and Caching APIs could enable caching for inline code.”

I’ve been dabbling a bit with service workers over on Brightly Colored to improve the loading time, so this exploration of caching inline CSS is fascinating. In fact, I used to completely inline all the CSS on the site, but switched to a file request because of the way I thought service workers, well… worked. Surprisingly, this implementation doesn’t look too difficult.