In this round of updates and improvements, I've reduced overall image file sizes by a good chunk, added some new niceties to the site, and simplified some areas and adjusted some sizing and layout on mobile and tablet I wasn't happy with.
Layouts and visuals
I haven't been close to 100% happy with both the tablet and mobile experiences, outside of their performance they felt a bit lacking. Once the new guide section was added it felt like time to revisit some of the layout and sizings across the board.
Making the main menu bigger with a new link meant that it didn't fit quite right on small screens any more, so to rectify that I've implemented a 'standard' burger menu toggle for the main navigation block (this adds around 3.5KB to the page, and is very sensibly only initialised when the screen is small enough).
Bonus feature
I've been working hard behind the scenes to convert repeatable areas of content pages to be powered by page data files. Part of this has involved completely refactoring and rethinking how the Core Web Vitals stats are shown on case studies. The new version is much easier to digest and looks a lot better.
Fonts and sizing
I've increased the size of the font size and colour scheme toggles and given then a bit of a style tweak to make them look a bit more like you should interact with them, and simplified the style of the popup menus you see when you activate those buttons.
Colours and colour contrast
There's a new easter egg or two to the Eleventy guide pages because I just couldn't resist.
The colour palette has been tweaked so now our 'white' really is white, which will improve colour contrast - slightly.
Listings and featured items
I've made some changes to the homepage and listings pages too. There's now a 'featured' article shown on the homepage, and as the first item on all article listing pages, and I've added a 'featured guide' block to the homepage too.
Overall, all the style changes I've made should make things bolder, friendlier and curvier, less grungy, and a bit more spaced out and easier to gaze upon.
Behind the scenes I've made a few changes too, including some sensible fixes to both the RSS feed and the sitemap to make sure that all standard content pages, guides, case studies and article page types are all included, and only if they've actually been published!
I've also made the logo bigger in the header and the footer across the board. On desktop, I've changed around the visual priority of things and moved the nav before the font size and colour scheme options to try and push those a little.
Images
I feel like I'm forever trying out image compression and optimisation things, and on this pass I've managed to squeeze around 650KB across the site by using better compression for some WEBP images, and in converting some files that weren't in the best formats.
This saving is doubly huge when you consider that during this upgrade period, I've added the guides section, replaced the grungy lines with waves, and added eighteen new icons/icon variants across the site, and a new case study with images too.
Replacing the grungy lines (best compression was in PNG format) at a total of 206.6KB with the new wavy lines (best compression/format was in SVG format) at a total of 5.5KB shaved off a huge 201.1KB from template weight - over a 97% reduction in file size for the change in effect.
I revisited hero images again, and shaved around 138KB there by converting all to WEBP and using a better compression method than previously. This is also including adding a new case study hero image as well - so more files but overall still less total file size!
As far as case study pages are concerned, I converted several PNG and JPG files to WEBP with better compression results, and even re-compressed some WEBP images to the same format with smaller file sizes. This managed to shave a further 325KB off our total image weight.
On the flip side, I've recently added a new case study page which has a few images on and the current total for that page is about 706KB.
Page weights
In general, the bigger your site gets the bigger the total size of the site is. In general, this site is also no exception to this rule. In adding new areas to the site, and new visual components I've needed to add an additional 18 icons/icon variants which total around 11KB.
Overall, I've managed to save around 663KB across the site. All the new additions to the site including a 10-part guide, a new guide landing and guide category landing page, new tip, blockquotes, and pull quotes components, and a new case study have added 717KB to the site.
This means our actual total is a negative of 54KB. I'm happy with this though when you consider just how much overall content and general visual improvement this brings. 54KB is a impressively small amount for what has been added, and I'm sure there are further improvements that can be made to images in the future.
On average, these updates have managed to reduce average page weight even further - this is phenomenal! The average page weight based on the total download size of one of each type of content page was 503KB. After these changes the average is around 430KB - an average of 73KB per page.