It's not just Google's core web vitals you should consider when building and maintaining sites. There's other things to consider too, and for me, page weight - the total downloaded size of the page to your browser - is a key metric to measure yourself on.
The smaller the page weight, the quicker it loads. The faster it is parsed by the browser and rendered. The better it'll work on older, slower phones, or for those people stuck on slower internet connections.
But since this site was already so fast, how can I go about making it even faster?! Well, there's always very simple places to start.
Quick optimisations
The quickest, easiest place to start was to check all image sizes, and see if an alternative image type might work better than the current format. In some cases, I reduced the overall dimensions of images a little to make the overall file sizes smaller even before optimising and converting.
All logos were in PNG format - generally great for images that have a lot of repeating areas, icons, and for transparency too. The downside is that most applications don't output very well optimised images. So, each was run through an image compressor to make sure as much was squeezed out of them as possible.
I also exported each as an SVG, and kept those that were smaller in that format compared to the PNG versions. All SVGs were run through SVGOMG to remove unnecessary XML code and whitespace and compress file sizes.
I also removed a couple of texture images from the background of the header and the main content body area, which reduced page size by 49KB (dark theme)/61KB (light theme) for the header, and by 29KB (dark theme)/9KB (light theme) in the content area. A total saving of 78KB for the dark theme and 70KB for the light theme.
I do like the added subtle textures in areas of the site. They compliment the jagged brush strokes effect on the header and footer. I'll probably investigate a replacement of these in the future and implement them providing I can keep the file sizes low enough.
Fonts
This site uses three weights of the font family Rubik: regular (400 weight), semibold (600 weight) and black (900 weight). The three downloaded WOFF2 webfonts from Google Fonts were 35KB each, so 105KB for web fonts in total.
I've found in many cases that using a variable font when you're only using two or three weights to be unnecessary and ends up in a bigger overall download size for fonts. In this case, for the Latin variable webfont for the Rubik family, the file size was 35KB total! A saving of 70KB on the page weight straight away.
Because variable fonts are still fairly new, I've not yet found a good, easy-to-use tool that can help me convert variable fonts and slim down the characters included, so for now with Rubik, I'm stuck with whatever Google has done with it. And for now, that's actually fine because the overall size for this font is pretty reasonable.
JavaScript functionality
There's not much JavaScript functionality here, and that was done on purpose. Your site is only ever going to be as fast as your slowest JavaScript. Less JavaScript = more speed.
The functionality that does exist though has expanded recently. Previously, there was only the colour theme selector. I've since added a font size selector and wrote a whole new class for it. Once it was completed, I realised I was loading almost double the JS I needed to, because with a few tweaks and alterations to the initial class I'd written, and by initialising them both in a slightly different way, I could actually make myself a single, much more flexible JavaScript class that would work for both pieces of functionality. This totalled 4KB for the class, 2KB for the initialisation scripts, and less than 1KB for utility helper scripts. A grand total of under 7KB (Uncompressed) JS for the site.
The only additional JS loaded is the Prism library, but I am only loading on pages that need it to keep others as slim as possible. Prism comes in at around 17KB compressed, but for the benefits it brings I think it's worth that cost.
As a future improvement, it's possible I could compress/minify the first party JavaScript I've written which would likely reduce the overal size from 7KB to around 3.5KB.
New things
I've added some hero imagery (still testing if I like it or not, and might still remove it!) to the page which adds an image of anywhere between 116KB and 409KB - and that's after reducing the dimensions of the images and changing between either JPG, WEBP, or AVIF depending on what produced the best file size.
I also tweaked a few styles to improve a few areas of the layout I wasn't happy with, and even added a 'Reading time' estimate to each case study and article, using the Emoji Read Time plugin, and added a black colour to the palette to replace darkness for both the contrast dark and contrast light themes to give even more colour contrast.
Results
Amazingly, with all the other optimisations I've made across the site, adding this extra page weight still means that most pages are smaller than they were before! And there's still room for me to try out alternative ways/styles of imagery to bring a bit of colour to the site which could result in further savings to page weight too.
The overall Page Speed scores for the site on both mobile and desktop are still sitting at 100% across the board, but the overall page weight is almost 150KB less per page on average!