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 two widths actually used and encoded as AVIF and WebP with a JPEG fallback. Per-page imagery is now well under 200 KB.

The stylesheet is compiled at build time to one file of about 43 KB, roughly 8 KB over the wire, with a content hash in the filename so it can be cached for a year and still update instantly on change.

The font is one self-hosted variable WOFF2, 48 KB, covering every weight from 100 to 900, from this origin. No third party sees your visit.

The hero background that used to be a photograph is now two CSS radial gradients and a masked grid. It is decorative, so it costs 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 warns on a missing title or meta description. 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.