I recently got Harry Robert’s course on CSS performance (you totally should to, it’s a goldmine of information) and worked on improving performance for this site. I quickly spotted 2 performance bottlenecks: requesting the stylesheet, and requesting the main script.
I had about 4.7Kb of CSS, and less than 1Kb of JavaScript, so I figured the HTTP requests weren’t that necessary at all and I could inject styles and scripts directly within the page to avoid HTTP roundtrips. Inlining CSS and inlining JavaScript is explained in the 11ty docs, so not really warrant of a blog post I head you say.
Now the thing is not all styles are necessary on all pages. For instance, the home page have some components that do not exist anywhere else on the site, and an article page like this one has a lot of styles which are not needed anywhere else (code snippets, figures, tables, post date…). So instead of inlining 5Kb of CSS in the head, most of which would not be needed, I decided to split it across pages.
My CSS (formerly authored in Sass) is split by concern, somewhat following the 7-1 pattern (my JavaScript also follows a similar structure but I’m going to drop it from now on for sake of simplicity). That’s good because that mean I didn’t really have to figure out how to break it down—I only needed a way to include specific parts in specific contexts. Namely:
- Including the core styles (such as layout & typography) in every page.
- Including page-specific styles (blog post, home page, resume…) on specific pages.
Implementation
The implementation concept is relatively simple: in the of the document, include all core styles in a