Championing a sustainable web

Websites, applications, and all software have a carbon footprint.

8 mins

A few weeks ago, I wrote a blog post about green web hosting. After it went live, a few things happened:

  • My dear sister sent me a link to a Wired article about sustainable web design (thanks, Ali!)
  • The article recommended a book, which I read.
  • Both mentioned a website carbon calculator, built by the book’s author, a bloke named Tom Greenwood together with his team. And I’ve taken a quick look at the code.

More on all of these things later, but it’s fair to say, that over the last few weeks I’ve really been thinking about the environmental impact of the code we write, the websites we build, and the platforms that we champion. I say ‘we’ as in Spork, but I also mean ‘we’ the whole entire creative and tech industry, including the agencies within. And I’ve come to quite a strong conclusion…

We’re doing a truly terrible job.

As I said, a strong conclusion. But flippancy aside, I’m serious; this industry REALLY needs to change. We need to up our game.

By continually pushing the envelope of web design – and development – we haven’t realised the damage we are doing. We’ve been sitting comfortably at work, after our low-carbon, bicycle-based commute, in our cosy, ethically made bamboo socks, sipping an oat milk flat white, without realising that the problem, not the solution, starts when we open our design program or IDE.

Let me explain…

Prioristing performance optimisation

I was in my early 20s when I started to geek out on web development and had any serious notion that it could actually be my career. So, I was a relative latecomer to the party, but even in those days, the internet was comparatively slow. I’ll set the scene for you:

  • 3G had launched two years before – pretty disastrously I might add;
  • Internet Explorer 7 was still a good year away;
  • Facebook hadn’t yet lost its definite article;
  • Google didn’t yet own YouTube.

And whilst most people in the UK with internet had broadband, it was typically with speeds of 512 Kbps or less. Downloading a 2.5 hour movie in HD (let’s assume 7GB of data) would have taken at least 1 day, 8 hours, 37 minutes 20 seconds.

Why is any of that remotely relevant, you ask? Because all that meant we had to work really hard to make a site load quickly.

We obsessed over image sizes and optimisations. In fact, I remember actually splitting images into parts to optimise each part differently in order to squeeze every… last… bloody… byte out of the site. It was just what we did. We had to – everything that wasn’t a ‘web safe’ font, background colour, or square border had to be fabricated from images. No radii, gradients, custom fonts or drop shadows – and on and on. And all those images equated to more bytes and more bytes equated to a longer download time for each page.

What we really couldn’t do in standard web technologies we reluctantly attempted in Flash, but in addition to adding bloat to a page in an infrastructure that couldn’t always handle it, that technology had its own set of accessibility and security challenges.

A lot of digital innovation has flowed under the web technology bridge in 16 years, but perhaps of note:

  1. Processing power, of both servers and consumer devices, has increased massively – arguably 256 times, if Moore’s Law is still a thing.
  2. The internet has grown massively – both in terms of data transfer speed and usage. That HD movie? It now downloads in 15 minutes and 25 seconds (at 65Mbps). That’s 125x faster. And because that’s much quicker than you can watch it, your device can be transferring other data to and from the internet at the same time.
  3. Mobile devices have become more powerful and more popular, with more pixels with brighter colours on a smaller screen.

All this means more people downloading more data, more often, more quickly and consuming it faster. It’s very very easy to stream 20 minutes of absolutely nothing of consequence on TikTok to your iPhone whilst having a morning coffee.

16 years ago, developers could legitimately push back on functionality and suggest different ways of doing things that didn’t require so much computing power, or data download. Over time, that push back has become less necessary from a performance point of view – decent developers can make the feature work well, work efficiently and work consistently across most devices. The technology affords us this luxury.

We write functionality into our websites these days that we could only dream of 15 years ago. But at the same time the industry is making 2 quite large mistakes:

  1. There is less need to optimise, or at least not optimise as much. So we don’t. Web sites and applications, and software generally, end up being less performant than they could be simply because they don’t need to be.
  2. Frivolous functionality is now naively put into tech – just because the infrastructure can handle it. As Jeff Goldblum once said…

But what if, instead of considering the speed, capability, or performance of a digital product, we looked at the amount of data, power – and therefore energy and carbon – used by that digital product. Then suddenly there IS a need to optimise a website to its fullest extent and to make more considered functionality choices again.

And to my mind, this is not limited to web design. This consideration needs to happen up and down the whole technology stack – the processing power that is required on the server, the amount of data that is transferred across the internet, how far geographically that data travels, and the amount of processing required by the consumer device when the data is downloaded.

The new conversation

I don’t subscribe to the ‘if nobody else is doing it then I won’t make a difference’, mentality. We all need to start taking some responsibility, even if it’s just at a grass roots level. As an industry we have the capacity to make a difference, providing we do the following.

 

Understand the problem

Understand it in all its multifaceted and complicated glory. Sustainable Web Design, is a good introduction. It’s high-level and largely centred around web design, but it gently introduces the topics we have to think about and offers some solutions. I haven’t met Tom Greenwood yet, but I tip my hat to him for tackling a difficult subject matter.

Other things to read:

 

Commit to the solution

This is a blog post in its own right, so I have written one. But this, if you think about it, comes down to some common sense:

  • Do not create massive bloated web pages full of images and autoplaying videos that you can’t justify.
  • Do you need that custom user interface component that animates across the screen, needs loads of GPU and some horrendous javascript plugin?
  • Is that extra font or weight of font really that necessary?
  • Will caching the page for an hour be okay, or does that piece of information really, really need to be pulled through in real time?

 

Measure the improvement

This is not particularly easy yet. Wholegrain Digital’s website carbon calculator looks great, and I love the sentiment. But underneath the hood, it only measures the size of the total page load. Beyond that it makes a reduction based on whether it thinks it’s being hosted in an environment with a renewable energy source and applies some constants to it to estimate the carbon usage.

But it’s an excellent start, and better than the calculator we’ve not written. However, I think a more sophisticated way of measuring a site’s carbon efficiency will be needed in the future. One that, for example, breaks down page load size so that it considers the type of media used, or the average image or video size. And possibly it should hook up to some type of analytics. Should we consider, for example, whether a large single page of information is more efficient if it can get the message across to the user without sending them to a second or third page?

Clearly this is a complex subject area. Any process of this nature would need improvement measured consistently and a baseline established before the work starts, to ensure there is a genuine S-ROI.

Finally

All around us, industries are going through a period of scrutiny only to come out the other side operating differently; apparel, construction, transport, energy and industrial design are all good examples of this.

Most recently, the environmental impact of the food and fisheries industries has been on the agenda. We see a growing awareness about that impact in the greater understanding and adoption of veganism, in the public conversations prompted by films like Cowspiracy, and more recently Seaspiracy, and in the way people are making more considered decisions about how, when and if they consume meat, dairy and fish. And quite rightly. It is a very good thing for people to be more aware of the impacts of their gastronomic choices.

Now it’s tech’s turn.

Those same types of considered decisions should go into technological choices. Online-only companies are being founded all the time, partly based on the fact that to do so is allegedly better for the environment. But I’m increasingly convinced that this is not necessarily the case. Websites, applications, and all software have a carbon footprint. All of that needs to be understood, assessed… and reduced. The tech sector must play its socially responsible part – pick up the mantle and choose to educate.

So, when a design team requests a custom element in the UI, I’m not going to refuse. Nor will I judge a client who really really wants an autoplaying video on a loop in the hero banner in a homepage. But I will ask – is this element absolutely necessary? Will it really make the sale of product more likely, or be the reason a prospective customer registers for that trial. Is the value of this functionality greater than its carbon impact?

If we consider sustainable design and development not an optional task to complete given enough budget, but as a standard way of working, then collectively I believe we can – and will – make a real difference.

We have to.

Related Insight

Sign up to our newsletter

We'll never share your email with anyone else. By clicking 'subscribe' you agree to Spork Digital Ltd storing and using the information above as set out in their Privacy Policy.