Not so quick wins to build and maintain websites with a lower carbon footprint

Published by Chris Butterworth
on 01/12/2022

This article comes as a direct follow up to “quick wins to help lower the carbon emissions of your website” where we listed some fairly straightforward tasks to help lower the emissions and improve performance of a website.

That article was aimed at website owners, managers, developers or designers as they are things that can be done after a website or web application has been built. This article isn’t. It’s aimed at those same people before, during and after the production of a website as they should be a part of the process.

User experience

Streamlining user journeys and lowering the number of steps needed can help improve conversation rates and also helps with lowering emissions as there are less pages to load.

Retaining users can be tricky so there can be the temptation to use dark patterns or anti-patterns as as way of accomplishing this and it’s important not to use these.

Design

Designing with sustainability in mind can be tricky but following some of the items in the quick wins article can give you a massive head start. Key points here would be to design with less media, or choose media differently whether as a vector illustration or heavily stylised and dithered image and designing with system fonts to reduce the need for additional resources.

Development tools

Choosing the right tools for the job is incredibly important as it can have big implications further along.

Content management system/framework

The biggest choice to make is which content management system or framework to use. These can have the biggest impact with energy usage when in a production environment, can help or hinder development and allow users (whether internal users or clients) to edit and update content. WordPress, Drupal, Craft and Joomla are all examples of more traditional PHP based content management systems and by default they load each page dynamically - getting content from a database to create a page - which can use a lot of energy when there’s a lot of content.

When performance takes a hit due to this, we can take a look at caching with caching strategies being another decision to make. Many hosting providers have caching mechanisms such as memcached (check this with your hosting provider which one you have) and some content management systems have their own caching mechanisms like transients in WordPress, or even static caching mechanisms like what is in Statamic.

Caching strategies

Caching mechanisms aren’t simply for backend technologies but also for front end assets too. Expiry headers can be set so that assets are cached in the browser for a set amount of time, this can cause other problems when it comes to updating files if needed (new styles, bug fix, new template etc) so versioning helps massively too. Service workers may be another

Front end frameworks and libraries

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.

Build tools

Ensuring CSS and JavaScript files are the smallest they can be helps massively when it comes to reducing file size, improving performance and reducing carbon emissions as a consequence of this. Making this happen can be tricky and one of the main ways is to use build tools to package files ready for deployment. Whether Gulp, Grunt or Brocolli or one of the dozens to chose from, they are all good at what they do and can have a massive impact.

If part of a team, using some form of continuous integration or deployment tool to ensure that minified files aren’t managed within version control as they can cause issues with merging files.

Ongoing maintenance

This might be fairly controversial but every single person who manages a website should have some understanding of digital sustainability and tailor their approach to adding and maintaining content to keep emissions low. This should include some knowledge on image compression or at least have tools and processes in place to enable this such as plugins or extensions or content workflows.

This means that new content created can be low impact but we should be looking at older content too. Content can become irrelevant, SEO’s use the term ROT (redundant, old, trivial) and content also uses energy to store, filter, process and display and removing it will again help with lowering the websites energy usage.

Standardising

BIMA’s sustainability council are leading efforts to create standards in the same style as the WCAG with the hope that W3C adopts them; we’re a part of both efforts to help shape and validate them as well as help organisations implement them.

Outside of web design

Websites and web applications tend to be the tip of the iceberg when it comes to digital sustainability but they represent a huge gateway to explore the topic and its impact throughout an organisation and its digital ecosystem.

When it comes to estimating the impact of your web presence or application you can take a look at Beacon, our website carbon calculator which can be used along side analytical data to estimate the full impact over the course of a year. We do this as part of our free audits to give you a baseline to start from, if you’d like one or would like to discuss anything within the topic get in touch using the form below.