very·united

/ˈvɛɹi juːˈnaɪtɪd/ 1kb

---

1kb club

i was recently made aware of the 1kb club and thought it would be fun to join the club. the gist is: »1kB Club is a list of web pages weighing less than 1 kilobyte (1,024 bytes)«. let's not get into the whole kibibyte vs. kilobyte business – the website says 1024 bytes it is, so 1024 bytes it is.

headers, headers everywhere

in general, i don't like to run my own servers. my 1kb page, as well as this website is powered by cloudfront + s3. all this is implemented using CDK, consisting of multiple stacks & constructs. one could argue that i overengineer my infrastructure for the privilege of not having to run servers 🤷‍♀️.

i wasn't the first one to make this experience, but with most hosting providers, a metric shit ton whole lot of headers, and thus bytes, are included in the response. in my case, an unconfigured cloudfront distribution with an s3 origin, was returning about ~800 bytes of headers – practically 80% of my budget. not great!

it's a relatively new feature, but cloudfront allows you to remove headers before returning the response (previously, this would have been only possible with lambda@edge). of course, there's a whole list of headers you cannot remove, but there's still quite a bunch of headers you can get rid of. i ended up removing the following headers:

• age
• accept-ranges
• cache-control
• etag
• last-modified
• vary
• x-amz-server-side-encryption
• x-amz-version-id

but had to keep these headers:

• content-type
• content-length
• date
• server
• via
• x-cache
• x-amz-cf-pop
• x-amz-cf-id

this left me with the minimum amount of headers you can get out of cloudfront, which is around 350 bytes (depending on various header values). not bad! that gives me 674 characters to work with!

other dirty tricks and where to find them

a bunch of good tricks can be found at this post by the founder of the 1kb club. apart from that, i didn't really do a lot of super crazy things (unlike some folks 🤯), but here we go:

• use a good minifier: i used minify-html, which is written in rust and has bindings for many other languages. you can configure many things, and it doesn't come with a lot of dependencies: in the python version it's just the rust binary + the bindings itself.
• relative links: i ended up making the only link being relative + a redirect because href="1kb.html" is just so much shorter than href="//veryunited.net/1kb.html". you probably know, because that's how you ended up here, but 1kb.html is a redirect to https://veryunited.net/1kb.html. not sure if this counts as cheating, but 🤷‍♀️
• gold away: i moved repeated things into loops, i picked the shortest way of writing something: e.g. red is shorter than #f00 by 1 char, updating the page every 9ms instead of every second saves 3 characters, ...

conclusion

overall, this was a fun project. i built a clock!, and the source is available on github. of course i also set up automatic deployments, etc.