Carl Barenbrug

Research + product design

lab

Web Design and Carbon Impact

How can we, as web professionals, help to make the web more energy efficient?

From data centres to transmission networks to the devices that we hold in our hands, it is all consuming electricity, and in turn producing carbon emissions. According to recent estimates, the entire network already consumes 10% of global electricity production, with data traffic doubling roughly every two years. It’s probably something very few people think about, or are even aware of as being an issue. But the fact of the matter is that the Internet consumes a huge amount of electricity. And when it comes to web design, there is a lot that can be done to make the web far more energy efficient.

Attitudes

Creating a website is a lot more accessible today, made simpler by the emergence of no-code site builders. But it might be asking a lot for your typical web user or amateur creator to be aware of the environmental impact of their site. This, however, shouldn’t really be the case for any digital professional. Naturally, web developers will be more conscious of the weight of their pages, given that they are fully immersed in the code and content management that serves what you see on a web page. But even then, many developers simply look for the quickest route to completing a project, rather than the best way to produce the quickest and most efficient site.

So they load a website with bulky Javascript and third-party tools to meet the visual specification of the client or designer. As long as it works, right? They probably don’t care. They’re probably happy with their site that loads quickly on their 500Mbps connection. Who cares if they’re wasting expensive data on mobile connections in other countries? “But Carl, some of us don’t have the luxury of building super high-performance, lightweight, and optimised sites due to client budgets and deadlines.” Well, I think you need to work on your craft, change your attitude and your priorities, or find another profession.

When we talk about the energy efficiency of websites, it’s easy to assume that it’s a purely technical topic. However, efficiency can be improved before we even build a website. Design and content have a big impact on energy efficiency.

Therefore, some of the biggest contributors to heavy sites and large CO2 emissions, are designers. Large moving imagery, multiple web fonts, animation, sound, autoplaying video, and generally esoteric design is prevalent these days. We see showcase after showcase of the best of the web, where the only criteria is: “Does it look well-designed?” Well, look under the hood. It’s pretty terrifying. And that’s not even getting into the many accessibility concerns. If only more designers would ask themselves, “When was the last time I considered page size when designing something? When was the last time I decided that page weight was more important than aesthetics?”

These are questions I have put to designers before, and the response quite often is, “I’m just experimenting with technologies and trying to improve my UI skills. What harm is there in that?” Well, Site of the Day, the harm is your energy usage, and the likelihood that nobody—besides an echo chamber of fellow designers—give a shit about your over-design. People just want to access content quickly, without distraction, without friction, and without it using a tonne of data. That’s not to say aesthetics aren’t important—they certainly are. The visual design of a site can play a significant role in user experience, readability, and conversion, but as with most things, there is a balance to be achieved. And there is a responsibility to be shared.

Solutions

Fortunately, there are a growing number of web professionals who do care about the impact sites have on the planet, and there are many solutions designers and developers alike can find to improve their sites without overly compromising their designs. Solutions that I am actively looking into to improve my own work.

So how can we be more energy efficient in web design? Well, the folks over at Wholegrain Digital put together a comprehensive list, but here are some key considerations:

Reduce Images

The single largest contributors to page weight. The more images, the more data needs to be transferred and the more energy is used. A good starting point is to ask oneself:

  • Does the image genuinely add value to the user?
  • Does it communicate useful information?
  • Could the same impact be achieved if the image was smaller?
  • Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?

Optimise Images

Some designs are focused almost entirely on imagery, in which case optimisation is vital to better performance. There are technical decisions that significantly affect the file size of images displayed on a page. These include:

  • Load images at the correct scale instead of relying on CSS to resize them, so that you avoid loading images that are larger than the scale they will be displayed at.
  • Use image optimisation tools before you upload them to your site. I personally use ImageOptim.
  • Use the most efficient file format for each image, such as WebP instead of JPEG (although this is not supported by all browsers).
  • Use image processing tools to resize, crop, and enhance your images that are served. I use imgimx for this, which works well for image-heavy sites such as Minimalissimo.

Reduce Video

By far the most data intensive and processing intensive form of content. As with images, ask yourself if videos are really necessary. If they are, never autoplay a video. It creates a much higher load on the users CPU, resulting in vastly greater energy consumption. Plus, it’s annoying as hell. Let the user decide whether or not to play a video.

Font Selection and Optimisation

Web fonts can enhance the visual appeal of site designs, as well as improve readability, but they can add significant file weight to the sites on which they are used. A single font file could be as much as 250Kb, and that might only be for the standard weight. If you want bold, add another 250Kb! A couple of options worth considering:

  • Use system fonts where possible.
  • Use fewer font variations.
  • Stick to modern web font file formats like WOFF and WOFF2.
  • Subset fonts to only include the characters needed on the site.

Write Clean Code

Tidy and streamlined code is a fundamentally good thing. Keep code clean and simple, avoid duplication, and write efficient queries. The code behind the scenes should be a well oiled, lean machine. And I’ll take this opportunity to share a controversial opinion: all designers should learn to code. At least if they want a website. No-code site builders can be very good, but if you’re not aware of the underlying code, then you’ll be less aware of ways to optimise your site.

Use Less Javascript

JS impacts website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the user’s device. The second of these is something that applies to JS much more than to other types of files. Look for ways to achieve front-end interactions, functionality, and animations using more efficient technologies like CSS, or at least use JS efficiently. A particular mention should be given here to tracking and advertising scripts that rarely offer any value to the user, but can add significant file weight. Don’t let advertising get in the way of craftsmanship.

Use Server Caching

Using caching technologies such as Memcached or Varnish pre-generate static versions of each page so that the server overhead can be significantly reduced for most visitors. This significantly reduces server energy consumption and makes a big difference to page load times.

SEO

When optimising a site for search engines, we are helping people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting fewer pages that don’t meet their needs.

No site is perfect, but appreciating that we have a responsibility to produce better digital design for the planet and for users is a good place to start. Web efficiency is an attitude and the result of a mindful approach to building for the web.

Useful Resources

Open the archive