kaan/bgenc.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add "optimizing my hugo website"

Browse source
This commit is contained in:
Kaan Barmore-Genç 2022-04-11 00:01:29 -04:00
parent a8801db464
commit ccb15ed10a
1 changed files with 78 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
content/posts/2022.04.10.optimizing-my-hugo-website.md Normal file
View file

@ -0,0 +1,78 @@
---
title: Optimizing My Hugo Website
date: 2022-04-10T22:54:35-04:00
toc: false
images:
tags:
- dev
---
> This post is day 11 of me taking part in the
> [#100DaysToOffload](https://100daystooffload.com/) 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](https://stackoverflow.com/a/44440992) 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](https://prismjs.com/), 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](https://pygments.org/) 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](https://github.com/SeriousBug/hugo-theme-catafalque)
This website itself is also open source: [gitea.bgenc.net/kaan/bgenc.net](https://gitea.bgenc.net/kaan/bgenc.net)