Sustainable Web Design

I suspect all of us who find ourselves here feel somewhat lost and even a little bit unsupervised in our forays into this work, though our egos may not allow us to admit it. Even the elementary principles of sustainable web design have yet to be popularized. This book, and its wonderful author Tom Greenwood, will hopefully be part of an exciting exposition to a generation concerned about the environmental impact of our online selves, and confident in how to grapple with it.

I’ve long subscribed to John Elkington’s principle of the Triple Bottom Line, a concept he introduced in the early ’90s to suggest that we should measure profit not just on a financial bottom line, but also measure the benefit of our business to society and to the natural environment.

Whatever your role in the digital sector, this book aims to provide a starting point to help you understand the issues of sustainability, as well as the tools, techniques, and processes that can help us to create sustainable digital products. We’ll also look at how we can approach sustainability in the business side of digital, and how climate change may impact the internet itself. From this foundation, I hope we can all help to create a web fit for the future we all face

If we wish to create web services that are good for people and the planet, we must take responsibility for the environmental impact of the work we do. This is what sustainable web design as a practice seeks to do.

We don’t always have control over where the electricity for our projects comes from, but we often do have a choice over which hosting provider we use. The simplest way to make our projects environmentally clean is to select a host that has made a public commitment to using 100 percent renewable energy in their data centers.

We may have much less control over the other electricity used by our web projects, but it’s possible to open the conversation about renewable energy by asking the right people. Maybe the company you work for is already using renewable energy but isn’t talking about it enough, or maybe they would be open to it but haven’t yet made it a priority. By being open about clean energy as a core value of sustainable web design, we can nudge progress in the right direction

Working with powerful devices and speedy connections means we can get away with not sizing our images properly, with copying and pasting a whole library of code when we only need part of it, and with letting old, unnecessary lines clutter up our code. From 2017 to 2020, the median size of a web page increased by roughly 30 percent (http://bkaprt.com/swd/01-06/). Have websites really gotten 30 percent better? Sure, some of this increase in file sizes has contributed to richer online experiences, but much of it has done nothing to improve user experience, performance, or accessibility—quite the opposite!

Chapter 1. What Is Sustainable Web Design?

we need to shift our focus beyond the idea of harm mitigation to a new horizon in which our activities are truly regenerative, helping to heal and restore our natural ecosystems and society. This brings us to the concept of redemptive technologies, defined by Ursula Franklin in The Real World of Technology as technologies that help heal people and planet.

Can web design become a redemptive technology?

As climate change intensifies, the web will be a key tool in helping to ensure the resilience of society, helping us to rapidly share knowledge about the problems and the potential solutions.

In order for us to reap the benefits of the web in times of crisis, the web itself must be resilient enough to reliably serve information to the least privileged people in the worst affected areas. A resilient web is one in which key information and web services can be accessed on even the slowest connections, on any device, in almost any condition—from a moving vehicle to a natural disaster. Resilient web design avoids single points of failure and embraces graceful degradation of technology so that if one part of the system fails, key information can still be delivered to the user and remain fit for purpose, even if more advanced functionality is lost.

web services are frequently designed to manipulate beliefs and behaviors in intentionally dishonest ways. The consequences are far-reaching and can range from mental health issues in individuals, to the societal corruption of democracy, to the deterioration of the planet through increased internet use. When we’re truthful with web users and do not seek to mislead or manipulate them, we not only serve the best interests of the people using our products, but also create a more environmentally sustainable web

In 2001, Ecover gave away their biodegradable formula in an ad campaign, challenging the competition to copy their technology “for nature’s sake” (FIG 1.7). Ecover concept director Peter Malaise said at the time, “If even one of the major brands adopted our formula it would make a huge impact on the environment” (http://bkaprt.com/swd/01-14/).

Companies like Ecover and Patagonia show us what can be achieved when we treat sustainability as a priority and not an afterthought. In web design and development, we can learn from this and likewise embed sustainability into everything we do. Let’s use sustainability as a catalyst for creating fundamentally better web products and services—not just for the environment, but for the people who use the web and the organizations providing services through it

Chapter 2. Measuring Our Impact

If we can’t measure the actual carbon emissions, then we need to find what we can measure. The primary factors that could be used as indicators of carbon emissions are:

Data transfer Carbon intensity of electricity

By early 2020, the median page weight was 1.97 MB for setups the HTTP Archive classifies as “desktop” and 1.77 MB for “mobile,” with desktop increasing 36 percent since January 2016 and mobile page weights nearly doubling in the same period (http://bkaprt.com/swd/02-02/) (FIG 2.2). Roughly half of this data transfer is image files, making images the single biggest source of carbon emissions on the average website.

In summary, reduced data transfer translates to energy efficiency, a key factor to reducing carbon emissions of web products. The more efficient our products, the less electricity they use, and the less fossil fuels need to be burned to produce the electricity to power them

Regardless of energy efficiency, the level of pollution caused by digital products depends on the carbon intensity of the energy being used to power them. Carbon intensity is a term used to define the grams of CO2 produced for every kilowatt-hour of electricity (gCO2/kWh). This varies widely, with renewable energy sources and nuclear having an extremely low carbon intensity of less than 10 gCO2/kWh (even when factoring in their construction); whereas fossil fuels have very high carbon intensity of approximately 200–400 gCO2/kWh (http://bkaprt.com/swd/02-03/, http://bkaprt.com/swd/02-04/).

Danish startup Tomorrow reports and maps this user-contributed data, and a glance at their map shows how, for example, choosing a data center in France will have significantly lower carbon emissions than a data center in the Netherlands (FIG 2.3) (http://bkaprt.com/swd/02-05/)

We don’t have control over the full energy supply of web services, but we do have some control over where we host our projects. With a data center using a significant proportion of the energy of any website, locating the data center in an area with low carbon energy will tangibly reduce its carbon emissions

That said, we don’t want to locate our servers too far away from our users; it takes energy to transmit data through the telecom’s networks, and the further the data travels, the more energy is consumed. Just like food miles, we can think of the distance from the data center to the website’s core user base as “megabyte miles”—and we want it to be as small as possible

The Website Carbon Calculator shows how the Riverford Organic website embodies their commitment to sustainability, being both low carbon and hosted in a data center using renewable energy (http://bkaprt.com/swd/02-07/).

If you want to take it to the next level and tailor the data more accurately to the unique aspects of your project, the Energy and Emissions Worksheet accompanying this book shows you how (http://bkaprt.com/swd/02-06/).

With the ability to calculate carbon emissions for our projects, we could actually take a page weight budget one step further and set carbon budgets as well. CO2 is not a metric commonly used in web projects; we’re more familiar with kilobytes and megabytes, and can fairly easily look at design options and files to assess how big they are. Translating that into carbon adds a layer of abstraction that isn’t as intuitive—but carbon budgets do focus our minds on the primary thing we’re trying to reduce, and support the core objective of sustainable web design: reducing carbon emissions.

As front-end web technologies become more advanced, the computational load is increasingly moving from the data center to users’ devices, whether they be phones, tablets, laptops, desktops, or even smart TVs

Applications that put a heavy processing load on the user’s device can inadvertently exclude users with older, slower devices and cause batteries on phones and laptops to drain faster. Furthermore, if we build web applications that require the user to have up-to-date, powerful devices, people throw away old devices much more frequently. This isn’t just bad for the environment, but it puts a disproportionate financial burden on the poorest in society

In part because the tools are limited, and partly because there are so many different models of devices, it’s difficult to measure website energy consumption on end users’ devices. One tool we do currently have is the Energy Impact monitor inside the developer console of the Safari browser

It shows us the percentage of CPU used and the duration of CPU usage when loading the web page, and uses these figures to generate an energy impact rating. It doesn’t give us precise data for the amount of electricity used in kilowatts, but the information it does provide can be used to benchmark how efficiently your websites use energy and set targets for improvement

So how do you go about using benchmarks to improve the sustainability of your web projects? First, you have to decide which metrics you are going to focus on, depending on what seems most relevant to your project and what data you have access to.

For each metric, the ideal figure to minimize emissions would be zero. The ideal amount of data transfer to minimize emissions is 0 KB, the ideal amount of data storage is 0 MB, and the ideal distance from data center to web visitor is zero miles

I recommend the following steps for setting a sustainability budget for each of your chosen metrics

Benchmark. Measure the relevant metrics of equivalent web pages. This would ideally be the current version of a page you’re redesigning, if there is one, and the equivalent pages on your competitors’ websites. This shows you the variation within your industry for presenting equivalent information, and allows you to benchmark the current best practice in your industry

Estimate what’s possible. The benchmark you’ve established tells you what has currently been achieved, but it doesn’t tell you what is theoretically possible. Now, we must estimate what is theoretically possible in a best-case scenario. For example, you might estimate the best possible page weight by using your CMS to create a basic web page using written content but no videos, images, custom webfonts, or tracking scripts.

We should set a budget that’s at least as good as the current best in our industry, and ideally stretch ourselves a little to improve on this. If the best in our industry is close to the theoretical best case, then we might not have much room for improvement, but if there is a huge gap between these two figures, then we have the opportunity to set new standards in our sector. The important thing to note is that the budget for each metric should be one you are confident is achievable

Set yourself a stretch goal for each metric you know will be difficult, but theoretically possible. This not only helps push you to deliver higher levels of efficiency, it also gives you an interesting challenge

What’s the smallest possible footprint a website can have and still be functional? Benchmarking web projects and striving for new records inevitably leads us to produce work that performs better

In the world of physical products, there’s a term for the carbon emitted in producing the product and getting it to the customer: embodied carbon. It includes the energy used to produce the materials, manufacture the product, package it, and transport it. For example, a basic iPhone 11 (which weighs 194 grams) has a carbon footprint of 72 kg CO2 over its entire life. However, only 17 percent of the carbon emissions occur when the phone is being used by the person who bought it. The remaining 83 percent of the total emissions are the embodied carbon from manufacture, transport, and end of life disposal (http://bkaprt.com/swd/02-08/, PDF

The embodied carbon of a website comes from everything we do in our day-to-day work—our computers, our lighting, our heating, our air conditioning, our commute to the office, our travel to see our clients and yes, those endless cups of tea and coffee.

it’s important to note that although traffic has a big impact on digital emissions, we often want to create websites that attract high traffic volumes. Therefore, the pursuit of carbon efficiency in our websites is the single most important factor to help us keep digital emissions low. And this doesn’t just apply to whole websites. The same is true if you create code or design templates used by lots of other websites

developer Danny van Kooten analyzed the carbon emissions of several WordPress plugins he created and found that removing a 20 KB JavaScript dependency from the Mailchimp for WordPress plugin—installed on two million websites—would reduce emissions by 708 tons per year (FIG 2.7) (http://bkaprt.com/swd/02-09/). He concluded that while it’s good to reduce his carbon footprint in all aspects of his life, optimizing his digital products was by far the best way he could help tackle climate change

Chapter 3. Designing Low-Carbon Websites

We’re afraid of missing an opportunity. We’re afraid of upsetting or frustrating the user. Or, in many cases, we’re afraid of having to say no to colleagues who suggested the idea in the first place. Implementing a minimalist approach is hard. It involves a degree of ruthlessness to cut things out and say no to ideas that can’t be justified. It requires us to not give every idea and every piece of content the benefit of the doubt, but instead to say, “If in doubt, we’re going to leave it out.”

Identify whether there are any long user journeys that seem to be common amongst your users. Look at where they start, finish, and pass through. Are the middle stages genuinely useful steps in the journey, or are you forcing users to pass through those pages to get to what they really want?

Gateway pages are often guilty of this. If you know you’re looking for a small storage shelf on a furniture website, for example, do you really need to visit an intermediary landing page dedicated to staged photos of shelving solutions? More likely, you simply want to browse the catalog of actually available shelves. The British retail chain John Lewis & Partners resolves this inefficiency with a website that provides all specific subcategories in the dropdown menu when the user hovers over their preferred top-level category (FIG 3.2).

Another example is often found on ecommerce websites, where users make several visits to the shopping cart throughout their journey. It may be that the user is reminding themselves what they’ve put in their cart or looking to see the total cost of what they’ve already added. This is an important requirement for the user and we want to make it as easy for them as possible. Finisterre does a great job of solving this with a shopping cart tab that slides in on the right side of the screen (FIG 3.3).

There is no separate cart page, as all of the content and functionality you would expect is provided in this neat little box. It also improves the user experience by allowing the shopper to seamlessly continue their journey through the site without losing their place when they check the cart.

Although a high bounce rate is generally considered to be a bad thing, it very much depends on the user’s motive for bouncing. A high bounce rate can be good if it means users quickly found exactly what they were looking for on the first page they visited, and therefore didn’t feel the need to load any other pages. This means an effortless and satisfying experience for the user, and it’s a win for the environment because it means they aren’t loading additional pages unnecessarily.

On the other hand, if people bounce off your web page because they didn’t like what they saw or find what they were hoping to, it means the page has failed to serve the user.

Clothing brand Organic Basics also uses vector imagery to great effect. They created a low-impact version of their website for users to browse instead of the regular version (FIG 3.7). On the low-impact website, all of the typical fashion photography is replaced with vector illustrations of the garments. It’s a radical idea but it works, being beautiful, functional, and seven and a half times less data intensive than their standard website (http://bkaprt.com/swd/03-07/).

When we embrace the spirit of minimalism, not just from an aesthetic perspective, but also from an efficiency perspective, we can achieve more with less.

By questioning every detail and thinking critically about how we might create better solutions, not only can we reduce the emissions of the products we design, but we can also make them more effective for users and for businesses.

We’ve been designing websites with the mindset of someone packing for a road trip in the family SUV, not for a backpacking trip by train. We must shift our perspective to focus on efficiency if we are to design a sustainable web

We must justify the existence of every element, no longer asking, “Would this be nice to add?” but instead, “Can we live without it?” It requires assessment of every detail of a design solution from images to text to pages and content. It is minimalism in its purest form.

Minimalist web design doesn’t mean our designs have to be bare and stark. It simply means we should justify the existence of every detail in the work we produce. We want to get as close to “nothing” as possible while still delivering a positive, intuitive, and useful experience to the user

It might be difficult, but when we have the guts to pursue a less-is-more approach, the rewards extend far beyond the reduced environmental footprint. We create online experiences that load faster, are easier to access on patchy connections, are faster to develop, and offer more streamlined and intuitive user journeys. We need to stop using FOMO as the guiding principle of web design and embrace the idea that in a world of information overload, our users will thank us for cutting out the clutter.

he less attention paid to sustainability in later stages of a web project, the more important it becomes for inefficiency to be designed out from the very beginning

If a website user would typically visit three pages on their user journey, but you redesign the site so they can access the information they need by only visiting two pages, you’d significantly reduce the carbon footprint of their visit

Furthermore, good IA and UX reduces friction for the user, and in the process reduces the amount of time it takes them to achieve their goal, whether it be to find a piece of information, sign up for an event, or buy new shoes. The longer a user stays on a website, the more electricity their device uses. Reducing wasted time by ensuring information is clearly structured helps to reduce emissions and create a better experience for the visitor.

But that old content isn’t simply sitting there collecting dust; it’s having a detrimental effect on the environment by filling up hard drives that consume electricity twenty-four hours a day, and it has a detrimental effect on visitors by making our website bloated, unwieldy, and confusing.

We should adopt a holistic content management process where we phase out redundant content as we create new content, and regularly review the information architecture and user experience to ensure it still joins up in frictionless user journeys

If you focus on just one thing when designing websites for sustainability, using images more efficiently has significant payoff. Don’t get me wrong, when designing for the web, images can be critical to telling a story and making a strong visual impression, but they are one of the biggest contributors to carbon emissions on most websites

we first need to question what value each image in our designs actually brings. Does it help the user to understand something, or is it critical to making the user experience enjoyable? Often the answer is yes, but in the case of stock photography, the answer is probably more commonly no. What is the user really gaining from that photo of a team of twenty-somethings pointing their fingers at a fake graph?

most modern smart phones and a growing number of other devices such as laptops and smart TVs are now using OLED (organic light-emitting diode) screen technology that illuminates each pixel individually. As each pixel is literally a tiny LED, using darker colors is once again a viable technique to reduce energy on end-user devices. Google reported that the screen is the biggest single power draw on its phones and that for devices with OLED displays, darker colors make a significant difference (http://bkaprt.com/swd/03-08/):

Running Google Maps in night mode reduced screen power draw by 63 percent. Black is the most efficient color for OLED screens as the pixels are switched off, and white is the most energy intensive, with darker colors generally using less energy. Color also makes a difference, with blue pixels consuming 25 percent more energy than green or red.

This isn’t just good for the environment; it also helps to maximize battery life for portable devices such as phones, tablets, and laptops.

If you’ve been given some freedom as a designer to define the color palette for your branding, aim to create darker designs using less blue

the greater the amount of color variation in an image, the larger the file. Using images with reduced color variation is another way to curb a website’s energy consumption.

Monochrome images generally produce smaller files than full color images. You might be wondering whether a black-and-white image would use more energy than a colored version due to it including more white, which as we have seen is the most energy intensive color on OLED screens. Potentially, this could be true, but there are a couple of reasons why grayscale or monochrome images will still tend to save energy over full color images. Firstly, reducing file sizes saves energy throughout the whole network—from the data center through the transmission network to the devices of all users—whereas the impact of screen energy only applies to end users with OLED screens. Secondly, although grayscale images can theoretically contain a lot of white, they can also contain a lot of black, which is the least energy intensive color, so to some extent the screen energy balances out.

Drayer told me that the use of black-and-white images on the website was the single biggest sticking point with colleagues, but she had good support from the team and they made the decision to be bold and use only grayscale images. This significantly reduced file sizes, helping to make the website more sustainable and improving web performance.

monochrome images don’t have to be black-and-white. We can get creative and apply color to grayscale images, either in our photo editing software, or in the browser using CSS blend modes

Most browsers support blend modes such as color overlay, screen, and even gradients, but we should always make sure we use progressive enhancement so the original image is still displayed for users whose browsers don’t support blend modes. We should also keep in mind that using CSS blend modes may cause a device to use more energy computing a change of color on the fly; in some cases, we may find that it’s a false economy compared to just using a color image in the first place

By experimenting with different blend modes and checking the impact on browser energy impact as we discussed in Chapter 2, you can find solutions that use small files and have minimal impact on browser energy. Keep in mind that CPU usage for overlay effects increases as the image is scaled to fill more of the screen, and will therefore rise with image size. If you have multiple overlay effects on the same page, it could result in very high CPU usage.

Motion brings the web to life. Used well, it helps us create better user experiences and communicate information more effectively but the benefits are not inherent. Used in the wrong way, motion can confuse and disorient users, make information less accessible, and use a lot of energy.

We must use motion mindfully if we are to create positive web experiences for all users and keep the environmental impact to a minimum. Other than using less motion in our designs, we can do put control into users’ hands by way of the Reduced Motion Media Query, which can be implemented to turn off large aspects of movement for users who specify a preference for reduced motion in their System Preferences

Images might be the biggest source of carbon emissions on most websites, but that’s because most websites don’t have videos—yet. For those that do have video, it will nearly always eclipse everything else on the website in terms of carbon emissions, as videos are both data and processing intensive.

Streaming video is one of the largest sources of internet emissions, and it’s growing fast as we get accustomed to consuming more of our information and entertainment in video format. A study by the University of Bristol found that streaming videos from YouTube produces approximately 10 kg of CO2 per hour, or 2.8 grams per second (http://bkaprt.com/swd/03-09/).

videos give the user little control over the timeline, making it hard for people to browse at their own pace. With most web content, you can skim through it quickly and stop to study elements of particular interest to you. With video, you have to sit through it from beginning to end—turning users into passengers rather than drivers of their own experience

Renewable heating supplier Nu Heat was looking for a visually engaging way to explain how heat pumps work and was considering producing an animated video to embed on their website. On reviewing the requirements, we found that interactive web animation would be a better solution, with accessible text, better mobile usability, the ability to click in and out of different stages of the process, and smaller file sizes (FIG 3.11). By adapting an After Effects animation for the web using Lottie, we were able to create an interactive animation in just 575 KB—far more efficient than the 13 MB we’d estimated for a well-optimized video offering the same information (http://bkaprt.com/swd/03-10/).

Putting a play button in front of any video ensures it only loads if the user definitely wants to watch it, which is much better for user experience and significantly cuts down on unnecessary streaming of data

avoid designs that involve autoplaying video, such as video backgrounds. Autoplay videos aren’t only bad for the environment, they can also cause problems for users with sensory disorders

With a single second of video content consuming more data than a single full screen JPEG image, every second really does count. We can save users time and help the environment by keeping it short and snappy.

Aside from their poor image quality, GIF animations are horrendously inefficient because they effectively save every frame as a separate GIF image and then merge them together into one big file. Think carefully before adding GIFs to any web page, and if you do need to use short animations in your designs, consider using a more efficient format. WEBP is a far more efficient image format that supports animation and in many cases it can be more efficient to instead use short videos, delivering higher picture quality with significantly smaller files.

In addition to the environmental impact, this can also be a pain for people using portable devices, as it will drain their battery faster.

Our team at Wholegrain Digital ran some tests while developing our own website and found that even “simple” effects can have a significant impact on the end users’ CPU usage. For example, adding a carousel to an image gallery instead of displaying static images on the page increased peak CPU usage by 7 percent. Adding a simple fade-in effect on page load increased peak CPU usage by 22 percent.

We must find a delicate balance between effects that genuinely improve the user experience and support the core purpose of the website, and those that are just a bit too gluttonous

When you do use high-impact non-system fonts, it helps to be strategic. Headings and menus, for example, tend to command much more visual weight than body text, so an eye-catching font is likely to have more impact there; users may not even notice you then use system fonts for the body copy.

Other key considerations include whether your preferred typeface is available as a standalone webfont whose files you host directly, or if it’s licensed via a subscription font service such as Adobe Fonts or Fonts.com. These subscription services can add extra weight to your website and make additional server requests, increasing energy consumption and slowing your site down, while also limiting the extent to which web developers can optimize the fonts

you’ll probably want to avoid subscription fonts where possible and host your own

Chapter 4. Sustainable Web Development

In 2015, the New York Times reviewed the data consumption of fifty popular news websites and found that, on average, over half of the data consumption came solely from advertising scripts. In addition to causing significant performance issues, these scripts end up costing mobile users a large chunk of their monthly data allotments. A user could spend up to thirty-two cents of a typical data plan loading just the ads on a news homepage—while the editorial content would cost only eight cents (http://bkaprt.com/swd/04-06/). 

Tracking scripts can undo a lot of our great work in creating an efficient website. To solve this, we need to be less passive about simply installing all the scripts requested by the marketing department at the end of the design and development process, and engage in an open conversation about what exactly we are trying to learn from the data. There may be much smaller tracking scripts that can provide the data we actually need

Let’s drop the assumption that because developers’ time is more expensive than computer time, computing efficiency is not worth pursuing. According to Nikita Prokopov, this attitude in our industry results in us “wasting computers at an unprecedented scale” (http://bkaprt.com/swd/04-01/). It reminds me of something Guy Singh-Watson, founder of Riverford Organic Farms, wrote in one of his veg box newsletters: “Until energy is more expensive, I suspect we will keep thinking of new ways to waste it” (http://bkaprt.com/swd/04-02/). We must start valuing energy and natural resources as much as we value our own time and effort

They found the energy efficiency of different languages varies significantly, and although the results varied by context, there was a clear pattern that compiled languages delivered the highest levels of energy efficiency (FIG 4.1): “On average, compiled languages consumed 120 J [joules] to execute the solutions, while for a virtual machine and interpreted languages this value was 576 J and 2365 J, respectively.” Those are some profound differences

The researchers found that the three least energy intensive programming languages were C, Rust, and C++, while the three most energy intensive were Perl, Python, and Ruby. Popular web programming languages JavaScript and PHP ranked 17th and 21st respectively, which is a little troubling when we consider these languages power the majority of modern websites. Some small consolation was that JavaScript and PHP were two of the most energy efficient languages when manipulating strings with regular expression, even though “they tend to be not very energy efficient in other scenarios,”

When looking at actual energy consumption (rather than ranking), JavaScript is far more efficient than PHP or Ruby, using just 4.4 joules to complete an average task, compared to 29.3 joules for PHP and 69.9 joules for Ruby. In other words, JavaScript uses 15 percent of the energy of PHP and just 6.3 percent of that consumed by Ruby

Likewise, the functionality that JavaScript adds tends to consume energy and slow websites down, without contributing value for the user.

Simple analytics tracking scripts vary enormously in size. The standard Google Analytics script runs 17 KB, while Google Tag Manager is significantly heavier at 75 KB; more streamlined options are a fraction of that at 1.5 KB for Minimal GA and 1.2 KB for Fathom at the time of writing (http://bkaprt.com/swd/04-05/). It’s worth questioning what functionality you need from your tracking script to justify the extra weight

We can also reduce the impact of tracking scripts by asking when they are needed. We may not need to use tracking scripts indefinitely, but instead could install them temporarily to track a campaign or understand a specific UX problem, and then remove them once we have the necessary insights

We need to keep the bots out, and luckily, in many cases, it’s not too difficult. Bots can be blocked primarily by using a firewall, which can be added to most websites using a service such as Cloudflare or Malcare, or by your hosting provider. These services will block the majority of bots, but still let in the ones you want (hello, Google!).

With this in place, you can not only reduce the carbon footprint of your website, you can also improve load speeds, enhance security, and stop competitors from scraping your information. Win!

Chapter 5. Green Web Hosting

Kris De Decker runs a publication called Low Tech Magazine and has created a solar-powered version of the website at solar.lowtechmagazine.com. He designed the website from the outset to use minimal energy, which means it can run on a mini computer with the processing power of a mobile phone. It needs just 1–2.5 watts of power, which is supplied by a small, off-grid, photovoltaic system on the balcony of De Decker’s apartment in Barcelona.

Of course, the sun doesn’t always shine, and that’s a problem for web services we expect to be available 24/7. To solve this, Low Tech Magazine’s solar panel is paired up with a lead-acid battery that stores excess energy when the sun is out, and continues to power the website during the night and on cloudy days.

The gains in efficiency have kept pace with our growing hunger for information, so we may well ask whether data center energy is even a significant issue to think about anymore. However, energy consumption is likely to begin increasing again as our industry finishes picking off most of the low hanging fruit to improve efficiency. Many data centers are now approaching the theoretical limit of power usage effectiveness (PUE), the standard measure of data center energy efficiency. As we approach this limit, it’s likely that efficiency gains will plateau and global energy demand from data centers will again start to rise in line with growing data consumption

The solution is twofold: we need to use the most efficient data centers we can find, but we also need to take responsibility for the applications we host, keeping energy requirements low to minimize their demand on servers.

Of course, we should also consider the environmental impact of creating the physical hardware our applications run on. The same principle applies that underutilized servers are a waste of physical resources, but overutilized servers are also wasteful because the excessive strain on the hardware increases the odds of a hardware failure—thus shortening the life of the machine, increasing carbon emissions from the production of new servers, and increasing electronic waste.

A significant proportion of the energy used by the average website is used in transmitting data through the telecom’s networks from host to end user, wherever they might be in the world. CDNs improve on this by moving assets such as images, videos, and CSS files closer to the end user.

CDNs are a great technology to help make the web more efficient, but we should remember that although they don’t do the same data processing functions as standard hosting services, CDNs are themselves web hosts that store and serve a huge amount of data. You therefore should try to choose your CDN provider as carefully as you choose your main hosting provider and ensure they have a strong commitment to sustainability.

Cloudflare was the first CDN provider to make any sort of renewable energy commitment, and in 2019 announced it would purchase renewable energy credits (RECs) to “match 100% of the power used in all those data centers and offices around the world” (http://bkaprt.com/swd/05-04/):

According to a 2017 dataset from the International Energy Agency, only 23 percent of the world’s electricity is currently generated from renewable sources, and 38 percent of electricity comes from burning (http://bkaprt.com/swd/05-05/).

The internet is the largest coal-powered machine ever created. This needs to change. If we want to stand any chance of tackling the climate crisis, we need the whole internet to be hosted in data centers powered by renewable energy

That’s the Green Web Foundation’s mission. The foundation has created a comprehensive database of web hosts with a commitment to using green energy (FIG 5.3). Their data shows that 31 percent of websites are currently using “green” hosting providers

De Decker points out that even this solution isn’t truly zero carbon, because the solar and battery system themselves require a lot of energy to manufacture, negatively impacting the environment. He suggests that powering a single website from a dedicated solar system is not the most efficient solution, and that there are economies of scale in designing a system to power a larger number of websites. What’s more, he points out that the energy of manufacturing the physical equipment highlights why using renewable energy is not enough; we must also try to use less energy (http://bkaprt.com/swd/05-09/).

Buying credits: They purchase renewable energy credits (RECs) from renewable energy generators on other grids. This basically involves finding renewable energy providers in other regions or countries, often poorer countries, and paying them some money to say they generated it for you. This can help make renewable energy more profitable in those other countries and stimulate those markets, but unless they are actually on the same grid, those electrons will never reach your data center.

Google claims to have achieved 100 percent renewable energy in 2017 and has been a pioneer of power purchase agreements to help increase the amount of renewable capacity available on the grids they use. However, in practice only about 40 percent of their energy is from renewables directly on the same grid; in parts of the world where there is insufficient renewable capacity on the local grid, they still rely on purchasing RECs.

Microsoft also claims to have achieved 100 percent renewable energy, with 60 percent coming from supplies on the same grid and the remaining 40 percent coming from RECs.

Amazon made a commitment to transition to 100 percent renewable energy back in 2014, but exact details are vague. Greenpeace has accused them of abandoning this commitment, as they expanded their data center capacity in Virginia by 59 percent without adding any additional renewable capacity.

Although the subtleties of green hosting are somewhat complex, the basic concepts of green energy and high energy efficiency are easy to grasp, and the process of switching hosts is generally fairly easy. Choosing a green host is therefore one of the lowest hanging fruits in creating more sustainable web services

Chapter 6. Selling Sustainable Web Design

The trick is to find out what the customer truly cares about, and use that as a lever to deliver more sustainable solutions. Here are some angles to help you explore sustainable web design with your clients:

User experience: Many website owners are aware of the importance of good UX in delivering high conversion rates, high customer satisfaction, and positive brand perception. By prioritizing streamlined, intuitive user journeys, fast load times, and offline functionality, we can create great experiences for our users no matter where they are. This leads to better commercial outcomes for the website owner and reduces carbon emissions in the process. SEO: Most website owners care about their search engine rankings, and sustainable web design can help. Google uses load speed as a ranking factor in its search listings, with some priority going to faster sites. The pursuit of efficiency in the web design and development process ensures good web performance and therefore helps improve search rankings. Accessibility: Accessibility is a key issue every organization should take seriously, but especially those serving marginalized groups. Public bodies, NGOs, and organizations operating in developing countries are particularly likely to attend to this. If their target audience cannot access[…]

In a popular cartoon drawn by Joel Pett for USA Today (http://bkaprt.com/swd/06-05/), a presenter at a climate summit stands before a screen that lists the benefits of pro-environmental action: “Energy independence, clean water, air, healthy children, etc.” A man in the audience stands up to ask, “What if it’s a big hoax and we create a better world for nothing?”

What if this book is a big hoax, and the internet doesn’t contribute to climate change at all? You’ll have spent all this time reading about sustainable web design principles that help us create a faster, more accessible, more enjoyable, easier to use, and more resilient internet. Would that be so bad?

If you want to sell it to clients, start by simply dropping it into conversations on a regular basis, lightly at first, and see how they respond. Likewise, if you’re trying to get your boss or colleagues interested, then talking about it openly as something you care deeply about is the first step to seeding the concept in their minds.

We’ve found that the key to success isn’t to try selling “sustainable web design,” but to sell the client what they really want. Focus on solving the client’s specific problems first, while using sustainability as a tool to solve those problems. As sustainable web design has so many benefits, it’s nearly always possible to find something high on the client’s priority list—such as SEO, conversion rates, or accessibility—that can pave the way for pursuing more sustainable solutions

Security: For organizations that consider security a high priority, going the extra mile and embracing solutions such as firewalls and static web technology can add an extra layer of protection while also delivering reduced carbon emissions

Hosting costs: For high-traffic websites, web hosting can become a major ongoing cost. As traffic increases, the infrastructure required to handle the heavy server load and bandwidth usage can become both a technical and a financial burden on the project. Many of the approaches of sustainable web design help by minimizing server load and the amount of data transferred to each user.

As for persuading the client to use a green hosting supplier, it’s unlikely to directly solve their project goals. However, in most cases, switching to another host is a fairly minor job, and there is no cost premium for hosting with a green provider, so there isn’t a downside. On the upside, the client would gain the reputational benefit of being able to state that their website runs on renewable powered servers and have their website show positively when measured through tools like Ecograder, Website Carbon Calculator, and The Green Web Foundation database

In a 2019 report, independent think tank Doteveryone found that significant numbers of highly skilled people in the tech industry are leaving jobs they feel could have negative consequences for people and society, at considerable expense to their employers. The report found that 63 percent of tech workers said they would like more opportunity to talk about ethical issues in their projects, and 78 percent would like more practical resources to help them do so (http://bkaprt.com/swd/06-01/, PDF).

Developing an organizational culture in which issues such as climate change are openly discussed and teams are empowered to make positive choices requires investment—but it’s an investment that can easily pay for itself in staff retention. If you’re trying to sell web sustainability to your boss, this is probably one of the strongest arguments you can make

My colleague Rachael Blair summed it up nicely: “People now don’t just want a ‘job,’ but to be part of something bigger, to do work that they really believe in, and to make a positive difference in the world” (http://bkaprt.com/swd/06-02/).

governments are the single largest customers for products and services in any country, and they have the potential to influence markets through their procurement decisions. Even if it hasn’t happened yet, as climate change rises in priority on the global political agenda, it becomes a question of when, not if, they will introduce sustainability as criteria in their procurement of digital services.

When governments do start including sustainability as procurement criteria for digital services, organizations that have already embraced sustainability in their work will have a significant advantage in winning government contracts. If you work on projects in or for the public sector, then this is something worth taking seriously. Being proactive and getting ahead of the competition now will put you in a strong position to win government contracts down the line

Web sustainability might not currently be a part of specific government regulations in the way web accessibility is in some countries, but there are good reasons to believe it will happen. With emissions from internet services rising rapidly, without some form of environmental regulation to tackle it, governments will struggle to meet their obligations under the Paris Agreement

There are many possibilities: directly enforcing sustainability standards in digital projects, labeling digital products for energy efficiency and carbon footprint (as is already the case for vehicles and electrical appliances in many countries), establishing limits on the amount and type of energy consumed by data centers and telecoms networks, and more.

In the short term, sustainable design will serve as a differentiator for organizations that embrace it wholeheartedly. But we should work towards a future where sustainable practices are no longer so rare they make us stand out from the crowd

The COVID-19 pandemic in 2020 highlighted a new challenge, as millions of office workers began working from home. While this temporarily had a positive impact on the environment and air quality, it also put extra strain on the web, with peak internet traffic up by 30 percent in Italy, according to Cloudflare (http://bkaprt.com/swd/07-08/). Thankfully, the internet held up well overall, but many people experienced degraded performance. It’s a glimpse into a future where we may need to travel a lot less and rely on internet services to a far greater extent.

But web services can be designed to be more resilient to our changing climate. As Hurricane Irma approached the United States in 2017, CNN announced that they had launched a text-only version of their website to ensure that people affected by the storm could still access critical news with only a minimal data connection required (FIG 7.3). The homepage of the text-only site is 97.5 percent smaller than the main CNN website, making it not just low-carbon, but also far more accessible. It was extremely well received, as it ensured that many people had access to critical information even when the wired broadband and 3G/4G networks were down (http://bkaprt.com/swd/07-10/

We must challenge our own assumptions and think deeply about the true problems we are trying to solve. Is our job to design a website, or is it to provide users access to information and services? By focusing on the true problems to be solved, we might just find some creative solutions

You might be wondering how ecofriendly it is to put satellites into space. The SpaceX program plans to launch forty-two thousand satellites into the Earth’s orbit. That sounds like a lot of rocket fuel, but the CO2 released by launching these satellites is roughly equivalent to that of five full passenger planes journeying from London to Sydney (http://bkaprt.com/swd/07-15/).

For web designers, a satellite network could help us deliver web services to a much wider audience currently excluded from our digital world. And by embracing resiliency to maintain steady communication amid fluctuating climate circumstances, we can maximize the benefits to these new web users. This is how we can create a web that adapts to what users need, rather than demanding they adapt to limited networks and service providers.

Ensuring fast, reliable, and open access to the internet for the world’s citizens is going to be a growing challenge as the large-scale impacts of climate change begin to take effect. The good news is that many of the approaches we can use to create a more climate-friendly web are the same approaches that will help us create a more resilient web. When we pull together approaches such as static web technology, content delivery networks, offline functionality, and communication technologies like SMS, we can create web services that stand up to almost anything.

WE’RE AT A CRITICAL TIME in history where we must choose what future we want. We can continue with business as usual, which is easy in the short term but locks us into a dystopian future—or we can take action, and rapidly transition to a cleaner, fairer, and more sustainable society

A sustainable web is possible. A web that isn’t just compatible with a zero-carbon future, but also supports our transition to that future. A web that is accessible to all, even in times of crisis, and is faster, more enjoyable to use, and potentially more profitable

For those of us who work in digital, creating a sustainable internet is our job. We cannot expect the public to go on a data diet or wait for governments to implement regulatory solutions. It’s our responsibility, as the people who build and maintain the hardware and software of the internet, to make sure our work creates the future we want and need

There is no downside to a sustainable web, and creating it isn’t fundamentally difficult. In fact, it’s one of the most tangible and achievable steps in the zero-carbon revolution we’re embarking on. For a sustainable web to become a reality only requires us to be aware of the issues and have the guts to challenge the status quo in making it a priority.