Design Lance

As I write this, world leaders are gathering in Glasgow for COP26, the international climate change conference, in the attempt to halt (or at least slow down) catastrophic climate change by pledging to end their countries’ dependence on fossil fuels. Only time will tell whether they will succeed (spoiler: it’s not looking good), but one thing that’s increasingly clear is that we in the tech industry can no longer bury our heads in the sand. We all have a responsibility to ensure our planet is habitable for future generations.

It’s all too easy to disassociate climate change from the web. After all, most of us are sitting at our desks day in, day out. We don’t physically see the emissions the web is producing. But according to a report by the BBC in 2020, the internet accounts for 3.7% of carbon emissions worldwide — and rising. That puts our industry on level with the entire air travel industry. So, when I think of what we can do to make our websites “better” I immediately think of how we can make them better for the planet. Because, like it or not, the carbon emissions produced by our websites not only impact our own users, but all the people who don’t use our websites too. We certainly have a lot of work to do.

It’s no secret that web pages have been becoming increasingly bloated. The average web page size now stands at around 2MB. This is terrible news for users, whose experience of browsing such bloated sites will be very poor on slow connections, but it’s also terrible for the planet. Poor performance and energy intensity often go hand in hand. But happily, it means that fixing one will go a long way towards fixing the other — it’s a win-win. So what’s one thing we can do to improve the environmental impact of our websites (and, by extension, improve performance for our users too)?

My suggestion is that we need to set our websites a carbon budget.

Performance budgets in web development are not a new idea, and in many respects go hand-in-hand with carbon budgets. Optimizing for performance should generally have a positive impact on your website’s energy efficiency. But a quantifiable carbon budget as well helps us look at every aspect of our website through the lens of sustainability, and may help us consider aspects that a performance budget alone wouldn’t cover.

How can we begin to calculate a carbon budget for our site? Calculating the amount of carbon produced by a web page is difficult due to the many factors to consider: there’s the power used during development, the data centers that host our files, the data transfer itself, the power consumed by the devices of our end users, and more. It would be virtually impossible to perform our own calculations every time we build a website. But Wholegrain Digital’s Website Carbon Calculator tool, which estimates the carbon footprint of a given website, gives us a good jumping-off point from which to start thinking about this stuff.

Let’s take the COP26 website as an example. Running this site through the Carbon Calculator reveals some fairly shocking results: The site is dirtier (i.e. more carbon intensive) than 94% of web pages tested by the tool. Inspecting the homepage in DevTools, we can see that entire page weighs in at around 6.4MB of transferred data — way about average, but sadly not unusual. Further inspection reveals that JavaScript from social media embeds (including YouTube video embeds) are among the worst offenders on the homepage, contributing significantly to the page weight. Fershad Irani has written this detailed analysis of the areas where the site falls short, and what can be done about it. (Up until a few days ago, the total size was 8.8MB, including a 3MB PNG image. Thanks to the Fershad’s work in highlighting this to the COP26 team, the image has now been replaced with a much smaller version.)

By understanding which elements of our design have the greatest impact on performance, we can gain an understanding of where some of our biggest carbon savings could lie, and begin to make trade-offs. The carbon budget might need to be different for every site — sites that require a lot of motion and interactive content, for instance, may inevitably use more resources. But perhaps for a simple web page like this we could aim for under 1g of carbon per page view? When we think about how many page views a site like COP26 would accumulate over the period of the conference, this could amount to significant savings.

Once we can identify where possible carbon savings lie, we can do something about them. Wholegrain Digital’s article “17 Ways to Make your Website More Energy Efficient” is a good place to start. I also recommend reading Sustainable Web Design by Tom Greenwood for a practical guide to holistically reducing the environmental impact of the sites we build. The website Sustainable Web Design has some excellent development resources.

As for convincing clients to buy into the idea of a carbon budget, using Core Web Vitals to kick off that conversation is a good place to start. Using tools like Lighthouse, we can see which aspects of our site have the most impact on performance and how Core Web Vitals are affected. Seeing the impact of that code on your clients’ site performance score (which can affect Google’s search ranking) might just be enough to convince them.

It would be great to see Google (and other industry-leading companies) lead the way on this and build carbon calculations into tools like Lighthouse. By putting that information front and center they could play an important role in empowering developers to make more environmentally-conscious decisions — and show that they’re putting their money where their mouth is. (There’s actually an open GitHub issue for this.) Perhaps we also need some kind of industry-wide certification, as explored in this article by Mike Gifford.

There’s much more we can do to improve the carbon footprint of our sites. It’s time for the web industry to heed this wake-up call. In the words of Greta Thunberg:

No one is too small to make a difference.

CSS-Tricks