Compare commits
No commits in common. "ccb15ed10af583d13642f55613b6f8bd83d4b60a" and "4569ecebc91b24c1abb39734712a67e8a0b07fb0" have entirely different histories.
ccb15ed10a
...
4569ecebc9
26
.vscode/tasks.json
vendored
26
.vscode/tasks.json
vendored
|
|
@ -1,26 +0,0 @@
|
||||||
{
|
|
||||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
|
||||||
// for the documentation about the tasks.json format
|
|
||||||
"version": "2.0.0",
|
|
||||||
"tasks": [
|
|
||||||
{
|
|
||||||
"label": "dev",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "hugo server -D",
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "build",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "hugo -D",
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "publish",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "rsync -av ./public/ /var/www/",
|
|
||||||
"problemMatcher": [],
|
|
||||||
"dependsOn": "build"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
---
|
|
||||||
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)
|
|
||||||
Loading…
Reference in a new issue