Energy Efficient Website Design

How can you reduce the carbon footprint of your website?

As an ethical designer that supports like-minded businesses and organisations, I aim to place energy efficiency at the core of everything I do. One aspect environmentally friendly business owners often overlook is website design. Is it even possible to build an Energy Efficient Website? The answer is, yes! In this article I will break down areas for consideration to be discussed with your website designer.

Energy Efficient Website Design - what to discuss with your website designer

When you think about energy efficiency, what immediately springs to mind? Electric cars, LED light bulbs, and home insulation? Why stop at household energy consumption? There’s plenty of scope for small businesses to reduce their environmental impact online too.

 

Let’s begin with making our websites greener. The fact is, consumers prefer to shop online than on the high street; when they want to procure the services of a business, they’re more likely to compare competitor websites than phone around. There’s no getting away from the fact that websites drive business. The internet uses a huge amount of energy in the form of electricity; if it were a country, the internet would be the sixth most polluting country in the world1, with annual emissions on a par with those of Germany. Faster internet speeds and ever-changing technology are driving up carbon consumption. Internet use will only increase, putting more strain on existing resources and piling further damage on our already fragile planet.

 

In a previous article, I broke down the steps I took to make my design business greener and more sustainable. The organisation ‘Green Small Business’ played a pivotal role in helping me review my services, end products and business supplies. By the end of the process, I felt that I could confidently minimise the environmental impact of my business. Whilst reviewing my business services I was taken down the rabbit hole of Energy Efficient Website Design, where I realised having an ethically minded hosting company was not enough*.

 

You can have a greener website without sacrificing speed and user experience. Read on to see what you should discuss with your chosen website designer.

Website Hosting

The good news is there are plenty of ethical hosts to choose from. Simplify your search by considering the following:

 

Company Ethos

Do the host’s values reflect your own? Do they have a sustainability policy?

 

Energy provider

Servers powered by fossil fuels can have a detrimental effect on the environment. Look for ethical hosts that power their servers with green/renewable energy sources.

 

Location (digital travel miles)

Data centres that aren’t situated thousands of miles away will use less energy, so by choosing a data centre that’s geographically close to your target audience you can reduce energy consumption and enjoy the added benefit of speedier page loading.

 

CDN (Content Delivery Network)

A CDN is a collection of optimised data servers that offer speed, security, and sustainability. Instead of your web pages being downloaded from your host server every time, a CDN will ‘copy’ your website pages and feed them directly to whichever server is closest to your site visitor, thus reducing the distance information has to travel.

Website Design

By making some astute visual adjustments, you can make your website more energy efficient.

Colour

Energy Efficient Colours

Darker colours take less energy to load than lighter, brighter hues; you can save energy by incorporating darker colours and backgrounds into your website.

 

Dark Mode / Light Mode

OLED (Organic Light-Emitting Diode) screen technology is gaining popularity as an effective way to reduce energy consumption. Unlike traditional LCD screens which feature a single power-zapping backlight, pixels only light up on OLED screens as and when required. Can you use Dark mode / Light Mode on your website?

Typography

System Fonts

We all have our favourite fonts, but some rack up more bytes than others. The exchange of data between your customer’s browser and your host server uses a lot of energy, even more so if your website is loaded with large file images, videos and customised fonts. By sticking to default system fonts which load much more quickly, like Arial, Verdant, and Times New Roman, you can minimise your site’s environmental impact and offer customers a more streamlined experience.

 

Hosted Fonts

Hosted/web fonts take more time to load because customers have to request the file from a third-party server. This set of requests and processes can trigger substantial page load delays, which risks sending your visitor to a competitor website. By sticking to one system font your website will not only load quicker, customers will enjoy enhanced readability. One study conducted by Woorkup.com showed system fonts outperforming Google fonts, increasing overall website speed by up to 6%.

 

Self-Hosted Fonts

If choosing between the very short list of available System Fonts is unappealing, and you don’t want to use Hosted Fonts, a third option is Self-Hosted fonts, which are hosted with your website. Whilst more energy intensive than System Fonts, if optimised correctly they can be an effective alternative to Hosted Fonts.

Images

The more images you add to your site, the less energy efficient your site will be. High resolution images might look great but the data transfer involved places a significant burden on page loading times. There’s plenty you can do to combat this:

 

  • Match the image to the space – no 4000px images for a 300px space;
  • Does the image serve a purpose? Be brutal and dispose of any and all unnecessary photos;
  • Optimise your images for web viewing. Compress large files to the smallest file size possible without sacrificing quality;
  • When possible, swap photos for vector graphics which have a very low carbon weight. A vector graphic is artwork created with lines, curves and points instead of pixels, meaning that no matter how you resize it, it will not reduce in quality and not increase in weight.
  • The more detailed your photo is, the larger the file; images with blurry backgrounds are much less energy intensive.

Video

Despite its growing popularity, video content can seriously impact your website energy efficiency. While videos capture attention at a faster rate than static images, their large file size can be problematic. You don’t have to ditch video completely; by taking the following steps to reduce energy consumption, you can continue to offer site visitors video content:

 

  • Stick to essential video content only;
  • Use low resolution videos when possible;
  • Don’t upload videos directly to your website. Use an optimised hosting platform (such as YouTube or Vimeo) and embed the video via a link;
  • The auto-play function on video content hoovers up mobile data and is energy intensive; removing it will have a positive environmental impact;
  • Avoid background music on your videos.

Animation

While it looks great and draws the eye, website animation is incredibly energy intensive. I recommend keeping it to a minimum; it will be kinder on mobile data and reduce the overall energy consumption of your site. There’s scope to use animation wisely; for example, to highlight a specific Call-To-Action on your web page.

User Experience

Give special thought to the journey you want your visitor to take through your website. By giving each page a distinctive purpose and reducing unnecessary content, you will lessen environmental impact and improve site performance. By minimising the number of clicks, pages and pathways a user has to go through to get their desired result, you’re more likely to win a new customer.

 

Optimising your web copy will not only simplify your sales funnel, it will lower energy consumption. How? Convoluted copy will only frustrate customers, waste time and increase energy consumption; clear, valuable text, on the other hand, will get them where they want to be in fewer clicks.

Constant Maintenance

Like any business system, your website will require a regular tidy up. Routinely reviewing content and user experience will ensure that your site remains fully optimised. Don’t forget to delete old content like pages, plugins, and images. Just because they’re not visible doesn’t mean they’re not consuming energy.

#designtip – make a date with your calendar and block off half a day to review the energy efficiency of your website. By committing a decent amount of time you could make some simple changes there and then. Going forward, create a quarterly recurring task on your calendar to delete old content and review processes.

As the saying goes, to be forewarned is to be forearmed. By preparing yourself for a conversation with your website designer, you can implement preventative measures at the start of the design process that will reduce energy consumption and make for a better overall user experience. Any web designer worth their salt will be only too happy to action the measures discussed in this article.

 

Don’t forget to follow us on Instagram and LinkedIn for more #designtips

  1. Tom Greenwood, Sustainable Website Design, (New York, A Book Apart, 2021), pg. 4

* As of May 2023 we are in the process of a large scale review of our website. We hope to have the new website up and running by the end of the year – complete with an analysis of what we did to improve efficiency – so watch this space!

 

Image credit: Icon8 Envato Elements

< Back to #designtips

Back to #designtips