You're right [1]. I wasn't aware of that.
> I could probably improve it further with some page-specific splitting/inlining
My website(s) are very simple, so the CSS files are small. Even the larger pages are around 50 kilobytes plus images. That's why inlining is a no-brainer in my case.
[1] https://groups.google.com/a/chromium.org/g/blink-dev/c/K3rYL...
Re:Faster web fonts
by eyelidlessness on Saturday May 15, 2021 @07:41PM
(#27169957)
My current site is quite young, just 3 blog posts and a resume so far. The base shared styles are definitely small, but the resume and one of the blog posts add quite a bit more weight there. Both will probably share more with other pages as I add content, which is another reason I’m not ready to figure out how I want to split up the styles.
And I’m probably going to port it to another SSG framework[1] when I get the time and energy, and I’ll probably change a fair bit of tooling in the process.
Worth noting that Push has been removed from Chrome, which likely means it’ll eventually go away everywhere else it’s implemented.
> You can also limit how many variants you use. On my website, I dont have bold + italic text, to avoid loading a font. My secondary font is only loaded in one variant.
This is definitely good advice. On my site, I only load one font, used only for headings. Body text certainly can benefit from custom fonts too. But IMO if your headings stand out and the rest of your design is strong with good line spacing, it doesn’t hurt to try out common web fonts or a system font stack for the body text.
> I also realised small performance gains by inlining my CSS (although HTTP2 Push negates the benefits). This only makes sense for smaller stylesheets though.
This seems to generally be the trend, but when I built my site I decided to go the opposite direction and extract all of my styles into a single external CSS file for caching benefits. This turned out to have a negative impact on perceived load time—particularly blocking fonts, but also just some TTFP generally—so I manually inlined what felt like the most critical styles, which helped a lot. First load feels pretty much the same as inline on my connection, which isn’t especially fast, and subsequent loads get it cached.
I could probably improve it further with some page-specific splitting/inlining, but haven’t felt the need to prioritize that yet.