Eco-friendly web design: how to reduce your website’s carbon footprint

The coming years will be vital for the planet’s health and human well-being, and every action counts on our journey to net zero. While the attention has been on transportation, roads, and buildings, internet emissions have gone unnoticed, accounting for approximately 4% of global carbon emissions, more than the aviation industry, and consuming 10% of global electricity, the majority of which is sourced from fossil fuels. Websites play a significant role in this consumption.

The average website produces about two grams of CO2 every time someone visits a page. Sounds small right? But with half a million monthly page views, in a year that becomes 11 tonnes of CO2. Maybe yours is less busy than that. But there are two billion websites in the world and it all adds up to billions upon billions of tonnes of CO2 needlessly going into our air.

Every single website has the power to make a difference.

So how do we reduce energy consumption?

The internet’s ecosystem includes data centres, transmission networks and user devices like computers and smartphones. Websites particularly through their use of data centres add to this enormous consumption.

As designers or anyone designing a website for themselves or for anyone else, we should be mindful of the environmental impact. This article is intended to be a simple guide that may help you get your website to be as low-carbon as possible and therefore eco-friendly. This may help improve your site performance as well as how the site ranks on search engines. It goes without saying that we should not create websites that we don’t need. If it is an existing website or a new website the following may help you to get your website to be eco-friendly — measuring under 1 gram of CO2 per page view (CO2e), by keeping the page size low and reducing data transfer. Website Carbon Calculator at www.websitecarbon.com is a tool that we recommend, which gives you a reasonably good estimate of carbon emissions of your webpages.

Eco-friendly websites: Top tips

Below are some tips to reducing the amount of data transfer from websites to help them become more eco-friendly.

1. Keep the page size/weight as low as possible. Evaluate the content of every aspect of your site; if its usefulness is in doubt, leave it out.
2. Images make up a significant amount of the page weight. You can use https://tinypng.com/ or https://shortpixel.com/ to compress photos one by one. Simply upload the image, and it will give you the same image that is now compressed (small file size). The compressed images can then be added to the website.
3. Get rid of the old unnecessary images. Upload images at the correct scale instead of relying on CSS to resize them for you.
4. Instead of JPEG, PNG, and GIF, use SVG graphics and CSS. WebP, followed by JPG, is often regarded as the most efficient image format. However, depending on the unique qualities of each image, there are some exceptions. Always save an image at the necessary size and compression level, and experiment with several file formats to find the most efficient one.
5. Lazy loading images is another great way to reduce data transfer.
6. Please don’t set videos to auto-play. Have a link to open in a host like YouTube or Vimeo. If you have videos on the page itself try to compress them and do not have them on auto-play.
7. Use a caching solution to reduce the amount of processing required to load a page for the user. Caching is the process of storing resources from one request and reusing those resources for subsequent requests. It reduces amount of server bandwidth required to display pages for the user.
8. Evaluate the content of every aspect of your site; if its usefulness is in doubt, leave it out.
9. Write clean and efficient code – Sending data to a browser uses energy; the less code you send, the less energy/electricity you use. Check if there are unnecessary plugins, plugins that you don’t need – get rid of them.
10. Minimise the use of custom fonts. Fonts are a big contributor to the weight of a web page. System fonts can be used with no impact on page weight at all. If possible stick to modern web fonts like WOFF and WOFF2, which use higher compression methods.
11. Reduce tracking and unnecessary advertising scripts that rarely offer any value to visitors to your website.
12. Use mobile solutions like AMP to trim down the current version of a webpage whenever possible. Google’s AMP project is an open-source initiative that enables fast delivery of website content. AMP allows web pages to load almost instantly, up to 90 percent faster than current standards.
13. Improve Search Engine Optimisation (SEO) of the website. This helps people find the information they are looking for easily and quickly without having to go through many pages of the website unnecessarily wasting energy.
14. Look at offloading large media for example PDF, DOCX, and MP3 resources on the site to third-party providers who are environment-friendly. You can also offload and cache the delivery of your large media with a content delivery network (CDN).

How did these tips work for you? Do you have more ideas on how to reduce the carbon footprint of a website? Then, feel free to share your tips and thoughts in our community, helping others to be eco-friendly.

Below are a few recommend links for tools and further reading on eco-friendly web design and internet.

Carbon Calculator for Websites https://www.websitecarbon.com/

Carbon Calculator for Websites by EFWA (an updated version to be released) https://websiteemissions.com/

Wholegrain Digital Blog https://www.wholegraindigital.com/blog/

How green is your website? https://ecograder.com/

Book: Designing for Sustainability: A Guide to Building Greener Digital Products and Services by Tim Frick

Mightybytes Blog https://www.mightybytes.com/blog/

Book: Sustainable Web Design by Tom Greenwood

Written by Team EFWA