Smarter design = lighter carbon footprint

If you can’t measure it, you don’t know if you’re improving it, so your journey always starts here. For a publicly accessible webpage use Wholegrain’s Carbon Calculator.

Set a max carbon emission value for pages in a product that receive the highest traffic, your whole team should work together to not exceed this.

‍Here’s a guide to some tools and techniques to get you started.

Every digital interface generates carbon emissions so even if yours is fully optimised you’ll need to offset what’s produced.

At Inktrap we use Ecologi who capture carbon by planting trees on our behalf.

Making a webpage easier to find, quicker to load and reducing the amount of unnecessary pages visited not only benefits user experience but reduces environmental impact.

This great article from PerformanceIN explains the relationship between SEO, emissions and a great user experience.

Considering the overall user experience and mapping out efficient user journeys will reduce unnecessary steps, load less content and therefore lower the environmental impact of your webpage.

Learn practical methods for reducing emissions through design in Tim Frick’s book Designing for Sustainability.

Using engaging, concise and relevant copy allows webpages to rely less on imagery (which requires more energy to download than text) and ensures users get the info they want as efficiently as possible.

Read why this is important in EcoPing’s concise article.

Less is more! Reducing the amount of CPU usage heavy content such as images and video can make a significant difference to the environmental weight of your webpage. It they are of critical importance to the goals of the page, make sure the correct formats are used and optimise content to reduce file sizes.

‍Climate Action’s practical guide to low-carbon images is a great intro to the topic.

Use variable fonts that make use of one font file for a range of styles or use system fonts if you can. System fonts have a lower environmental impact as the files are locally stored and don’t need to be loaded from a server every time a user visits your site.

Checkout Practical Typography’s guide to why some system fonts are better suited than others.

Google found that the Google Maps mobile app can use up to 63% less screen energy in night mode compared to standard mode. Using less white in the product’s design means less energy is consumed when screens are displayed on OLED screens.

Check out Wholegrain’s post about the nuances of colour effecting screen’s energy usage.

Keep things lightweight and efficient, reducing the download requirements. Sending data to a browser uses energy, so keeping code as clean and minimal as possible reduces the amount of energy that an interaction uses.

Here’s a practical lesson in how to reduce technical deck using sustainable coding.

Make sure third party integrations are lightweight too, choose the one that does the job in the simplest way to reduce download size.

Delete any unused or unnecessary plugins.

Use CSS instead where possible to reduce download weight and device processing energy required.

Find out more about how javascript increases CPU power usage in this Webkit post.

Load them at the right scale to avoid having to reduce the size with CSS.

Use modern web font file types like WOFF and WOFF2 which have higher compression techniques and only include the characters you need.

Learn more about how font choices influence sustainability in this Mightybytes post.

Only load content as the user reaches it, preventing unviewed media (which could include large file sized assets like videos and images) needing to be downloaded.

‍This post by Your Marketing People explains the benefits of faster loading content for users and SEO.

Make sure your product conforms to the latest Web Content and Accessibility Guidelines (WCAG) so more people can use your product, preventing them from needing to hunt for information from higher carbon emitting sources.

Take a look through the latest WCAG guidelines for a full list of requirements and how to meet them.

Make sure your host’s servers are powered by renewable energy to reduce your product’s carbon impact.

‍The Green Web Directory is a collection of verified green hosting providers listed by country.

Pick a hosting provider with a low Power Usage Effectiveness rating. This is a metric that measures how efficiently a data centre uses energy — a lower PUE means less energy waste and lower operating costs.

An ideal PUE is 1.0, however this is not always possible with the average in 2022 reported as 1.55 by Uptime Institute.

Selecting a hosting location near where end users are based reduces the energy required to transfer data across large distances.

Alongside The Green Web Directory, the Data Centre Map also allows you to search for data centres across the globe. Please note that this resource only lists a centre’s location and not its sustainability impact.

Save your product’s assets (files, images, videos code, data etc) across a distributed network of data centres so data loads from a local source, which can consequently speed up loading time.

Find our more about CDN benefits with this Cloudfare article.

Blocking bots from your site prevents them downloading data when it loads, reducing energy usage.

Radware cyber security have written a list of practical steps you can take to stop bots.

Making sure your servers are using the most up-to-date version of their software can help to improve speed and energy efficiency.

55% of data collected is never used. Storing this redundant data inevitably wastes large amounts of energy.

‍The Oakland Group data consultancy can help you decide what should and shouldn’t be retained.