Making some updates

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.

NPM updates

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!

Preload

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

Adding 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

I 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

Subsetting

After finally getting pip installed (it all got a bit ‘Hal changing a lightbulb’), Glyphhanger took huge chunks out of my font files by subsetting them.

It’s truly amazing. The two 17kb .woff2 files became 4kb!

I added the new fonts to the static directory and updated the @font-face references.

Service Worker font references

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.

Meta description

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.

Redirects error

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.

Google Analytics

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.

---

Results

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.