But I wanted to go the extra mile and make it as fast as possible…Making it fastMy main realization: Network requests are costly — big surprise, I know.There’s a trade-off between loading separate resources such as CSS and fonts so they can be cached independently, and including them right in the initial response so the browser doesn’t have to make another network request..For a personal page like mine, the same client will realistically not visit it too often, making caching less important..So I decided to inline all the things!I started with some CSS that was in a separate file originally..Even if it wasn’t needed right away, it’s just not worth another network request for less than 500 bytes.Next up: the SVG icons..They’re less than 2 KB each and they are needed right away, so saving three extra network requests by inlining the SVG in the page’s HTML makes sense.The biggest potential was loading the web font, though..It was large, loaded from another domain, and delaying the time until the page was fully rendered..Even if the main text (using the system font Georgia) was rendered before, the title would only come in later, causing the other text to shift around a bit..The steps to optimizing this:Host the font on my own server instead of Google Fonts..This sacrifices any chance of the font already being cached, but avoids an extra DNS lookup, SSL handshake, etc..Also, I’m still a bit unsure about the GDPR compliance of Google Fonts, althought this discussion suggests it should be fine.Subset the font..Since we only use the font to render the text “Jan Pöschko”, we only need a small fraction of its glyphs..Aggressive subsetting wouldn’t make sense for a (potentially cached) font on a CDN used for a lot of varying text, but that’s not the case here.. More details