New Personal Site
I was recently watching a video by The Primeagen who was looking at an article called “Why your website should be under 14kB in size”. It gave me the excuse I needed to rewrite my website.
TCP communication
The first communication from a server to the client is often 10 TCP packets. The client will return an acknowledgement, then the server sends more. Each TCP package contains about 1.4kb of data, leading to a 14kb limit. If we have everything we need inside that 14kb we can avoid that round trip, loading the website as soon as possible.
Fun challenges
The first thing I do when trying to design a website is to try to pick fonts which fit the theme/idea I am aiming towards. Generally, fonts are pretty costly files to fit into 14kb. Too costly unless you do something special. So no fun fonts for me (yet).
How about images? They are pretty costly too. You may see that I have decided to go for a pixelated look. I grew up with point and click adventure games like Monkey Island, Day of the Tentacle, and (my favorite) Toonstruck, so I am very fond of pixel art. So this limitation was a benefit to me.
Colour
The images are still quite costly though if I want large ones. I had recently bought an interesting book on natural colour combinations from Japan* and thought it would be fun to use it as a source of colour palettes for my site. This page uses palette 253 with “Lemon Yellow”, “Apricot Orange”, “Slate Color”, and “Cotinga Purple”. Personally, I hate it, but why should that stop me?
One reason is contrast. Contrast is a big problem with some of these palettes. My original plan was to allow the user to switch between the palette and monochrome. Then I had the idea to mix both of these, to create a half tone. You can toggle between them using the buttons in the top right.
To match the image colours to the palette I used color quantization, and with full, half and monochrome palettes I need 3 images. The full and monochrome images each have 4 colours, but the halftone is done a little different. We dont quantize the half tones, we quantize the full tone and combine it with the monochrome. This leads to images with 4 hues, each with up to 4 tones. It was a happy accident really, but it adds a lot of depth to the image while keeping the restricted colour palette I wanted, so I decided to keep it.
Am I lazy?
The question is: Did I succeed in creating a site that loads in under 14kb? No, not really…
The image size is too big, even at only 4 colours its pushing 10kb and with the half tone I blow past the limit in one image. Really though I dont think it matters. I wanted to create a small site, and it has an aesthetic which suits my interests. I just made the image load after first render and gave it an old school load in animation.
Conclusions
Overall I am very happy with how the website turned out. There are a lot of little pieces that add up to be kind of interesting. It’s not perfect, but I think it’s good enough. I may even break the size limit properly and add a custom font (don’t hate me if I forget to exclude it on this page for posterity).
Hope you have enjoyed. I am trying to keep these posts short and punchy. I didnt even go into how I am using Astro’s static site generation which is a big reason it’s as small as it is. Next I think I will write about the image quantization library imageMagick, as I want to know what more you can do with it.
* - A Dictionary of Color Combinations ↗ . It’s by Sanzo Wada, based on an original 6-volume work called Haishoku Soukan, and one of the first considerations of how colours are used in combination. Sadly does not come with hexcodes or rgb values. You can get all the colours palettes online if you want, but if you want a little book with them in you can use my affiliate link above.