For many organisations sustainability has become a core value and, endorsed by a growing group of ethically conscious consumers, their digital footprints are coming under increased scrutiny. The internet now emits more carbon than the airline industry and companies have a duty to reduce the impact of their online presence. This has led to a boom in techniques and tools that help businesses measure how much energy a website uses, from its infrastructure to its front-end page delivery. As an engineer, my first thoughts are how do these tools work, how clear a picture do they paint and how can we use that knowledge to improve products and services? I hope to go some way to answering those questions here.
HOW TOOLS MEASURE YOUR WEB EMISSIONS
A great place to begin exploring the tools available to help you build low carbon digital experiences is The Green Pages, created by the BIMA Sustainability Council and co-chaired by MSQ's Chief Sustainability Officer, James Cannings. If you’re just getting started in this space, I’d recommend:
Website Carbon Calculator, which uses averages to measure your predicted front-end carbon emission output.
Amazon Web Services (AWS) Carbon Footprint Tool, which measures emissions across your AWS estate, although it can be a few months behind because results are based on where your energy is coming from.
Looking at the website carbon calculator a level deeper, we can see it will perform several key actions as they calculate your website’s emissions, including:
Checking if the URL is on the Green Web Foundation, a site that tracks which hosting is powered by renewable energy.
Calculating the total number of transferred bytes using Google PageSpeed.
Assessing the total transferred bytes alongside average stats on returning visitor percentage, data loaded on refreshes, number of first-time viewers and energy usage per gigabyte.
From a programmatic perspective, checking if your host is green is as simple as the below:
const isGreen = () => { const host = ‘amazon.com’ return axios.get(`http://api.thegreenwebfoundation.org/greencheck/${host}`) }
Working out the total transferred bytes using PageSpeed can be achieved with something like this: const calculateTransferredBytes = (pageSpeedResult) => { const items = pageSpeedResult?.lighthouseResult?.audits['network-requests']?.details?.items || [] return items.reduce((countedBytes = 0, item) => { if (item.transferSize) { countedBytes += item.transferSize } return countedBytes }, 0) } But the clever part is the logic used to calculate your carbon emissions stat: const adjustedBytes = (bytes * RETURNING_VISITOR_PERCENTAGE) + (PERCENTAGE_OF_DATA_LOADED_ON_SUBSEQUENT_LOAD * bytes * FIRST_TIME_VIEWING_PERCENTAGE); const energy = adjustedBytes * (KWG_PER_GB / 1073741824); const co2Grid = energy * CARBON_PER_KWG_GRID; const co2Renewable = ((energy * PERCENTAGE_OF_ENERGY_IN_DATACENTER) * CARBON_PER_KWG_RENEWABLE) + ((energy * PERCENTAGE_OF_ENERGY_IN_TRANSMISSION_AND_END_USER) * CARBON_PER_KWG_GRID);
You can find out more detail on how they calculate these stats on their site here.
WHAT KEY INFORMATION IS MISSING?
These tools use sensible guesses to provide an approximate emissions figure. This kind of automatic standardisation allows us to make direct comparisons between websites from a technical perspective and start conversations about reducing carbon footprints.
But, as you can see from the calculation above, using a tool like this isn’t going to give you a completely accurate figure for the carbon emissions of a page view on your website. It makes too many assumptions and does not consider the active grid emission factor, for example, using real-time data.
There is more to building a sustainable website than low data transfer, green web hosting and reduced heavy media such as imagery or videos. There are aspects that these tools cannot effectively measure, which are often related to the overall front-facing design of your site or app. For instance, OLED screens use less energy to render black pixels, which makes dark mode effective, but newer LCD screens are often more energy efficient at rendering white pixels. To complicate matters further, blue pixels use roughly 25% more energy than red and green pixels. In short, calculating a truly accurate sustainability measurement for your website is a challenge. For more comprehensive insights a sustainability audit, such as the one we provide, is the next step.
BUILDING A CONVINCING CASE FOR A SUSTAINABILITY AUDIT
Developing a deeper understanding of your digital footprint takes time and effort. But it leads to genuine benefits in terms of user experience and commercial success.
As the carbon calculations I’ve explored show, a lot of this is to do with bytes transferred and where they are coming from. If you introduce global caching and reduce the size of front-end assets such as images, your site is going to load much faster and emit less C02 per page view.
Amazon famously found every 100 milliseconds of additional page load causes a 1% loss of annual revenue. Bringing your team onboard might require translating technicalities into this kind of stark commercial benefit. Ultimately, these elements work in harmony – improving the sustainability of your website will directly impact its performance and your business’s success.
For example, we discovered a customer-facing product offering from a market-leading global energy company was emitting more than 1.42g of C02 for every page load. Our work reduced this to 0.63g of C02 for the entire site. By converting it from a CMS-based server-rendering site to a front-end lightweight single page application, we prevented it re-fetching assets from a server each time someone navigated their way around the site. If we take the average of five pages navigated by each logged in customer, that is a 90+% reduction in emissions and associated energy costs.
This demonstrates the value of understanding not just what your digital carbon footprint is, but what exactly is causing it. You can then use this knowledge to implement solutions that make a real difference both to your emissions and the effectiveness of your digital services.
If you’d like support to identify digital carbon reduction opportunities in your organisation and develop impactful solutions, please book a discovery call.
