While this blog series is split into key elements, its important to note that our entire team worked simultaneously, catching up via weekly stand-ups to make sure that proposed solutions were achievable.
The final component of our sustainable website build journey with the Climate Group is one that isnt really all that final. It focuses around continuous improvements, building the foundations for a roadmap which keeps on iterating itself.
To action this, Manifesto has put together a list of future improvements the team will look to work on with the Climate Group to continue reducing the percentage of emissions caused by the charitys website. Its not necessarily because we didnt have the budget or time to do these things. In some instances data wasnt available or the wider impact isnt yet measurable.
What glues all these smaller ideas together is the fact that a sustainable website build is never finished. In the same way that SEO, accessibility, and user experience arent activities with a final chapter either. The book is instead ongoing, and its narrative should continue to weave through the sites existence.
Human activity on the internet accounts for less than half (48%) of traffic on the internet. This means a majority (52%) of traffic is generated by bots. Half of that 52% are deemed bad bots, which makes up a quarter of a sites traffic. They scrape content, crash websites, look for security loopholes, bulk buy products on ecommerce sites, and simulate advert clicks. The list could go on.
Nowadays these bad bots behave in an almost indistinguishable way from humans. This means they consume HTML, CSS, JavaScript, JQuery images, and videos in the exact same way as humans. That equals the same emissions, and in turn, increases costs of data centre storage and bandwidth - with no benefit for the site owner
This is why well look at specialist bot blocking services, such as Radware Bot Manager, to better understand, and ultimately remove, traffic from bad bots.
A CDN stores bits of a website in data centres around the world. This gets content to global users faster. We decided not to use a CDN during the development phase, largely because we wanted to focus on reducing the number and size of images, as well as on using srcset for responsive images.
But we do want to do more research on the potential impact of using a CDN. We want to understand how far we can push it to deliver fonts, code and images, within the parameters of sustainability. And we want to find the best locations for CDNs, ones based on genuine, (not bot) traffic.
Adding to the work weve already done on fonts, we want to sort through our custom font files. By removing the characters and symbols we know we wont ever use, we can streamline the sites structure. These are marginal gains, but with every new user directed to the site downloading each font file, its absolutely worth it.
The new sites weve launched for the Climate Group will generate 75% less emissions than the charitys previous sites. However, we need to ensure it doesnt creep back up again! Thats why we want to automate emission audits. This will allow us to identify problem areas and sort them out - whether they be a bug which can be directly fixed, or a training issue an editor needs to iron out. It will also help us chart the impact of changes we make as part of our programme of continuous improvement. By tracking our progress, we can continue to challenge carbon budgets in the future.
We think more can be done to help guide editors in creating streamlined content which fits with the climate-focused ethos of the website. With some more extensive research and idea generation alongside the Climate Group, we can explore the creation of tools and training which could help with this. Functions such as an alert which warns the editor if a page goes over a certain size, inline hints or tips, and dashboards breaking down page size and performance.
The illustrations weve used on the Climate Groups site hold a strong visual identity. However, we would like to add a much wider range of illustrations going forward. This will allow the charitys editorial team to replace stock imagery still sitting in some areas of the site. Well establish with the editorial team what these additional illustrations will be, make them and then store them somewhere easy to locate in the Content Management System (CMS).
To get the maximum benefit (reducing page weight) from illustrations, they must be SVGs. An illustration in .PNG format will be smaller than a photo, but not as small as an SVG. And given our implementation of colour-coded site sections via Cascading Style Sheets (CSS), a .PNG image simply wont function the same way as an SVG image. This makes setting aside additional budget for ongoing design and build work an essential consideration.
There was a healthy debate in the team about which way to go on this Shakespeare-esque conundrum. Wed already implemented embedded SVGs, so we ran an experiment to see if there was a clear and obvious reason to revert that.
As you can see from the results below, there wasnt one. But given our mantra of every byte counts, well definitely be reviewing this. That way, we can keep analysing the impact of implementing the change, and what the exact carbon cost of those extra requests would be.
The aim behind this article series is to encourage openness around the concept of a sustainable web build. That way, other people can become inspired to embark on similar projects.
We do, however, want to take this work further than the website build itself. That way, we can make people visiting the site aware of its impact, and its role in the wider digital ecosystem. Because the worlds digital CO2 footprint is just as important as other, more visible industries footprints such as aviation or mining.
We think the most obvious way to spread such awareness is to badge the site with a carbon footprint. There are a few different ways we could do this. But wed like to use the automation technology already built into our carbon calculator tool. This will display a badge per page and per sites carbon footprint, similar to what Oatly does on its packaging.
By signalling the sites carbon impact clearly to visitors, we think the Climate Groups new website can set an exciting precedent for the wider web development industry.
Although we have already stripped back our base Drupal template, we think theres more we can do. We just need a bit more time to play around and make sure we dont break anything too important!
Similarly to our templates, our caching set is already optimised. But we want to see how much further we can go. Well be looping in our hosting provider on this project to discuss possibilities. These kinds of tuning decisions are always better made with a few weeks or months of data. This helps you to see where further improvements can be made, based on how the site is actually used in real life.
Finally, the charity already owns a number of initiatives which form key parts of its offering. But there will undoubtedly be new ones.
Its therefore vital, when working with an organisation whose product offering is dynamic, that you set them up for future successes, as well as victories in the present. So when a new section or initiative for the site crops up, unless a microsite is truly required, it doesnt see the organisation build a whole new site unnecessarily, with a new code base, new design, new hosting, and new SEO equity. Because that all detracts from the efforts put into the original build.
Rather than concluding this series, we invite you to continue it. We want you to share your digital sustainability journeys. It doesnt have to be a full web build. If youve spotted something weve covered that can be improved - tell us! And show us how it could be done better.
Its important for us to understand suggestions which make for continuous improvements. That are constructive, rather than simply critical. If were going to create positive change, we need the learning experience to be positive too.
Check out all of the articles in this series by searching Digital Sustainability.
Neil Clark, environmental lead at Manifesto.
See more here:
Digital Sustainability: why must we plan for continuous improvements to support the sustainability of websites? - The Drum