This post is day 11 of me taking part in the #100DaysToOffload challenge.
I just migrated my website to Hugo. I used to have a very minimal custom setup which I enjoyed having, but it had a few shortcomings which I thought would be easier to address if I migrated over.
I was pretty happy with the move, but I did find that my website got quite a bit heavier after the move. Smaller websites load faster and run smoothly on more limited hardware, so I decided to see if I could cut some things out and make my website smaller.
Trimming Down Fonts
First, the theme I was using had included multiple weights of a font. It had variants from “thin” to “bold” to “bold italic”. While these variants make the font look better when bold or italic, each variant adds about 100KB to the website. I did notice that my browser was smart enough to only load the variants needed, which was just 2 of them, but I don’t think having users download 100KB just to display a few characters makes sense. Thankfully the browser is able to automatically compute what the bold characters should be formatted like even if the variant is not included in the website, so I started by tearing those out.
Even loading a single variant, the fonts are still the largest bit of the website. That’s when I came across this post which describes how to reduce the size of a font file by removing character sets you don’t use with FontForge. I then removed anything Cyrillic, Greek, or any other language that I was very unlikely to use. The file is now down to about 24KB, finally knocking it down from the “largest thing on the page” status! And the nice thing about how fonts work is that if I do ever end up typing something in one of those languages that I removed, the browser will fall back to another font the reader has on their system so nothing breaks.
Generating code highlighting during build
Savings are amazing however. PrismJS is pretty lightweight at the core, but gets heavier and heavier if you want support for more programming languages. The version shipped with the theme I picked came at 167KB, at even gzipped it was slightly above 60KB, plus another 2.8KB for the required CSS. I was able to tear all of these out which saved me even more space!
Finally… 54.6KB, which is 34.2KB gzipped. The whole website is smaller than PrismJS!
The largest thing is, yet again, the font. Even stripped down it takes quite a bit of space, which makes me consider fully removing it and just relying on system fonts. But I’ll leave that for another day.
The customized theme is open source, you can find it here if you want to grab the optimized fonts, or just want to see what changes I made: github.com/SeriousBug/hugo-theme-catafalque
This website itself is also open source: gitea.bgenc.net/kaan/bgenc.net