diff --git a/content/posts/2022.04.10.optimizing-my-hugo-website.md b/content/posts/2022.04.10.optimizing-my-hugo-website.md new file mode 100644 index 0000000..e1b83c7 --- /dev/null +++ b/content/posts/2022.04.10.optimizing-my-hugo-website.md @@ -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)