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:
- Make your website incredibly fast loading
- Host your website in the cloud on servers using renewable energy
- Choose low-carbon regions
- 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.
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.
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:
- Host on Green Web Servers: Host your servers on carbon-neutral energy
- Reduce Load on the end-user: Bring as much as possible the load of the requests to your webservers instead of the user.
- Reduce Third-Party Tools: Remove all requests to third-party tools not running on carbon neutral web servers
- 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:
- Move to the Cloud
- Host on Green Web Servers
There are a few carbon-neutral website hosts that run only on renewable energy:
- Google Cloud Platform
- Microsoft Azure
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 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.
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.
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.
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:
- Do you need it?
- Is there an alternative that weighs less?
- 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 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.
|GA with GTM||75kb|
|Cloudflare Zaraz||Not loaded on user device|
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:
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:
- Define a page weight budget
- Avoid Hero Images
- Avoid Parallax Images
- Remove images when not critical to the user. Rule of thumb, if it is a stock photo, it sucks, you don’t need it.
- Carousels are also bad for the users and the environment
- Use system fonts
- Use SVG icons instead of images
- Load image when requested
- Use darker shades that take less energy
- Blur the sides of images
- Show image on demand
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.
- Understand, improve or remove pages with low value
- Satisfy user intent as well as possible
- Good site architecture. Look this fantastic video on Amazon’s Architecting for sustainability
- Have a strong robots.txt (check this one for inspiration)
- Focus on evergreen content and limit creation of short-lived content less suited for SEO traffic
- Don’t redirect everything
- Don’t crawl everything
- You don’t need ALL the data ALL the time
- Improve Core Web Vitals
- Reduce tracking
- Consider 404, or 410 instead of noindex
- Enhance HTTP header tags. When google fetch a page with noindex x-robots-tag, they may skip crawling the page altogether.
- Leverage the
X-Robots-Tagwhen you know the date where your page should be removed from the index.
last-modifiedHTTP 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
- Unload unused CSS / JS files
- Remove third-party assets
- Serve custom fonts as WOFF2
- Use Lightweight CSS libraries alternatives to Bootstrap like purecss or this library
- Brotli or GZIP compression of files.
- Do not autoplay videos
- Lazy-load images
- Use Webp or AVIF image formats
- Auto reduce, resize, compress images
- Serve different images sizes for different devices (smaller images on smaller devices)
- Dark theme instead of a light theme
- 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.
- 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.
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:
- Answer the questions that your title implies
- Stop clickbait titles that force user to click to know the answer (You”ll never believe what happened…)
- Improve existing content instead of writing new articles
- Don’t use GIFs. Load a video instead.
- Reduce the size of the images that you add to your content
- Avoid images that do not improve your content. Stock photos DON’T improve it.
I am not the most knowledgeable person about eCommerce, but through a bit of research, I found some guidelines for eCommerce managers.
- Choose distributors carefully
- 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.
- Be transparent. Source of your distributors, recycled material, carbon-neutrality, etc.
- Use Stripe Climate. For instance, I am donating 1.5% of donations made through Buy Me a Coffee.
- Beware of online activity. Choose carbon neutral platforms such as Shopify.
- Have a sustainable return policy. Photos of broken products are enough for replacement.
- Use sustainable packaging such as compostable mailer bags or biodegradable packing peanuts
- Select LOCAL, eco-friendly dropshippers. Please let me know if you know some 🙂
- 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.
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:
- Run machine learning algorithms on carbon-neutral servers (Google Cloud, Microsoft Azure)
- Run choose data centers in low carbon intensity region (Canada, Sweden)
- Improve your data pre-processing skills. Drop unused features
- Improve precisions of models BEFORE scaling
- Save trained machine learning models. Beginners often run models each time they need it. Instead, store the trained model for later use.
- 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.
- Train model on smaller subsets of data to evaluate which model to use.
- Choose more efficient programming languages (C++ instead of Python or Ruby)
- Use smaller training datasets
- Choose the right hardware
- 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.
- Execute cross-validation with random search instead or grid search (
perfplotto measure the performance of your code
Additional documentation about Green Machine Learning:
- 11 ways to reduce the energy consumption of AI
- Greening AI: Rebooting the environmental harms of machine learning
- Energy and Policy Considerations for Deep Learning in NLP
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:
- Use less tracking. Marketers love to track everything, but tracking is one major contributor to emissions. (see the section on tracking)
- Product packaging and freebies. Marketers are the one buying the promotional material. Think sustainable.
- 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.
- 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.
- 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, …)
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
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
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.
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
- AWS re:Invent 2021 – Architecting for sustainability (YouTube)
- The Carbon Reduction Opportunity of Moving to the Cloud for APAC (PDF)
- The Carbon Reduction Opportunity of Moving to Amazon Web Services (PDF)
Measure Carbon Emissions of Your Site
Many tools are available to help you reduce your carbon emissions:
- Website Carbon Calculator
- Google Lighthouse and Greenhouse plugin
- Safari Energy Impact Tool
- Cloud Carbon Footprint
- Chrome Plugins for sustainability
- AWS Customer Carbon Footprint Tool
- 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.
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.
$ 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
show web inspector or click on
Option + Command + I.
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:
- Google Cloud Carbon Free Regions
- Microsoft Azure Sustainability Calculator
- Estimating AWS EC2 Instances Power Consumption
- About Amazon Sustainability
- Green Cloud optimization checklist (PDF)
There are a few chrome extensions that you can use to analyse the impact of your site as well such as:
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.
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
- Sustainable IT Academy MOOC (French)
- What you can do when software is heating the world – Chris Adams
- A sustainable web for everyone – Tom Greenwood
- How can we design sustainably? – Tom Greenwood
- ClimateActionTech Salon – ClimateActionTech
- Green IO – Gaël DUEZ
- Designing for web sustainability – Tim Frick
- The Sustainable Ecommerce Handbook
- Sustainable Web Design – Tom Greenwood
- Ecoconception web : les 115 bonnes pratiques – Frédéric Bordage
- World Wide Waste – Gerry McGovern
- Sustainablewebdesign.org – The most compete resources for sustainable web design
- thegreenwebfoundation.org – Data and Tools for Green Web Hosting
- Learn how to define, build and run sustainable software applications – Microsoft Blog on Sustainability
- SustainableUX Youtube Channel
- Lean ICT Report 2019
- Lowwwcarbon – examples of low carbon designs
- Sustainable Web Manifesto
- Best websites examples for sustainable design
- Software Carbon Intensity (SCI) methodology or calculating the rate of carbon emissions for a software system
- Clickclean – Show which applications are running sustainably, or not.
- Switching.software – Find alternatives to your preferred products.
- Empreinte carbone d’un e-mail : mythes, réalités et solutions
- The carbon footprint of streaming video: fact-checking the headlines
- 6 Steps all companies should follow to decrease their digital impact
Green ICT Research Papers & Publications
- New perspectives on internet electricity use in 2030
- Electricity Intensity of Internet Data Transmission: Untangling the Estimates
- Evaluation de l’impact environnemental du numérique en France et analyse prospective (pdf)
- Recalibrating global data center energy-use estimates (pdf)
- Join the ClimateAction.tech Slack Channel
Sustainable Web Advocates to Follow
To learn about the sustainability of the web, follow:
- Jean-Christophe Chouinard (Me)
- Tom Greenwood
- Fershad Irani
- Chris Adams
- Michelle Thorne
- Tim Frick
- Dryden Williams
- Nick Lewis
- Martin Collignon
- Frédéric Bordage
- Tom Jarrett
- Hannah Smith
- James Christie
Interesting Articles in the Community
- Evaluating the carbon footprint of a software platform hosted in the cloud – Benjamin Davy
- The environmental case for website performance – Fershad Irani
- How to have a successful conversation about climate change – Dan Rubin
- Designing Branch: Sustainable Interaction Design Principles – Tom Jarrett
- Sustainable UX: How Designers Can Help Make a Positive Impact on the Environment – James Christie
- Green UI/UX Trends: Designing with Sustainability in Mind – Dana Kachan
- Towards a Fossil-Free Internet – Gauthier Roussilhe and Chris Adams
- How Web Content Can Affect Power Usage – Benjamin Poulain and Simon Fraser
- Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds – Michelle Barker
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.
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:
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.
Good luck with making your website carbon-neutral.
SEO Strategist at Tripadvisor, ex- Seek (Melbourne, Australia). Specialized in technical SEO. In a quest to programmatic SEO for large organizations through the use of Python, R and machine learning.