Putting the boat on a diet
A fundamental premise for popsicleboat is no ads, no tracking, no scripts riding along on your site if you host your comments there. Also, it should be as lightweight as possible without sacrificing features. It occurred to me to check what happens when I use it for comments (a main feature) on this, my site.
I measured a logged-out thread page. 843 KB. For what? So I dug in.
The ledger #
| Bytes | |
|---|---|
| JavaScript | 325 KB |
| Images | 276 KB |
| CSS | 229 KB |
| HTML | 13 KB |
Cut one: the call system nobody logged-out can use #
A third of the JavaScript was the WebRTC video-calling machinery, so signaling, peer connections, reconnect logic, the call dock, etc. All of it shipped to readers who can’t place a call, because calling requires an account.
The fix was a webpack dynamic import: the entire call system moved into a chunk that only loads when the page carries a signed-in signal.
Cut two: a 40-pixel logo served as a giant PNG #
The header logo is an ankh about 40 pixels tall. It was being served as a 923×1352 PNG, twice, a light variant and a dark one. That’s 244 KB for a tiny glyph. One ImageMagick command took it to 9 KB. I’d been busy tuning the JavaScript I found interesting while the real weight was three files I hadn’t looked at since the beginning.
The ledger, after #
| Stored | On the wire | |
|---|---|---|
| JavaScript | 213 KB | 65 KB |
| CSS | 217 KB | 39 KB |
| Images | 24 KB | 13 KB |
| HTML | 13 KB | 13 KB |
| Total | 468 KB | ~130 KB |
A Phoenix LiveView social app with a video-calling system and live chatting, invisible until you sign in, now costs a reader less transfer than most sites spend on web fonts.
The details of untangling the JS are a little boring, so if you’re reading this know I deliberately spare you those. This is just a summary of what I found and how it is better now. I don’t want anyone to feel obligated to anything, but I want everyone to feel free to enjoy without bloat.
