Fewer connections before the first paint
Every extra host a page talks to costs a DNS lookup, a new connection and a TLS handshake before the first byte arrives. When fonts come from the same server as the HTML, they travel over a connection that is already open. We preload the main font file so the browser starts fetching it before it finds the font in the stylesheet.
We serve Manrope and IBM Plex Mono in two subsets, Latin and Latin Extended. The second one carries the Turkish letters, so the Turkish pages do not fall back to a system font while the real one loads.
One video, two encodings
The hero video stayed 4K; we did not want a softer picture. What changed is the encoding. Browsers that can decode AV1 receive a 3.1 MB file. Everyone else receives an H.264 version at 10.7 MB. The page checks the browser’s canPlayType answer and picks one. The file we replaced was 23.7 MB.
The video also loads only when its section is close to the viewport. Until then the browser shows a poster image, which is small and arrives early.
Caching that fits each file
The font files do not change, so they are cached for a year. The video is cached for thirty days. HTML is not cached at all, so a fix is visible on the next visit. Stylesheets carry a version in their URL, which lets us cache them for a year and still ship changes immediately.
Privacy and control
A font service sees the IP address of everyone who opens the page. A self-hosted font reveals nothing to anyone beyond the server that already delivers the page. The files also stay where they are: no service can retire them, rename them or change their terms.
The one external script left on the site is a cookieless analytics beacon. We named it here on purpose, so the claim above stays accurate.
What it cost
An afternoon: subsetting the fonts, encoding the video twice, writing the cache rules and checking every page afterwards. For a small site that is a fair trade for pages that load from a single origin and keep working without anyone’s permission.
If you are weighing the same change for your own product, start with the fonts. They are the easiest to move and the first thing a visitor waits for.