Deleting a four-megabyte logo

The previous version of this site was one HTML file. It looked fine. It also shipped 6.4 MB of images to render a page whose largest visible photo is about 500 pixels wide.

The worst offender was the logo: a 2048×2048 PNG, 4.0 MB, displayed in the header at 40 pixels. Every visitor downloaded a four megabyte file to draw something the size of a fingernail.

What was wrong

Images at source resolution. Five photographs, none resized, none in a modern format. 6.4 MB total.

Tailwind from the CDN. The old page loaded cdn.tailwindcss.com, which is the browser-based compiler. It is a genuinely useful tool for prototyping and its own documentation says not to use it in production. It ships a compiler to every visitor and generates the stylesheet at runtime, after the HTML has parsed.

Fonts from Google. A preconnect, then a CSS request, then the font files, from a third party, before text could render in the right typeface.

A nav link to a page that did not exist. blog.html returned 404. It had presumably been broken for a while, because nothing checks.

What it is now

Images are resized to the widths actually used and encoded in modern formats with fallbacks. Per-page imagery is now well under 200 KB.

The stylesheet is one hand-written file, cached with the fonts after the first page. The fonts are self-hosted variable and static WOFF2 subsets served from this origin. No third party sees your visit.

The hero background that used to be a photograph is now gradients, a masked grid and a small canvas. It is decorative, so it costs almost nothing to download.

The part worth stealing

None of the above is clever. It is the boring version of every performance article ever written. The reason the old page was slow is not that anyone chose badly — it is that nothing in the workflow ever measured it.

So the build now reports the size of every page it writes, and the footer of every page on this site prints its own gzipped weight. It is a small thing. But a number printed on every build is the difference between noticing a 4 MB logo and shipping one for a year.

Written from production, not theory — see the systems or more notes.