A web developer deep dive into digital sustainability

  • Insights
  • Sustainability

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: 

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.

Insight & Events

Recent Posts

view service:Why a consistent digital customer experience is key to conversion and loyalty
Why a consistent digital customer experience is key to conversion and loyalty header image
  • Insights
  • UX
  • DX

Why a consistent digital customer experience is key to conversion and loyalty

MMT

view service:Optimising digital experiences: the six steps to converting users into customers
Optimising digital experience: the six steps to converting users into customers header image
  • Insights
  • DX
  • UX

Optimising digital experiences: the six steps to converting users into customers

MMT

view service:MMT welcomes Chris Daplyn as Global Chief Executive
Chris Daplyn Global Chief Executive at MMT - portrait
  • News
  • People

MMT welcomes Chris Daplyn as Global Chief Executive

MMT

view service:Digital Soundbites: Episode 1
Digital Soundbites: Episode 1
  • Events
  • Video

Digital Soundbites: Episode 1

MMT

view event:Composable, accessible, sustainable: designing digital solutions for a better future
A photo of two men in the office having a discussion, one man is pointing at the computer screen.
  • Watch Now
  • Panel Discussion

Composable, accessible, sustainable: designing digital solutions for a better future

Online - fill in the form to watch on demand >

view event:Why an agile approach is instrumental in enabling digital transformation
  • Watch Now
  • Webinar

Why an agile approach is instrumental in enabling digital transformation

Online - fill in the form to watch on demand >

view event:Building greener digital platforms
  • Watch Now
  • Webinar

Building greener digital platforms

Online - fill in the form to watch on demand >

view event:How agile best practice can help drive innovative business solutions
  • Watch Now
  • Webinar

How agile best practice can help drive innovative business solutions

Online - fill in the form to watch on demand >

Want to know more?