While tackling a TODO task on a client's mobile web app, I noticed it was loading nearly 15Mb of non-app scripts. This included several third-party marketing/user assistance/analytics scripts, CDN hosted libraries, some ad scripts, and their embedded videos where also loading their own cornucopia of scripts, cookies, and trackers. FIFTEEN MEGABYTES! I sighed as I injected the 13th "user-experience-enhancing" tool into the app…
"Oh the modern web." I lamented - my tired smugness tinged with sadness - "Why can't you be more like my blog. It's a beacon. An oasis in this privacy-hostile, bloated world. No tracking, no ads, no client-side frameworks. Just hand-rolled, artisanal code - the epitome of integrity… what the web should be."
Then, out of interest, I opened a dev console on mrspeaker.net.
What I saw shook me to my very core.
I got fat, and chatty
The simple old hompage of Mr Speaker weighed in at over five megabytes. Five. I did a cartoon-style double take and restarted Firefox to make sure it was not a mistake. It was not. The network requests linked to six third-party domains… including Doubleclick! Cookies for Google, Youtube, A bunch of CDN calls, a huge custom emoji file (particularly disheartening as there is a site-wide emoji ban on mrspeaker.net).
I didn't even know where two-thirds of the scripts were getting loaded from, or what they were doing... all those page-loads going off to random data silos. It happened so slowly I didn't even realise I'd done it: I'd become the modern web. I was making the problem worse.
This was critical. I had to make the world a better place for poor souls who accidentally googled "hacking windows pinball" and landed in the middle of my privacy-invading, bloated mess.
Begone, third parties
- Removed Google analytics. I think there charting/reporting on logs from my webserver if I needed it. (I don't).
- Set privacy on embedded YouTube videos. Stop setting them cookies.
- Removed web fonts linked to google. Google doesn't need to know every page you visited.
- Moved hot-linked images from GitHub to local. Microsoft doesn't need to know every page you visited.
- Removed Three.js. Now instead of spinning cubes, you get a crappy triangle: but I'm capable of hand-rolling some neato WebGL. Also, I was CDN-ing Three.js and the CDN doesn't need to know every page you visited.
- Moved jQuery local. The jQuery team doesn't need to know every page you visited.
WordPress, you're not helping
Next up, time to take a look at my self-hosted WordPress install. It was always pretty bloated - and I use such a small percentage of its features that I really should switch - but hey, I've had 15 years of not doing any maintenance on it, so I can't be bothered starting now. Over the years they've added a lot of extra stuff, and I was forced to dig in a bit to de-cruft it:
- Removed HTML cruft. It was spitting out a LOT of meta tags and other stuff in the HTML that I did not need. I also tidied up the view-source formatting so it's less HTML soup-y.
- Audited my WordPress "theme". I used some minimal theme from over a decade ago that I'd never looked at. It was outputting so much of redundant HTML and class names that I could chop.
- Audited WordPress functions. Didn't reduce the external bloat, but the PHP pages are a lot smaller now!
Fix my own shit
- Refactor/remove a bunch of nonsense in my JS files
- Re-encoded large images - I like images, but 250k for a picture of some popcorn kernels baked in sourdough bread? That's too much.
- Made it validate. Now the W3C validator says "You're good"… Party like it's 2008!
- Force HTTPS. And some other refactoring/tweaking my .htaccess file.
My goal is to make every page (not including games and other standalone experiments) be under 500Kb, and (where possible) not give people's info to other people's businesses. Perhaps I'll look into self-hosting videos too - YouTube is pretty much the last third-party I can't see how to ditch.
Web smugness restored
What I learned from this experience is that every tool, every dependency, everything you put in your codebase that you didn't make yourself comes at a cost. Sometimes the cost is small, but we're so addicted to convenience and those costs accumulate.
The cost of convenience can be bloat (your blog platform thinks everyone needs emojis). Or the cost can be privacy (Your CDNs and providers receive all your user activity and data. They know more about your business and users than you do). Or the cost can be you just don't know what's going on in your system anymore.
Also I learned that I've written a lot of weird stuff on this blog over the last decade-and-a-bit. Here's to many more weird, non-bloated, non-privacy-invasive years to come!