Estimated page impact: 0.43g CO2e per page view
Each website (or app) is unique and will have unique solutions needed to decrease digital impact, but using my experience on this journey so far, I’ve summarised the content and design solutions that I think might be helpful. There are also some subsequent posts that detail what can be done technically and by raising awareness too.
There is a huge difference in the scale of impact of these options which I’m purposefully not going into for two reasons. Firstly, because of the aforementioned uniqueness of each website/app. Secondly, because I believe it is vital to make changes right across the spectrum of impact. We shouldn’t let the small stuff distract us from addressing the big stuff, but equally, we should sweat the small stuff because every byte counts.
My tool of choice for scanning websites is Sitebulb. It has some very detailed features allowing for a really bespoke scan depending on your requirements. It also flags up some great areas for investigation across performance, code quality, security, SEO and accessibility.
I also thoroughly recommend CSSStats for highlighting how important design and build governance is. Visually showing an organisation that they have 100s of declarations, background colours and fonts is a great way to start this conversation.
Finally, Chrome developer tools and Google (or other) Analytics are fundamental.
Content
Make sure people find the site quickly. Understand what people are looking for, what search terms they’re using and optimise content so they can complete the task they have in mind, not the one you want them to have in mind.
Facilitate quick content consumption; forget about content stickiness. Give people what they came for and let them leave. I know this impacts traditional KPIs so I’ve covered some more on this in the raising awareness blog post.
Regularly remove content that is:
-
Redundant
-
Out of date
-
Trivial
-
No longer being used
Or as we like to say, ROTN (see what we did there!?) And we’re working on a way to partly automate this.
And don’t forget to add a page weight review to the editorial workflow process (we’re working on automating this too!)
Design
Reduce images; question whether they’re necessary and consider using effects that are both functional and beautiful. We’re starting to pay particular attention to the fact that one big image is better than lots of small ones; listing pages are firmly in our sights.
Reduce video, and obviously, autoplay is a no-no. To take that a step further we’re currently working on a design that we know needs to incorporate video, but we won’t load the YouTube embed at all until the person using the site has explicitly clicked/pressed to indicate they want to watch it.
Design is also important in supporting the goal of ensuring people can complete the tasks they came to do as quickly as possible before leaving.
Use system fonts and as fewer fonts/variations as possible. Font files often contain a huge amount of styles, weights and characters you’ll never use.
Work hand-in-hand with a developer to understand how the design might be brought to life and what tweaks could be made to allow it to be created as efficiently as possible. This isn’t about spoiling anyone’s design fun, it’s just about including the same level of diligence as you have for your financial budget.
Through the considerations outlined, you can understand how this isn’t a one size fits all solution. Every website is unique, and your digital impact solutions will reflect (and complement) that.
The previous article in this series explored measuring impact. Don't miss the next instalment on identifying technical solutions.