After falling down the rabbit warren, I thought it was time to perform some housekeeping on my site. This was spread over two evenings with the commits from day one here. The day two commits are linked from their respective headings below.
This site is written in Hugo and is compiled with hugo-bin. There are a few other
devDependencies to take care of too.
NPM has a handy feature that warns you if your packages are getting out of date, or if any major security fixes are available. A quick run of
npm audit fix did the job here.
Fonts - stage 1
As ever, Zach Leatherman provided the secrets to font optimisation!
I added a preload statement for the two web fonts on the site; it tells the browser to start downloading them earlier. Without a preload hint, the browser has to recieve and parse the CSS requesting the font, before it can make the request. I only preload the
woff2 font as most browsers can serve this format now.
<link rel="preload" href="/fonts/[font_file].woff2" as="font" type="font/woff2" crossorigin>
font-display: swap to the
@font-face block asks browsers to perform a FOUT, rather than a FOIT. It’s not hugely supported, but thanks to the declarative nature of CSS, that doesn’t matter!
Tidying up the home page
have had two projects on the home page. They were mostly superfluous fluff. They’re gone now - saving two image requests!
That was enough for one evening, so I came back to the site today and make a few more changes…
Fonts - stage 2
It’s truly amazing. The two
17kb .woff2 files became
I added the new fonts to the static directory and updated the
After running the site through WebPageTest, I was still seeing the old files being served. It transpired that the Service Worker was precaching them! Fortunately that was a quick change to the font references in the SW.
I ran Lighthouse on the site, it showed 100 on all counts, apart from an SEO issue. Thanks to the brilliant descriptions, it showed that the home page was missing a meta description. Again, a nice quick fix.
When I checked the build status of a deployment, Netlify warned me that one of the redirects wasn’t formatted correctly. This is a new feature in Netlify’s deployment process, and it’s super-helpful. It alerts you to mixed-content warnings, header/redirect issues and more! It’s all outlined here.
The cache time on Google Analytics has always frustrated me. WebPageTest and Google PageSpeed insights always complains that the GA JS file isn’t being cached heavily enough. Thanks to the wonderful ga-lite package, you can serve high-cache and minimal analytics! It’s all compatibe with GA, but a quarter of the size.
The home page was: 147kb
The home page now is: 28kb
An article page was: 41kb An article page now is: 16kb
WebPageTest is showing all A’s and Lighthouse is all 100’s.
Posted on in Web