Oh hello again, been a minute, howzit?
So I thought I'd write a post about performance; I been kinda weirdly obsessed for at least 15 years; I think I got hooked by legends like Paul Irish and Addy and Bruce L back in the day.
Anyway I previously shared my first perf talk in Cape Town, from 15 years ago... and my original website which somehow still scores 100s across the board in lighthouse.
I thought I'd share some ideas and tools I've tried more recently and some blueprints for next level performance. I really love solving 'unsolvable' issues with creative, wild, out the box thinking.
So basics first easy wins, thing like http/2/3 speedy protocol, this is easily achievable with a reverse proxy tool like Caddy covered here, slick, modern, concise and performant https://jswhisperer.uk/post/caddy-2/ or something excessively verbose, and old like nginx (kinda like comparing Vue to React I've heard ...kidding)
Along with the basics like cache headers and compression headers brotli, gzip
lz-string
\
Probably many cases would be covered by good server compression, brotli, gzip, etc, and proper headers. something like this However there are some great cases where the server can't help you, or maybe you don't control it.
What about HTML Web Storage API's especially on mobile? Why not be a good Samaritan and compress before storing in localStorage, indexedDB etc; hell even cookies. Added benefit much less friendly to tamper with for your average joe.
Next hidden gem that I think will become mainstream soon Protocol Buffers! (I only use things before they become cool) Often called Protobuf. It's been but on a pedestal for over a decade Actual results have and real world usage at least in the javascript world have been a bit dismal ...like slower than built in JSON.parse.
However the last couple years show some promise. There is which is this very compliant, and runs in the browser; but probably if youre looking to implement protobufs you are focused on speed?
Some fast research revealed some libs that might help like pbf
A low-level, lightweight protocol buffers implementation in JavaScript.
Server side some tricks might include streaming responses; including Server Sent Events with something like Hono
Another trick would be to proxy/intercept static assests with a reverse proxy like Caddy that is quicker at serving files than node.js
Images
so there’s been a lot of improvements in image performance since my last post. There are new formats that knock traditional jpg, png, and gif out the park with savings. Mainly the widely adopted webp and the very cool avif.
The other amazing available optimisation is properly or responsively sized image sources with the <Picture> element
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
<img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
and there is #ServiceWorkers# of course
Top comments (0)