79 lines
3.8 KiB
Markdown
79 lines
3.8 KiB
Markdown
---
|
|
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)
|