3.8 KiB
| title | date | toc | images | tags | |
|---|---|---|---|---|---|
| Optimizing My Hugo Website | 2022-04-10T22:54:35-04:00 | false |
|
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
A lot of Hugo themes seem to use javascript libraries to do code highlighting. The theme adds a javascript library like PrismJS, which runs in the browser of whoever is looking at your website and adds the highlighting to any code blocks.
This is a really weird approach to me, since you're building a static website. Why not do the code highlighting when you're building the site? That saves both downloaded data, makes the website easier to process for the browser, and also works if the person has javascript disabled! I think the reason why is that hugo doesn't have a built-in highlighter but relies on Pygments being installed, so theme developers find it easier to just add more javascript instead of explaining people how to install pygments.
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!
Final tally
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.
Sources?
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