fbpx

Book a Call

Sustainable Web Design - A view of Curbar edge, Derbyshire © Stephen Kidd, Unsplash.com

Sustainable Web Design – 7 Tips for a Greener Website

It’s part of the dilemma that affects anyone who worries about such things – and sustainable web design is just a part of it. To engage in economic activity at all seems inevitably to affect the environment negatively – and yet people still need jobs, kids need clothes and we keep getting hungry.

Just keeping the world turning puts the planet at risk

At first glance, working with the Internet looks pretty shiny and clean – there are few clouds of spent diesel hanging around us web monkeys. But the facts are stark:

  • the Internet currently produces approximately 3.7% of global carbon emissions – and that number will only rise. Grubby global shipping is only responsible for about 2%.
  • By 2025, the Internet will be a bigger carbon producer than any country except China, the USA or India.
  • A typical data centre can use between 11 and 19 million litres of water per day.
  • It’s estimated that a simple email uses energy equivalent to 4g of CO2e (total greenhouse gas emissions) and that an email with a large attachment uses around 50g.

It’s up to us, as creators in the digital realm, to clean up our act. And fast.

Sustainable Web Design – The Good News

The good news is that more ecological web design also will make the internet better too. Here are some tips that your web development company should be using to keep their corner of the internet as green as it can be.

  1. Use a Green Hosting Platform
  2. Run a Speedy Site
  3. Reduce Asset Sizes
  4. Reduce Your Asset Count
  5. Leverage Caches
  6. Don’t Host Your Own Video (or Images)
  7. Design Your Site Well

If they don’t, we hope you’ll choose someone else. It really doesn’t have to be us – but maybe somebody like us.

1. Use a Green Hosting Platform

It’s the simplest step to any sustainable web design solution. If a web server offsets or consumes more carbon than it emits – it’s an absolute winner. If you could only discount Scope 3 Emissions, a green hosting solution would mean your website would get better for the environment as it became more popular. The rest of this article would be redundant.

Nonetheless, Green Hosting is a great start. All sites on our shared hosting platforms are now Green Hosted … including this one. Find out more here.

This website is hosted Green - checked by thegreenwebfoundation.org

2. Run a Speedy Site

Logically enough, if a website can be compiled and delivered in half the time, more or less half the energy will be required to deliver it. A fundamental part of web development expertise is knowing what tools can do the most work using the least code. This isn’t just an environmental benefit, it’s good web development. No software ‘feels’ good to use when it’s bloated with unnecessary routines and functionality – Windows Vista®, anyone?

Whether you’re working with a custom build or an established framework, a good development team should know what they need to put together an efficient, fast website.

A quicker website has huge benefits – if you want your business to succeed, you need a fast website. Little Fire Digital have scored some real successes here with all of our recent work reaching the 90% mark or higher in both Google Lighthouse® and GTMetrix®.

3. Reduce Asset Sizes

Regardless of how green your hosting is, the Internet is a vast space. The chances of the route between your web server and your user’s browser being carbon neutral are vanishingly small. As a company, these emissions arising as an indirect result of your commercial activities are classed as Scope 3 Emissions. Scope 3 Emissions are extremely hard to calculate but could easily constitute the largest part of your company’s CO2 output.

For a user to view your web page, the site code, the images, movies, stylesheets and scripts must all be delivered to your user’s device at least once. It makes sense to deliver this payload as efficiently as possible.

Every element which is not the core website code itself is known as an asset. Some assets are text-based. Consider this script which will display an alert on the clicking a button:

  // Get the button element by its ID
  var helloButton = document.getElementById('helloButton');

  // Add a click event listener to the button
  helloButton.addEventListener('click', function() {
    // Display an alert with the message 'Hello' when the button is clicked
    alert('Hello');
  });
Code language: JavaScript (javascript)

This can be minified (that is, all the spaces and carriage returns taken out to save space) like this:

var helloButton=document.getElementById("helloButton");helloButton.addEventListener("click",function(){alert("Hello")});
Code language: JavaScript (javascript)

Do that for every script, stylesheet and html document on the site and the savings can be huge.

Modern image formats like WebP and SVG can drastically reduce the disk space required for images with little or no loss of quality (in some cases improve it).

A lossless WebP image of a tree - takes 283KB on disk
A lossless WebP image of a tree – takes 283KB on disk
A lossless WebP image of a tree - takes 283KB on disk
A heavily compressed JPEG image of a tree – takes 181KB on disk
A lossless WebP image of a tree - takes 283KB on disk
A heavily compressed WebP image of a tree – takes just 19KB on disk

If an image, a sound clip or movie is only half the size, it takes less energy to transfer it across the Internet. These assets can be transferred faster, which means the entire website arrives quicker. Less energy used and happier users.

4. Reduce Your Asset Count

Every item which appears as part of your overall website design is ‘requested’ by your user’s device. This results in a round trip from device to web server back again. Modern websites are complex and can use a lot of assets. Just as it is more efficient to move a house with a single truck rather than fifteen small vans, concatenating text-based assets into a single file can result in a vastly reduced request count.

Recently we reduced the number of requests for scripts on a client’s site from 96 to 2. Again, the speed increase was remarkable.

Also, a user may not view all of your webpage or interact with every element. Withholding the loading of images until they appear on-screen (lazy loading), importing scripts as they are needed or updating site content using data calls without reloading the page (‘ajax’) can make delivery of a complete website experience far more efficient.

5. Leverage Caches

Caching is the process of storing frequently accessed data in a temporary location for faster retrieval. Caching reduces the physical length or energy cost of each round trip between device and web server. This improves performance and decreases energy use.

There are several levels of cacheing. A good development team should be able to make efficient use of them all.

Browser Caching

See that logo at the top of the page? It’s on every page and it’s always the same. Rather than call it for every page, your browser will keep a copy on your device so that request never needs to be made again.

CDN Caching

Servers have a physical location – a Content Delivery Network (CDN) can distribute assets from your web server to caches across the world. A CDN server can then deliver your files locally from a server optimised for the job (in much the same way your supermarket saves you a round trip to Florida for each litre of orange juice – quicker and far fewer air-miles).

Server Caching

Server caches work by storing the response to common queries on the server itself. The server can return these responses far faster than if it were to generate them again. Object-level caching is a server-level performance optimisation technique where frequently accessed or computationally expensive objects are temporarily stored to reduce the need for repetitive computations or database queries.

6. Don’t Host Your Own Video (or Images)

Video is great. Users love video even more than they love images. Sadly, video is huge. Huge is highly energy inefficient. Also, general web-servers are not very good at serving video.

You should move all your video to a dedicated hosting service (such as Vimeo). As well as offering all the benefits of a CDN, a good hosted video platform will serve the video at a size and frame optimised for your device and network. There is no point in serving 5K 25fps (frames per second) video to a user watching on an iPhone 3 via 3G. Vimeo and its ilk will generate and return a copy of your movie specifically optimised for that atavistic camper in the Highlands.

Images change infrequently, if at all possible serve them over a CDN.

7. Design Your Site Well

Finally, everyone hates a confusing website. No one likes a site where they need to go round in circles or look hard for the content they need. Clear navigation, effective on-site search, a well-realised user experience (UX) and logical flow will both decrease the number of pages your users need to view and make them happier customers. Everyone’s a winner.

Is That It?

For now, yes. Heaven knows it isn’t enough. But these steps alone can make a colossal impact on the energy required to keep your business online. These steps, while technical, are faster and generally much cheaper to implement than physical changes to buildings and delivery networks.

Innovation drives innovation. Adopting these practices will force the introduction of more efficiencies, more improvements. If everyone adopted sustainable web design, the impact on global carbon emissions would be measurable.

References