Menu
Welcome to Part Two of how to keep your website a clean, green, non-oiled machine. And just like last time, we come loaded with a bunch of sustainable insights to help make your site as carbon-efficient as possible in all the good ways. Because you might not think your website makes much of a dent in the big carbon scheme of things, but so say five billion other people.
The truth is, every little bit counts, and when it comes to the big wide web, there’s loads of very doable steps that can help where it matters most.
To refresh, our last blog looked at what makes a website sustainable (hint, it’s one that aims to reduce its overall carbon emissions through its design, build and beyond) and how to go about reducing your website’s fossil-fuelled footprint.
The short version? That includes:
The long version? You can read that here.
While the design and content of your website is one way you can look to keep on the good side of sustainable, the development and hosting of your site also play a big part. So, in the spirit of saving energy, we’re passing the mic to the good folk and techsperts over at Wholegrain Digital for their how-to’s of sustainable website development and hosting. Over to them.
Developers have a lot of influence over the energy efficiency of the websites they create and maintain. Although some decisions made by designers and content creators are out of the developers hands, there are several areas where developers are fully in control and have the ability to optimise the content and designs they are given.
This probably goes without saying, but tidy and streamlined code is a fundamentally good thing. Keep code clean and simple, avoid duplication and write efficient queries. The code behind the scenes should be a well oiled, lean machine.
Keep in mind that this doesn’t just apply to the code you write, but also to the code that you borrow.
If you are using existing frameworks and libraries, ensure that they are also refined and tailored to efficiently deliver the functionality you need. Aka, don’t hit a nail with a sledgehammer. In cases where you are using a CMS like WordPress, avoid unnecessary plugins that add bloat. Instead, choose plugins that minimise server load and don’t add unnecessary weight on the front end. Our Granola starter theme is designed to help you do exactly that.
JS impacts website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the user’s device. The second of these is something that applies to JS much more than to other types of files. Functionality driven by JS is processed on the user’s computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. Hear those cooling fans on your laptop whirring? That’s energy being wasted.
Look for ways to achieve front end interactions, functionality and animations using more efficient technologies like CSS, or at least use JS efficiently.
A particular mention should be given here to tracking and advertising scripts that rarely offer any value to the user but can add significant file weight, cause significant CPU usage, slow websites down and invade their privacy.
The new web inspector in Safari has a useful tool to help assess the energy impact of a web page on the end user device, and this article by Apple’s WebKit developers provides some detailed advice.
As mentioned in the last blog, images are one of the largest contributors to the amount of data transferred on most web pages. In addition to the decisions made by designers and content creators on the use of images, there are technical decisions that significantly affect the file size of images displayed on a page. These include:
When these steps are followed, a significant reduction in image file sizes can be achieved, reducing energy consumption and improving load times with no perceivable downsides for website visitors.
There are a few technical strategies that can be used to minimise the size of fonts on websites, and even with custom fonts, it can result in file size reductions of up to 97%. Try these techniques to reduce the size of font files:
For more information about optimising performance and size of web fonts, check out this article by Josh from Wholegrain.
AMP is designed to make content load faster on mobile devices by stripping out unnecessary code and file weight, delivering a minimalist version of the original web page. In theory, technologies like AMP do not actually help much if the website is efficient to begin with, but in cases where the original web pages are not as lean as they should be, AMP can be a useful tool to strip out the fast and deliver a more lightweight and energy efficient version to mobile users.
It should also be noted that Google prioritises AMP content in mobile search results for news related topics in particular, so it can help increase visibility of your content. The downside is that your content may be served on a Google domain and some of the things stripped out by AMP could be things that you consider important. It’s a powerful tool, to be used with care.
The grey lightning bolt symbol signifies AMP content, which is given priority in mobile search by Google.
CMS powered websites make queries to the website database and dynamically generate pages. In simple terms, it means that the web server has to do work thinking about what information to send back to the user each time someone tries to load a page, and that causes the server to use more energy. One solution (listed below) is to use a server caching technology, but in some cases it may be possible to simply server static web pages with no database at all.
This can be achieved by writing the web pages as static files in HTML, CSS and JS, or by using a static site generator or specialist static web host to convert your CMS powered website into static files.
Progressive Web App technology enables websites to tap into functionality normally only seen in native apps. One of the core features of a PWA is the ability to cache files on the users device, meaning that content and assets do not need to be reloaded on repeat visits. This can significantly reduce the amount of data loaded by repeat visitors, especially on mobile devices for which data transfer is more energy intensive than wired connections. Like most things, it can also help improve load times and user experience with no real downsides.
A lot of energy is used by websites in the data centre and in the transmission of data to and from the data centre. Careful selection of web hosting services can therefore have a big impact on energy efficiency and web page speeds. The following are the main points to think about.
For websites that use a CMS such as WordPress or Drupal, pages are generated dynamically every time someone visits a web page. This is very inefficient as it requires server processing for every single page view, increasing energy consumption of the web server.
Caching technologies like Varnish pre-generate static versions of each page so that the server overhead can be significantly reduced for most visitors. This then reduces server energy consumption and makes a big difference to page load times.
It can be complicated to set up, but many hosts such as Kinsta and WP Engine now offer this option as an off-the-shelf feature, meaning that your website energy efficiency and web performance can be improved with minimal effort on your side.
Data centres are generally rated for energy efficiency using a metric called Power Usage Efficiency, or PUE. The PUE is determined by dividing the amount of energy entering the data centre by the amount of energy used to run the computers inside it. This then highlights the amount of energy being wasted on non-computational activities such as cooling. The typical PUE for a data centre is around 1.67, meaning that for every 1.67 watts going into the data centre, only 1 watt is being used to power the computing systems. High efficiency data centres such as those run by Google can have a PUE as high as 1.11.
A lot of the energy used by the internet is used to transmit data through the telecoms networks. It goes without saying that the further the information has to travel, the more energy it uses on its journey. Therefore, selecting a data centre close to your target audience will help reduce energy consumption. For example, you might find a cheap web hosting package from a US based hosting company, but if your target visitors are in the UK or Germany then energy will be wasted transmitting data across the Atlantic. What’s more, this additional distance can cause a delay in page load times too, so locating your website in a data centre close to your main audience will be good for user experience and for the planet.
It’s all very well locating your data centre close to your main audience group - that is, until your target audience is spread all over the world. In this case, content delivery networks (CDN’s) provide a great solution, serving assets such as image files from a network of data centres around the world. This means that in most cases, the largest files will be loaded from the CDN location in the user’s own region, reducing the distance that data is moving each time a page is loaded. Once again, this improves energy efficiency and improves page load times.
Akshat Choudhary from BlogVault suggested that blocking bots could reduce energy consumption. He said that “Bots often use up 50% of resources such as processing and bandwidth.”
Hazel Ho suggested reducing white space and embracing dark mode. Dark websites were one of the first techniques popularised for saving energy on websites many years ago and it faded away with the advent of LCD screens, which unlike CRT screens had a permanent backlight, using the same energy regardless of the colour actually visible on the screen. However, with the advent of OLED screens that light up each pixel individually, using darker colours is once again a viable technique to reduce energy on end user devices.
Katalin Juhasz from Kinsta suggests that we should also think about the technology that is running on the servers to ensure that we use the most efficient versions available. Specifically, she mentioned that newer versions of PHP are not only faster but also use fewer server resources, and therefore less energy. Kinsta has written about the benefits of newer PHP versions and the performance impact in this article. No doubt this will also apply to PHP alternatives, too.
While all of the tips above will help you reduce the energy consumption of a website, you can also reduce the carbon emissions further by ensuring that your web host uses a low carbon energy source. In an ideal world, the hosting company will have a solid renewable energy commitment. But even if they don’t, you may be able to find a host based in a region where the energy grid is cleaner.
The one-two steps to designing, building, developing and hosting a more sustainable, carbon-conscious website. But the real kicker is that all these things contribute to a better user experience, too: clean, clear, minimal-fuss websites with killer loading times. Consider it a nice little ‘thank you’ and a bit of good juju from Lady Nature herself.
So, if you’re keen to chat with the team about making your website more sustainable, go on and get in touch with the team at Brand+Butter. We’ll help you craft an impact-savvy website from scratch, refresh your current website, or anything in between. With a decent helping of strategic and creative thinking thrown in there too, of course.
Ps, signed the Sustainable Web Manifesto, yet? Go you good thing, go.
