Web Development and the Environment

I used to work for a company called 2degrees Network (now called Manufacture 2030), whose digital platform is entirely designed to aid organisations in meeting their sustainability targets and abilities. Their name is a play on the idea that an increase of average temperature by just 2°C (due to global warming) would be the point of no return.

The Climate Crisis is a big issue. It touches every part of our lives and isn't going away any time soon. However, there are things that we can do as a group to slow it down and change our course, and (even though most of those things aren't even on the scale of what we could achieve if big corporations or governments changed their ways), if everyone pitches in we might be able to avoid the worst‑case scenarios.

It is quite surprising to learn that web development is a not‑insignificant contributor to our environmental blues ‑‑ although it really shouldn't be, on reflection. It turns out that web development isn't just a contributor; it's a surprisingly large contributor!

The Problem

There's no reason to beat around the bush on this one; a report released in 2019 by The Shift Project found that in the previous year (2018), "digital technology" accounted for almost 4% of all greenhouse gas emissions. To put that in context, that's as much as the entire air travel and traffic industry combined.

It gets worse, too; with the way that the digital sector is growing, both in terms of complexity, power, expectations, and access, Shift's report predicts that the percentage will double by 2025.

One of the biggest issues facing us with the way that the internet pollutes is that there are so many facets to it. The production, delivery, and powering of devices people use to access the internet is a big deal, but so too is the energy used to power the data centres that hold servers, which host the websites those people are visiting. Then, there are the emissions involved in building and maintaining infrastructure that delivers the internet to public buildings and into people's homes.

For the purposes of this article, let's keep it (as much as I can) focused on web development. We'll be looking specifically at the way that websites affect the environment; how hosting, bandwidth usage, and the way users interact with websites have changed over time, where they are headed in the future, what the issues are, and how you and I just might be able to make a difference.

Heavyweight Webpages

The issue of internet emissions is growing rapidly, rocketing up over the '00s and '10s as websites became more and more complex, more interactive, and bulkier.

In Checking the timeline of average webpage weight from the HTTP archive, you will find that from November 2010 to April 2021, the total average size of webpages rose by almost 350% on desktop, and ‑ unbelievably ‑ by 1,209.6% on mobile!

That report from HTTP archive is an interesting read, as it shows that by and large the number of requests hasn't risen anywhere near as fast as the weight of those requests has. Surprisingly in fact, it shows that the number of images requested appears to have dropped by over 27% on desktop and that video requests have held steady.

So what is going on here? Why has the average size of a webpage gone through the roof?

Resource Size is on the Rise

Unsurprisingly images and videos are a large contributing factor to driving the weight of web pages up. Average image sizes have increased, and video sizes are up too. We're using bigger, higher‑quality, and (in the case of videos) longer media.

This all makes perfect sense: device screens are bigger and higher‑resolution so developers are taking advantage of the fact that internet speeds are also faster, to provide their visitors with a higher‑fidelity experience. In turn, this drives web design trends with an uptick in full‑screen (heavy) background imagery or videos and more widespread use of hypermedia where traditionally static imagery and text would have sufficed.

However, CSS files are getting bigger too, and so are JavaScript files with just the average number of each being loaded into any given webpage also increasing compared to a few years ago. It seems long gone are the days where time and attention was spent combining assets and reducing requests to speed up a website ‑ HTTP/2 removes that necessity almost entirely.

Our websites are getting more impressive and the designs are getting more complex. Animation libraries like GSAP and ScrollMagic (not that you necessarily need either to achieve the desired effects) are more ubiquitous, and even simple things like form inputs are becoming more reliant on animation to provide a more engaging user experience.

This, in and of itself, is no bad thing really; it's great that the internet and designers are freer to create more interesting, engaging, and impressive experiences. However, if we are looking at just the environmental aspect of the internet, then it is a bad thing ‑‑ at the moment.

When a user requests any webpage, the server has to send the right files. These files have to stop off at multiple points around the world, depending on where the server is and where the user is. They will be routed through multiple servers, through a router, probably over a Wi‑Fi connection, and finally into the user's device. This puts a load on every machine involved in every stage.

If the webpage in question is a particularly heavy one, the files that the server sends will be more numerous and bigger, which means that each machine is going to consume more energy to handle these files, and the user's device will ultimately have to work harder to render those files to the browser ‑‑ I'm sure we've all been on those massive, heavy, resource‑intensive websites that leave your laptop spans

As time goes on, users are demanding faster load times (even back in 2014 Loadstorm found that 75% of users would leave a website if it took more than five seconds to load ‑ and that you start bleeding traffic at just the one‑second mark). This has resulted in lots of research and development into compression algorithms for our media: things like the WEBP and AVIF file formats for images, which inevitably drive image size down and reduce loading times. There are similar tinkerings happening in the video world, with the WEBM project aiming to keep video file sizes low too.

There is also a suite of tools to help optimise, minify and otherwise compress your CSS and JS files, but the data shows that there's still some way to go with all of these optimisation and compression methods if we want to keep the current trends of design and development innovation going.

It is fair to say that lowering the overall page size reduces the energy consumed in displaying it and ‑ as an added bonus ‑ also reduces the time it takes to arrive and be displayed by the end user.

The Data Centre Dilemma

On the other side of the equation, the servers and data centres that host our websites are a significant source of pollution and emissions themselves. Keeping the lights on, the servers running, and the temperature down; it all takes energy.

Particularly with the advent, boom, and non‑stop popularity of cloud computing, data centres are growing exponentially. At the moment data centres account for around 1% of global electricity demand ‑‑ but David Mytton, for the Centre for Environmental Policy, estimates that their consumption could reach between 15% and 30% of the total demand of some countries by 2030. That is a huge amount of resources and energy being used up, which leads to a huge amount of CO2 and other pollution being produced.

With more businesses than ever relying on cloud computing to host their data and run their services, as well as more websites being created and hosted every day, the growth of data centres doesn't look like it'll be slowing down anytime soon. This means that data centres and the people that run and own them need to take other strides to reduce their carbon footprint on the environment. There's some good news on this front, with a few massive players taking steps towards being Net‑Zero.

Microsoft (in conjunction with BP) is aiming to power its data centres with renewable energy sources to hit Net‑Zero by 2025. In return, BP will use some systems provided by Microsoft to identify problems and help out with its infrastructure, aiming to be Net‑Zero by 2050. There's a lot to do in this sector though, and it's always going to feel like a game of catch‑up given how quickly the resources required by data centres grow year on year.

How Can You Help?

So, with all that being said, what can we ‑ as relatively lowly cogs in this particular machine ‑ do to help slow down the climate crisis and be more environmentally friendly?

For starters, it is important to bear in mind that the best thing we can do as individuals is to work together to make the huge companies and corporations that are really contributing to the climate crisis. Voting with our wallets, and doing what we can to petition governments, is the way to go.

With that said (and wishful thinking aside), there are some changes we can make as developers, designers, or agency owners that can help lessen our carbon footprint.

What are You Developing?

What are you developing right now? Are you working on a website or web app for a client? If so, look for ways to simplify the end product to ensure it is as lightweight as possible and doesn't contain huge resources, tonnes of calls, messy code, or unnecessarily complex functionality. Another step you can take right now is to ensure you're keeping your images and videos short, correctly sized, and compressed as far as possible.

One thing that can be great ‑ especially for the load speed of your site, which is always a selling point for clients ‑ is to refactor, optimise and minify your code to ensure that you are supplying the most streamlined product to visitors. In fact, the developer of a very popular MailChimp plugin for WordPress found that just by reworking his plugin to remove a dependency, he reduced global emissions by around 59kg of CO2 per month. That is huge.

On top of this, think about what you're uploading to live servers. A pet peeve of mine that I see often is developers committing their entire node_modules folder into Git, and then deploying the entire lot up to their host. There are over two billion instances of node_modules folders living within GitHub repositories; that is an astounding amount of storage, bandwidth, and energy wasted when a simple package.json file would do.

In a strive to reduce complexity, and if you have the opportunity you could also work with your team and stakeholders to manage client expectations. Producing interfaces and services that are only as complex as they genuinely need to be will result in a far more performant product, a happy client, and a (very slightly) healthier planet. You don't need to build text‑only, 1990s‑style sites to be doing your part, but any move to reduce the size, and complexity of a website is a net positive.

What is Your Company Doing?

It is not just developers that can have a positive effect on their emissions; the wider company that they work for can do things to help too. I'm sure we're all too familiar with the Cycle2Work schemes that are in place in seemingly every company nowadays ‑ and as annoying as it is to see that listed instead of a potential salary, they are still a great scheme to help keep the company's carbon footprint down.

It's also worth having a wider conversation about informing your clients, designers, and developers on what they can do to make the products you're developing more environmentally friendly ‑ or even to change hosting providers to companies that provide better, more green hosting.