Shipping a site under 50 KB

Every page on this site prints its own weight in the bottom-right corner. The number is measured, not estimated. After each build, a small script compresses each page and everything it loads the way the CDN serves it, then writes the total into the page.

Printing the number changed how I build. Adding a library becomes a visible cost, so the site has no client framework, no analytics and no third-party requests.

What’s in the budget

• HTML and CSS. Styles are inlined into each page, so there is no render-blocking stylesheet request.
• Fonts. Three typefaces, self-hosted and subset to Latin. They are the largest part of the budget, and the one I’m least willing to cut.
• Photographs are counted separately. A photograph is the point of the page it sits on, so it shouldn’t share a budget with the CSS.

What isn’t

There is no JavaScript framework. The only script lets the arrow keys page through a photo series. The fade between photographs comes from the browser’s own view transitions, which cost nothing to load.