~ ~ whoami whoami projects projects blog blog

Because every time I see 5MB of JavaScript, I die a little inside

The web has grown fat. The median web page is 8% bigger than it was just one year ago, and the average page is now 3MB in size. To put this in perspective: my entire website (including HTML and CSS) weighs 43KB. That's 70 times smaller than the average.

This isn't about being nostalgic or contrarian. It's about proving that you can build something functional, accessible, and fast without the bloat. Plus, there's something deeply satisfying about watching modern sites struggle to load their cookie banners while my entire site renders instantly.

The Numbers Don't Lie

When I analysed my site's actual metrics, the results were stark:

But here's my favourite nerdy detail: I maintain each individual page under 14KB. Why? Because that fits within the first TCP packet a visitor receives (typically 14.6KB after headers). It's a completely arbitrary challenge I set for myself, but there's something beautiful about serving an entire webpage in a single network round-trip.

Compare this to modern websites that routinely ship 300-350KiB of JavaScript alone, not counting HTML, CSS, images, or fonts. My entire site fits in what many consider a reasonable JavaScript budget. It's like bringing a bicycle to a monster truck rally and somehow winning.

What Modern Web Bloat Actually Costs

The data on web performance impact is unforgiving:

But it's not just about speed. Mobile web pages typically require 70.9% more time to load compared to their desktop counterparts, and many users have data limitations that make bloated sites genuinely expensive to access.

How I Built Lightweight Without Sacrificing Functionality

My approach was surgical: every byte had to earn its place.

No JavaScript, The entire site works with pure HTML and CSS. This eliminates parse time, execution overhead, and all the complexity that comes with modern JS frameworks. Who needs React when you have CSS pseudo-selectors and spite?

CSS-only interactions, Theme switching, navigation, and even project filtering all work through CSS pseudo-selectors and the `:target` pseudo-class. No runtime overhead, no framework dependencies. It's like magic, but the kind that actually works reliably.

Semantic HTML structure, Clean markup that works well with screen readers and loads instantly on any device.

Zero external dependencies, No Google Fonts, no CDNs, no third-party resources. Everything loads from the same domain using system fonts.

The result? A terminal-inspired personal blog with dark/light themes, project showcases, and full functionality in 43KB total. It loads faster than most sites can display their loading spinners.

Proof That Performance Culture Matters

Page bloat happens when people stop paying attention. Every framework update, every new dependency, every "small" addition compounds.

My site demonstrates that you can have:

Beyond Personal Preference

This isn't just about my blog. It's about proving that efficiency and functionality aren't mutually exclusive. While others debate whether 300-350KiB of JavaScript is "reasonable," I built a complete site with advanced features in 43KB.

The web's bloat problem isn't inevitable (it's a choice). Every kilobyte matters when your users are on limited data plans, older devices, or unreliable connections.

The bottom line: If I can build a functional personal site with theming, navigation, and interactive elements in 29KB, what's your 3MB site actually delivering that mine isn't? Besides frustration and loading screens, that is.

This site lives at cleencode.dev and serves as a practical demonstration that web development doesn't have to be heavy to be powerful. It's also proof that sometimes the best framework is no framework at all.