Quick wins to help lower the carbon emissions of your website

Published by Chris Butterworth
on 14/11/2022

When it comes to digital sustainability, people tend to think straight away towards websites and with good reason. Almost every organisation will have at least one website which is accessible to the public with each visit generating a usually small amount of CO2e with high traffic websites being responsible for tonnes of CO2e every year.

Beacon is a great place to start when it comes to measuring your websites impact but sometimes working through some of the recommendations can be confusing so here we’ll run through some of the best practices that website owners, designers and developers can do to help lower their impact.

Media

Media can make a huge part of a web page and with that can make a massive impact if mishandled. Whether an image, a video or an audio clip they can be treated in ways to help lower their impact.

Images

Utilise modern formats

The WEBP format is now more widely supported with support for AVIF catching up quickly too, meaning that images can be created with much lower file sizes and impact due to this.

Google reports between 30-35% reduction in file when comparing JPEG to WEBP, with this study being carried out to show this with a variety of JPEGS and varying quality settings.

AVIF browser support may not be quite there yet but it is becoming the go to format for smaller image sizes.

A developer advocate for Google Chrome wrote up a brilliant comparison between JPG, WEBP and AVIF with AVIF having a 75% reduction in file size when compared to JPEG - there’s also some guidance on HTML implementation.

Most content management systems don’t fully support AVIF or WEBP uploads yet but there are extensions or plugins that are available for this.

Lower image quality

Compressing images can also help lower file size with 75% quality reducing file size by over 60%.

Image quality can be tested to see the impact on a user journey and conversion rates and can even be taken further by including some form of palette reduction to create more stylised images.

Stylise/Dither images

Reducing the number of colours used and dithering images can reduce file size massively - over 90% in a lot of cases.

A good example of this is the solar powered low-tech magazine website.

Use illustrations

Vector illustrations tend to me much smaller than their non-vector counterpart - less than 10KB in most cases. SVG’s are a great format to utilise for this reason and can be used for some illustrative purposes and can scale to any size with no loss in quality.

Implementation

Lazy loading is now supported in most browsers without the need for additional javascript by using a simple attribute. Ensuring this is implemented can be difficult dependent on CMS being used but some plugins or extensions have been created for the more well known platforms such as WordPress and Drupal.

Ensuring all images have height and width attributes is also important as it can have big implications when it comes to load as the layout will shift when the image loads which impacts on user interactions as things move and is measured within Googles Core Web Vitals and can negatively impact in SERP rankings.

Remove images

This is the most drastic action but this by far has the biggest impact and should be something to consider when using images can may seem frivolous and add nothing of value to a user.

Video

Never enable autoplay

Most calculators like Beacon cannot take video into consideration as they are handled differently (streamed not downloaded) so never autoplay videos, especially when audio is involved. Apple disables autoplay with audio by default by detecting an audio track or checking if the video element includes the muted attribute.

With this in mind we can look at other methods for reducing the impact of video embeds.

Direct embed

When using a direct embed using the video tag there’s a couple of things that have a big impact.

Disabling preload is the biggest thing as it stops the video being downloaded when it may not even be played. This allows you to create a custom poster image, again use the tips above to create a low impact image.

iframe embed

Whether embedding from Vimeo, YouTube or any other video hosting platform, they all mostly use iframes to embed content and with this in mind there are things we can look at doing.

Most browsers support the lazy loading attribute on iframes and will simply load the iframe normally when the attribute isn’t supported so adding this is a simple and straight forward addition to make.

You can take things further here too by utilising the srcdoc attribute to create a small interface to load the iframe on click. We even wrote a PHP function to generate this when a YouTube video id has been supplied.

Typefaces

With the implementation of @font-size rules in CSS, a whole new world for web design was opened but each font variant can add hundreds of kilobytes to a page size which then adds to the pages emissions.

Subsetting

Web fonts can have anywhere between 100 and 1,000 characters, adding support for eastern languages (Chinese, Japanese and Koreans) takes this up to 10,000! Removing these unused glyphs from a typeface can reduce the size of a font file significantly so should be done be default.

There are a number of services and web applications that can do this that can reduce the typeface from around 700KB to around 100KB (we used Inter which was 672KB to 101KB).

The W3C are working on standards called Incremental Font Transfer which will download individual glyphs instead of an entire font file to ensure minimal data is transferred and would lower carbon emissions due to this.

Modern formats

Using modern formats namely WOFF2 gives an extra layer of compression reducing a 100KB font file to 30KB.

Use systems fonts

Reducing the need for custom fonts will definitely have the biggest impact when it comes to performance and user experience. Custom fonts should be loaded in such a way that text still displays until the font file is loaded which can cause a layout shift and a flash of unstyled text with browsers loading a system font first. This is done using a CSS property and if not in place won’t show text until the font file has loaded which on slower connections can take time.

CSS + JS

Avoid bulky frameworks

Foundation, Bootstrap and Materialize are all examples of CSS frameworks that seemingly have an “everything for everyone” approach meaning that with minimal set up files used in production environments can be exceptionally large as there’d be a lot of code served that is simple not used. Stepping away from these frameworks will help with crafting better CSS and potentially better designs with better performance and a lower carbon footprint.

jQuery is a library that was once synonymous with front-end development, even to the point where it appeared as a requirement on job listings but has now become something of a novelty. With updates and upgrades and new rendering engines, most of what jQuery did can now be done using a minimal amount of vanilla JavaScript.

Remove unused code

Using CSS frameworks that integrate with build tools to remove unused code such as Tailwind aren’t bad as the files are minimal in production but can be a large learning curve for developers and can feel restrictive.

With JavaScript this may mean code splitting so that files can be loaded conditionally based on where they are used (this isn’t a quick win but definitely worth doing).

Compress and minify

Integrating with build tools such as Gulp or Grunt, can take care of removing unused code and can also compress and minify code ready for production environments.

Your web host can then be set up to compress them even further by enabling gzip or brotli compressions which should be fairly straight forward to implements. Although some content management systems like WordPress have plugins that can handle this for you (but use with care).

Hosting

Only one thing we can say here, use a hosting company that uses renewable energy or offsets their carbon footprint. The Green Web Foundation is a fantastic resource here with a directory of hosting providers across the world that are considered green.

There is more to think about here when thinking about what platform you’re using but that’s not a quick win as that should be decided on before any development work is carried out.

What next?

There’s definitely more that can be done and while this article is titled “Quick wins” there are definitely some that take more time than others and there are other things that definitely aren’t quick wins and require some deeper thought which we’ll publish soon.