A Guide to Building a Sustainable Web

A guide to creating a sustainable website.

In this tutorial, we will look at the most important changes that you can do to create an eco-friendly website.

Highest Impact Changes to Reduce Carbon Emissions

For a sustainable website, the highest impact changes you can make to reduce carbon emissions of your site are:


Subscribe to my Newsletter


  1. Make your website incredibly fast loading
  2. Host your website in the cloud on servers using renewable energy
  3. Choose low-carbon regions
  4. Remove unused assets or running processes

What We Will Learn about Web Sustainability

This guide will help to minimize the climate impact of your website by diving really deep into initiatives that will help you reduce carbon emissions.

Website Carbon Calculator

Please excuse the Ads on this site. I only have them to learn how to make them greener…

What is a Sustainable Web?

Sustainable Web describes the web processes that can be optimized to reduce global carbon emissions caused by the existence of a website.

Those processes include sustainable web design, sustainable web development, sustainable SEO, and more.

The emission can be caused by the network, the user device’s activity, the server emissions and the hardware.

Why Care About the Ecological Impact of the Web?

The manufacturing of web servers and end user devices, along with the tremendous amount of electricity that the internet consumes make the ICT industry carbon emissions to be as large as the aviation industry.

Source: Tom Greenwood: A sustainable web for everyone

Depending on the company where you work, you may be able to influence decisions that would reduce carbon emissions on a greater scale than you could by offsetting your own lifetime carbon emissions.

How the Web Works

To build a sustainable website, we first need to understand how the internet works.

In a (very) simplistic way, the web works like this.

Whenever we access a URL in our browser (i.e. Chrome, Firefox, …), we are sending an HTTP request to that website’s web servers through a network. That web server returns the HTML content of the page to your web browser, and your web browser processes it to display the page.

The webservers are simply a collection of powerful computers without the screens and other things that you would need on a home computer.

How do our Websites Impact the Environment?

According to sustainablewebdesign.org, whenever we use the Internet, we are using four things that impact the environment:

  • Consumer device energy: Users electricity involved in using your application. Accounts for 52% of the system
  • Network energy: Data transferred through the internet. Accounts for 14% of the system
  • Data Center Energy: Energy required to host and serve the data to the user. Accounts for 15% of the system.
  • Hardware production: Energy required to create and replace the material (user devices, web servers, network wires, etc.). Accounts for 19% of the system.

The biggest places where we can have an impact is on the Consumer’s device electricity and the networks.

However, it usually is easier to start with your design and your data centers as you have more control over them.

How to Build a Sustainable Website?

To reduce our impact and build a sustainable website, we need to:

  1. Host on Green Web Servers: Host your servers on carbon-neutral energy
  2. Reduce Load on the end-user: Bring as much as possible the load of the requests to your webservers instead of the user.
  3. Reduce Third-Party Tools: Remove all requests to third-party tools not running on carbon neutral web servers
  4. Optimize SEO and UX: Improve UX by improving speed and efficiency

1. Host on Green Web Servers (preferably Cloud)

To reduce your impact you want to:

  1. Move to the Cloud
  2. Host on Green Web Servers

There are a few carbon-neutral website hosts that run only on renewable energy:

  • Google Cloud Platform
  • Microsoft Azure
  • GreenGeeks
  • Greenhost
  • Rackspace
  • Dreamhost

You can also consult the Green Web Foundation to see if your site is hosted on Green Energy.

2. Reduce the load on your users

To reduce the load of the request on your user, the goal is to make it as fast as possible. I have a guide on how to improve page speed on a WordPress site, but here are the basic tips to reduce the load on your user.

Static Websites

Static websites are way faster than dynamic websites (e.g. sites that use WordPress for instance).

  • Static websites build a webpage on the server before is is requested. Only the a static version of the HTML is sent to the user.
  • Dynamic sites that build the webpage at the time of the request. When the page is requested, the browser will have to load HTML, CSS, JavaScript along with all API calls required to load the page.

Instead of using WordPress, you may build a completely free fast and highly secure website using Hugo, Netlify and forestry.io.

This is optimal for simple blogs.

Caching

If you can’t build a static website, you can use caching for your site.

Caching works by loading all the content of the page on the webservers before the user request the URL. Then, when the URL is fetched, the static version of the page is shown.

This is good for web pages that don’t change a lot but fail when a web page needs to be fresh

  • Implement page caching for pages that don’t change a lot. Wouldn’t work for a News feed for example.
  • Use service workers for frequently used assets.

CDN

CDNs help reduce the distance that the data has to travel to the user.

For example, if your host is based in Canada, it would take longer for the data to travel to users in Australia than it would for users in Canada. This is how the CDN helps reduce the distance:

  • The CDN (e.g. Cloudflare) download the page from your carbon neutral server in Canada
  • It hosts an “image” of your site at that point in time in servers in multiple countries, for instance, Australia.
  • When the user in Australia visits your website, it is served the content from the Australian based CDN server instead of your original servers in Canada.

3. Reduce Third-Party Tools

There are many things to consider when using third-party tools:

  1. Do you need it?
  2. Is there an alternative that weighs less?
  3. Is it hosted on Green web servers?

Do you need third-party libraries?

In my career, I have seen marketing teams load everything and track everything, just because.

Marketers, leaders and developers should constantly reevaluate what they really need to track.

Here is an example of what we see way too often in organisations.

Too much tracking:

  • Hotjar to track user behaviour
  • Microsoft clarity to track user behaviour (again?)
  • Onesignal to send push notifications
  • Google Analytics with Google Tag Manager
  • Facebook and LinkedIn tracking libraries
  • and I skip a lot.

Hotjar and Clarity are Crappy and Slow

Truth is, almost nobody ever looks at Hotjar and Microsoft Clarity user journey data. These libraries are massive and slow down your site.

Drop them. If you need it, add it for a few days and then remove it.

Why we hate Onesignal Push Notifications

Onesignal push notifications are kind of spammy. You can use it. But, a lot of organisations add Onesignal, but don’t ever send push notifications.

Don’t keep it just because. If you are not sending using it, remove it. Pagespeed will increase and you’ll gain better traffic from SEO.

Google Analytics

Google Analytics is very useful, I agree.

But, maybe you don’t need to lead it with Google Tag Manager.

Even wetter, maybe you just need to load Minimal GA.

This is what I did. I removed GTM and Google Analytics and replaced them with Minimal GA.

This is fantastic!

UPDATE: Minimal GA will probably not work when Universal Analytics is Deprecated 🙁

Instead of loading 75kb, I now load 1.5kb, and I can still use Google Analytics normally without seeing the difference at all. This is a no-brainer for a blog like mine.

Social Media Trackers

The first thing to be aware of social media trackers is that you give access to your user data to those platforms that you don’t own. Not the best idea.

Next, marketers will always ask to have all trackers on site. My advice: only enables them when campaigns are running.

Reduce the size of Tracking

Tracking has an environmental impact. Everything you load on users’ devices consumes electricity. Is there an alternative to what you commonly use? Cloudflare recently launched Zaraz which allow sending events from the edge without the need to add the tracker to the HTML of your site (see: Cloudflare Zaraz).

Still, bear in mind that tracking involves events and storage, which are also forms of data transfer. Always good to keep tracking to a minimum.

The table below is inspired by Tom Greenwood’s work to help you see how you can find alternatives to the libraries that you load.

PlatformSize
GA with GTM75kb
Matomo40kb
Google Analytics17kb
Minimal GA1.5kb
Fathom1.2kb
Plausible<1kb
Microsoft ClarityTBC
HotjarTBC
Facebook PixelTBC
OneSignal70kb
Cloudflare ZarazNot loaded on user device
Source: A sustainable web for everyone

4. Sustainability Optimizations

Good Design, development, UX and SEO go hand-in-hand with low carbon websites. Here are some good practices and examples of sustainable website development:

  1. Web Design
  2. SEO
  3. Web Development
  4. Blogging and copywriting
  5. E-Commerce
  6. Data Science
  7. Marketing

Sustainable Web Design

Web designers are the ones that decide how the web will look. Good web designers don’t need images to make the web beautiful. Sustainable design focuses on how to make great looking websites and reducing the impact the environment:

  1. Define a page weight budget
  2. Avoid Hero Images
  3. Avoid Parallax Images
  4. Remove images when not critical to the user. Rule of thumb, if it is a stock photo, it sucks, you don’t need it.
  5. Carousels are also bad for the users and the environment
  6. Use system fonts
  7. Use SVG icons instead of images
  8. Load image when requested
  9. Use darker shades that take less energy
  10. Blur the sides of images
  11. Show image on demand

Sustainable SEO

Almost everything about SEO help optimizes for lower carbon websites: user intent satisfaction, page speed, lower bounce rate, content pruning, crawl budget optimization, better site architecture, better UX… By any means, invest in SEO.

  1. Understand, improve or remove pages with low value
  2. Satisfy user intent as well as possible
  3. Good site architecture. Look this fantastic video on Amazon’s Architecting for sustainability
  4. Have a strong robots.txt (check this one for inspiration)
  5. Focus on evergreen content and limit creation of short-lived content less suited for SEO traffic
  6. Don’t redirect everything
  7. Don’t crawl everything
  8. You don’t need ALL the data ALL the time
  9. Improve Core Web Vitals
  10. Reduce tracking
  11. Consider 404, or 410 instead of noindex
  12. Enhance HTTP header tags. When google fetch a page with noindex x-robots-tag, they may skip crawling the page altogether.
  13. Leverage the unavailable_after HTTP Header X-Robots-Tag when you know the date where your page should be removed from the index.
  14. Implement last-modified HTTP header. Google may not recrawl unnecessarily a page that has not been modified. Without it, Google would make hash comparisons to evaluate if the page has changed.(code example for WordPress)

Interesting Green SEO presentation by Stu Davies at BrightonSEO.

Sustainable Web Development

Web developers are front-of-line workers for web sustainability, so try to minimize everything, reduce JavaScript, cache everything and reduce the number of external requests.

  1. Reduce, split and bundle JavaScript assets
  2. Minify CSS, JavaScript and HTML
  3. Unload unused CSS / JS files
  4. Remove third-party assets
  5. Serve custom fonts as WOFF2
  6. Do not load JavaScript sitewide. Instead of a massive JavaScript file sitewide, have smaller JavaScript files that load only the required JavaScript for the page.
  7. Use Lightweight CSS libraries alternatives to Bootstrap like purecss or this library
  8. Brotli or GZIP compression of files.
  9. Do not autoplay videos
  10. Lazy-load images
  11. Use Webp or AVIF image formats
  12. Auto reduce, resize, compress images
  13. Serve different images sizes for different devices (smaller images on smaller devices)
  14. Dark theme instead of a light theme
  15. Get your <head> in order. Sophie Gibson showed that you could use the Capo Chrome extension to re-order element in the <head> to improve site speed. Install extension and open the console from Chrome Devtools.
  16. Host website on the cloud on carbon-neutral servers. 80% of emissions can be reduced by moving from on-premise data centres to the cloud.
  17. In the cloud, host in regions with a higher % of carbon-free energy percentage. e.g regions running on carbon-free energy >90% of the time.
how to order the head for pagespeed
How to order the head for Pagespeed – by Sophie Gibson at Women in Tech SEO

Sustainable Blogging / Copywriting

Bloggers have ways to impact carbon emissions. Even on a poorly designed website, you can still impact the environment by the choices you make:

  1. Answer the questions that your title implies
  2. Stop clickbait titles that force user to click to know the answer (You”ll never believe what happened…)
  3. Improve existing content instead of writing new articles
  4. Don’t use GIFs. Load a video instead.
  5. Reduce the size of the images that you add to your content
  6. Avoid images that do not improve your content. Stock photos DON’T improve it.
Example of crappy clickbait/stockphoto that no one should use (Wikipedia)

Sustainable E-Commerce

I am not the most knowledgeable person about eCommerce, but through a bit of research, I found some guidelines for eCommerce managers.

  1. Choose distributors carefully
  2. Offset transportation carbon emissions. Some tools for offsetting: Shopify, BigCommerce, Woocommerce, Ecocart (muliple platforms incl. Wix and Magento). Also, co2ok and cloverly. Note that you can use the Ecocart plugin to offset your own purchases.
  3. Be transparent. Source of your distributors, recycled material, carbon-neutrality, etc.
  4. Use Stripe Climate. For instance, I am donating 1.5% of donations made through Buy Me a Coffee.
  5. Beware of online activity. Choose carbon neutral platforms such as Shopify.
  6. Have a sustainable return policy. Photos of broken products are enough for replacement.
  7. Use sustainable packaging such as compostable mailer bags or biodegradable packing peanuts
  8. Select LOCAL, eco-friendly dropshippers. Please let me know if you know some 🙂
  9. Use Sustainable Shipping Companies. FedEx is commited to carbon neutrality by 2040 and UPS by 2050, or Australian start-up Sendle that is 100% carbon-neutral.
Noissue compostable mailer bag

Additional resources for e-Commerce brands:

Sustainable Data Science

Machine learning is increasingly used to improve user experience on websites. However, it is not without negative impact:

For instance, one Google NLP model was reported to require the same amount of energy as a trans-American flight.

Data scientists crunch a lot of data, and data manipulation has a big impact on the environment. There are ways, to reduce the harm of using AI on the Web:

  1. Run machine learning algorithms on carbon-neutral servers (Google Cloud, Microsoft Azure)
  2. Run choose data centers in low carbon intensity region (Canada, Sweden)
  3. Improve your data pre-processing skills. Drop unused features
  4. Improve precisions of models BEFORE scaling
  5. Save trained machine learning models. Beginners often run models each time they need it. Instead, store the trained model for later use.
  6. Use smaller model in the data discovery phase. You don’t need the most complex and energy intensive model when exploring your data. For example Deep learning algorithms use more than twice the energy of ensemble algorithms.
  7. Train model on smaller subsets of data to evaluate which model to use.
  8. Choose more efficient programming languages (C++ instead of Python or Ruby)
  9. Use smaller training datasets
  10. Choose the right hardware
  11. Make your data available to the rest of the business. Trained algorithms or data analysis may be useful to others in the business and prevent re-training the data.
  12. Execute cross-validation with random search instead or grid search (RandomizedSearchCV, GridSearchCV in sklearn)
  13. Use %%time, %timeitline_profiler, or perfplot to measure the performance of your code
Source: Ekkono

Additional documentation about Green Machine Learning:

Sustainable Marketing / Social Media

Marketers are often the stakeholders when it comes to building a website and the decisions that you make as a marketer influence your impact on the environment. Here are a few guidelines for sustainable marketing:

  1. Use less tracking. Marketers love to track everything, but tracking is one major contributor to emissions. (see the section on tracking)
  2. Product packaging and freebies. Marketers are the one buying the promotional material. Think sustainable.
  3. Don’t use automatic social media publishing tools such as Hootsuite or Dlvr.it . First, not everything we share on the web is social media worthy. Second, the engagement with these social share is really bad. All that does is increase the number of requests, increase the size of the web, and provide next to no value.
  4. Generate revenues through affiliate marketing instead of display Ads such as Google Adsense. I truly tanked my website’s performance with Adsense and am experiencing around it to find solutions to optimize it. So far, here is the best tutorial that I have found.
  5. Avoid engagement bait on social. Not everything on social media have value for a business. (e.g. Tag someone that likes dogs, LinkedIn Polls about who like coffee the most, …)
Source: Adam Gray

Sustainable Cloud (AWS, Google Cloud, Microsoft Azure)

Cloud has a much better power usage effectiveness than most on-premise web servers.

That being said, globally, Microsoft Azure and Google Cloud are carbon-neutral, AWS is not. But, still, AWS is better than most on-premise web servers.

Furthermore, each Cloud host has different regions, with different carbon emissions for each, with different energy effectiveness levels at different times of the day.

Overall, on any cloud platform, you can reduce your impact.

Google Cloud Sustainability

Google Cloud is carbon neutral globally. But, not all locations are carbon neutral all the time.

Just listen to this podcast starring Google’s Steren Giannini:

He discusses initiatives like:

  • Moving data centres from Las Vegas (19% carbon-free) to Oregon (90% carbon-free) with very minimal impact on speed.
  • Run CRON jobs during the day when the sun is shining

Amazon AWS Sustainability

Amazon’s AWS is way behind its cloud competitors in terms of carbon emissions, but not in terms of user adoptions.

Here are a few initiatives to reduce AWS carbon emissions:

Move data centres to low carbon regions such as Canada’s ca-central-1 or Northern Europe eu-north-1.

Beware: Moving data center may introduce latency to the user which we be even worst for the environment

Here’s a carbon intensity map for AWS users.

Source: cloudcarbonfootprint.org

Other AWS initiatives to reduce AWS carbon emissions:

  • Measure Impat Using the Customer Carbon Footprint Tool
  • Switch to Graviton3 EC2 instances. 60% better performance per watt.
  • Reduce load on Amazon servers using Cloudflare.
  • Use spare EC2 capacity with the EC2 spot instances and save up yo 90% of the cost of on-demand
  • Auto-scaling infrastructure with user load
  • Remove unused assets
  • Send less information to Athena logs. What is not important to your business?
  • Optimize compression of log files (ZSTD instead of GZIP)
  • Store non-user facing data (e.g. logs) to carbon neutral regions
  • Pick a lower impact storage class
Source: AWS re:Invent 2021

Additional information:

Measure Carbon Emissions of Your Site

Many tools are available to help you reduce your carbon emissions:

  1. Website Carbon Calculator
  2. Google Lighthouse and Greenhouse plugin
  3. Safari Energy Impact Tool
  4. Cloud Carbon Footprint
  5. Chrome Plugins for sustainability
  6. AWS Customer Carbon Footprint Tool
  7. Ecodesignwebcalculator – Decathlon open sourced their app

Website Carbon Calculator

The simplest option is to use websitecarbon.com, but it does not provide debugging tools to help you improve your website.

Website Carbon Calculator

Alternatively, you can use Ecoping, which is built by the same people and provide more debugging information for your site.

Other alternatives to these could be:

Google Lighthouse and Greenhouse Plugin

Google Lighthouse is a fantastic tool that helps you debug if your website is performant or not.

It is also a very efficient tool to help you reduce your emissions by improving your site’s performance.

In Chrome, you can access Lighthouse by opening Chrome Devtools (right-click + inspect) and running a Lighthouse report.

From what I have seen, better performance means a more sustainable website.

You can also go the extra length and install the Greenhouse plugin for Lighthouse to check which third-party tools are hosted on green servers. This, however, requires more technical skills.

To be able to use the plugin, you need to Install NodeJS and NPM and then run this in your Terminal.

$ npm install lighthouse
$ npm install lighthouse-plugin-greenhouse
$ npx lighthouse https://www.jcchouinard.com/ --plugins=lighthouse-plugin-greenhouse --view

Safari Energy Impact Tool

Safari is the only web browser that has an energy impact tool that I know of.

How to show the energy impact tool in Safari?

In the top menu bar, click on develop > show web inspector or click on Option + Command + I.

Then click CPU on the left edit menu and reload the page.

Cloud Carbon Footprint

For the websites that are hosted on the cloud (AWS, Azure, Google Cloud), there is a very interesting open-source tool that you can use to build an application to keep track of the carbon impact of your activity in the cloud.

Cloud Carbon Footprint helps us to keep track of our cloud carbon emissions through time by region, service, or account, which is a good starting point to see where you should focus first.

When we built that application for Jora, we managed to break down the impact of our data centres hosted with Amazon AWS within a few days work and cost a little bit of money, but not too much:

To build an app that evaluates the environmental impact of your AWS account you will need:

  • Access to AWS Cost Explorer and access level to create IAM user
  • Have NodeJS and Yarn installed

Then, the documentation is quite complete to get this started. This is best to be done by a developer as it requires a significant understanding of AWS.

If you don’t want to build the app, and still are interested in sustainability in the cloud you can always look at:

Chrome Extensions

There are a few chrome extensions that you can use to analyse the impact of your site as well such as:

Carbonalyser

GreenIT-Analysis

Learn More About Climate Change

Climate change is a hairy challenge, but there are existing solutions. I encourage you to consult these two websites to get yourself up to speed with what we have to focus on:

  • Drawdown.org – Climate Solutions 101. Video series explaining priorities
  • Climate Action Tracker. Tracking of country specific initiative with plenty of supporting content
  • Carbonatlas. Statistics on global carbon emissions
  • Sustainability reports. Best way to learn about publicly listed companies actions for the environments.
source: Carbon Atlas

Offsetting Carbon Emissions

Unfortunately, it is not possible yet to create a truly carbon-neutral website since we don’t really have control over the entire network.

What we can do for the remaining emission is offsetting carbon emissions.

According to my research, some of the most interesting carbon offset programs are:

Free Tech Sustainability Courses

Interesting Videos

Sustainability Podcasts

Books

Online Resources

Green ICT Research Papers & Publications

Communities

Sustainable Web Advocates to Follow

To learn about the sustainability of the web, follow:

Interesting Articles in the Community

An impact that goes beyond your own

By switching to renewable sources of energy, you are not only reducing your own impact, but you are also voting with your wallet.

1 $ = 1 Vote

Money has more influence than votes.

Every dollar spent on renewable energy providers is pushing their growth and sending a strong signal to dirty providers that nobody wants their fossil fuel energy.

If you live in the central US, or in a country like Australia or Poland, where most electricity production comes from fossil fuels, this is massively important.

Check out how green is the electricity in your country.

Source: ElectricityMap

Sustainability starts at work

Let’s face it, to become carbon neutral, we can’t rely on 7 Billion people to change their behaviour. We need to build a carbon-neutral economy. In doing so, we can move way faster towards our goal and really have an impact on both social and political decisions.

Sure we can become greener at home, but we need the businesses where we work to lead the way. As employees, we do have the power to influence our organisations to go in the right direction.

Change will not happen overnight and may face significant rebuttal. But, what people may agree is to not create any new emissions. I love that screenshot shared by Chris Adams which is a fantastic commitment for organisations to make:

source: Chris Adams

The reality is: You and most of your colleagues will not work at your current company in 2050.

What we should do for posterity, is to convince our leaders to commit to net-zero carbon 2040 climate pledge.

TL;DR

That was a lot. Let’s recap in the most simple way how we can reduce carbon emissions of our website. Host on carbon-neutral servers (e.g. Greengeeks) and improve the performance of your site.

Good luck with making your website carbon-neutral.

Enjoyed This Post?