[eng] Reducing my site size by ~75%
[In case you're a recruiter: this is satire. The egotistical wording here is very much antithetical to what I value.]
It may surprise no-one, that as a genius 10x programmer, I run more than one site. I have this one, as well as mythmancer.com, a site created for a D&D-style universe my friends created for our weekly sessions. The website was created and went live last May (2022). It's deployed through Github Pages and operates entirely within the free tier.
Since then, the site has accumulated more information and features, and the size of the overall site has expanded. This matters because Github Pages are deployed as a single artifact - there's no way to split them up, and we'd like to keep the artifacts small, especially as the site potentially grows further.
In this process, I noticed that the size of my final artifact had reached a whopping 6.91MB! Your run-of-the-mill engineer might just give up at this point, and continue on as if nothing happened, but being one in the superior category (college-educated), I persevered on. The debugging process took every ounce of experience I have thus far gathered into my brain-thoughts, so do not worry if you don't understand it or get intimidated by it - with time, you'll get there (assuming you're smart enough in the first place).
So, where to start?
Let's first see where all that space is going. Not many people know this, but it's possible to see the size of things you have on disk, and with time and tribulation, you also come to learn that there are such things as "paths" that you can use to browse your directory tree and direct commands to:
λ purajit ➜ du -hs *
4.0K Dockerfile
4.0K Makefile
4.0K README.md
120K data
6.9M docs
8.0K generators
4.0K requirements.txt
96K templates
# a ha! so it's all in docs!
λ purajit ➜ du -hs docs/*
4.0K docs/CNAME
8.0K docs/art
76K docs/character-creation
64K docs/character-sheet
4.0K docs/index.html
6.7M docs/static
44K docs/world
# a ha! so it's all in docs/static
λ purajit ➜ du -hs docs/static/*
28K docs/static/HammerBro101MovieReg-Regular.ttf
92K docs/static/LibreCaslonText-Bold.ttf
100K docs/static/LibreCaslonText-Italic.ttf
92K docs/static/LibreCaslonText-Regular.ttf
48K docs/static/MSDOS.ttf
24K docs/static/character-sheet.js
4.0K docs/static/favicon.ico
1.2M docs/static/images
8.0K docs/static/index.css
5.1M docs/static/iosevka-comfy-regular.ttf
4.0K docs/static/slideshow.js
# a ha! so it's all from iosevka-comfy-regular.ttf
Now we've identified the source of all that space - a single file, a font asset, is taking up 5.1MB out of the 6.9MB total, which is crazy. How do we reduce the size of the font? Let's run through a few facts that may not be apparent to your typical street-side dimwit:
- This font was added when I experimenting with what to use
- Nothing in the site is using this font, as I had decided not to use it
- I had forgotten to delete this file after making that decision
Now we're armed with all the information we need to optimize this font file. Here, I'm going to do it with a one-liner, but it's a one-liner that takes a while to figure out:
git rm docs/static/iosevka-comfy-regular.ttf
And now the size of the site is a measly 1.86MB, a 73% reduction.
If you'd like to hire me for my freelancing service, hit me up at nincompoop dot service dot line at purajit dot com.