Putting two years of low carbon website lessons into practice
Sustainability is a process and progress isn’t always linear. First you realise the need to act more sustainably and learn what you need to do to start that process. Then you take the first steps towards changing the way you live and/or work. After that, you go deeper, learning more and changing more things. Ultimately, you then repeat that last step over and over and over again!
My low carbon website building method and process has followed this pattern. Two years ago I started to focus on building low carbon websites using sustainable web design methods. Since then I’ve been learning and iterating towards a method that I’m happy with.
In the last couple of months I’ve made some breakthroughs in how I build low carbon WordPress sites. These have allowed me to further reduce the page weights of the sites I’m working on.
These discoveries have coincided with a need to change what I offer on my own site and how I talk about what I do. I found myself with a bit of time to revamp my website to be more engaging and lighter weight, and after a few weeks of coding, collaborating and iterating, my new site is here.
Putting my website on a diet
At its heaviest, my old landing page was 876.52kbs on first load. While this is much lower than the global average of 2292kbs (data from September 2022) it’s still much higher than I’d like.
When I tested the new page this morning, it came in at 88.83kbs which is a nudge under a 90% reduction compared to Sitegeist 1.0.
How I reduced the size of my landing page
Before going into any technical details, I changed the way the page is designed. Keeping the layout and sections super simple and clear, I focused on the following core messages:
- who I am
- what I do
- why I do it
- what it costs
- how to contact me
After that, I concentrated on a clean, clear design with easy to read copy and a high level of accessibility.
The geeky bit
As I’ve said in my articles recently, the main areas you can focus on to reduce page weight tend to be media (images and videos), fonts, scripts and if you’ve got the skills, coding.
Images and media
I’ve kept the images on the site to a minimum and optimised them before uploading them to the media library using the ImageOptim app. The images are then served to the browser in as small a file size as possible using WebP express. This means the images display as a .WebP file where the browser supports the format and the file size loaded is reduced.
A big thanks to Nick Lewis for his advice on this topic!
Fonts
In web design you have two choices when it comes to fonts: custom fonts and system fonts. Custom fonts come from places like Google, Adobe or commercial font repositories. The fonts are either loaded from the servers of the original source (Google and Adobe fonts often work like this) or from files on your sites’ server. Regardless of how the font is loaded, it adds weight to the page.
System fonts are widely supported fonts that are preloaded onto devices. Think Arial, Times New Roman, Georgia, Helvetica etc. If a site uses one of those fonts for its headings and copy, the device the site is being viewed on doesn’t need to load a font from somewhere else. The font is already available and less data is required to load the page.
Here I’ve used a system font stack, offering Helvetica Neue as the first font in the cascade. This means that the font displayed when you view the page is coming from your device and not downloaded from elsewhere. If a device doesn’t have Helvetica Neue preloaded, the device looks at the next font in the stack until it finds one it has.
It speeds up load times without sacrificing legibility or aesthetics.
Scripts
Or in this case a lack of scripts. I often use Javascript to add scrolling and fading effects to a page, add Google Analytics tracking codes and other scripts to take care of additional functionality.
On this site I’ve used only CSS and HTML code to make the site look and act as it does. The only scripts running are very lightweight and relate to things like the WebsiteCarbon widget and cookie banner.
Summary
Not all of the design decisions I’ve taken are suitable for other sites. A custom font can be vital for brand identity and impact. Additional images can make a site more visually appealing and effective. Scripts can make sites more impactful and interactive.
In my case, I wanted to strip the site back to just what is strictly necessary. A site that is lean and efficient without being boring and plain.
I hope I’ve struck the right balance for the site owner (that would be me), my clients (it could be you?) and my major stakeholder (our bloody lovely planet).
If you’d like a similar tune up for your site or a new low carbon website, send me an email to info@sitegeistwebservices.com.