According to online resource Website Carbon Calculator, the average website produces 1.76g of CO₂ for every page view. Though awareness of the web's environmental impact is growing (albeit very slowly), so too are the average energy demands that websites are making – often down to pretty unnecessary visual flourishes such as autoplay videos and wild animations. 

The carbon footprint of your website has many components, but basically what you're aiming to create is a lean, mean, lightweight machine that's quick to load and easy to navigate. You want to reduce the data transfer and energy usage where you can. Bringing this intentionality into your web design won't just affect your energy usage – it'll also make your site perform better, make it more user-friendly, more accessible and better optimized for search engines. File this under the no-brainer category. 

Behind the scenes

• First things first, you should be looking for an eco-friendly hosting provider. The ideal is one that uses renewable energy rather than simply offsetting. The Green Web Foundation has an excellent database of providers that use green energy or are carbon neutral.

• Keep the code behind your website as clean and simple as possible. There are tools for ‘minifying’ HTML, CSS and JavaScript that basically get rid of unnecessary code and can increase website speed. 

• Consider removing tracking and analytic tools like Google Analytics – unless they're central to your operations and add value to your business.    

User experience

• The main aim is to strip your website down to its core functionality – ie, getting rid of unnecessary plug-ins – and to bring in a simple site navigation that doesn't require multiple clicks to get anywhere. Be critical: what really needs to be on your site?

• With the rise in website visits coming from mobiles, consider a mobile-first web design strategy. That means uploading images at mobile size, rather than requiring them to be resized every time they load on a phone. 

Visuals

• Imagery can be extremely energy consuming, particularly those full-screen affairs. Beyond asking whether the image is really required (and getting rid of carousels), images should be resized and compressed properly before uploading. A tool like ShortPixel can compress and optimize them. Use file formats like WebP instead of JPEG, too. 

• In terms of your color system, using dark, high-contrast colors is advisable – it means they're more easily defined on user devices and are less battery draining. The website Colorable enables you to test your scheme and browse combinations – you're aiming for an AAA contrast-ratio score. 

• Instead of relying on JPEGs and PNGs for illustrations and GIFs, use Scalable Vector Graphics (SVGs), which are much smaller in size. 

• If you have to use videos, link out to third parties like YouTube rather than hosting. And if you must host videos, don't let them autoplay.

• Using the default fonts that are available to you wherever you're building your site is the greenest option. Additionally, try to use as few font variations as possible.

• Remember to embrace negative space. 

This article was first published in Courier issue 44, December 2021/January 2022. To purchase the issue or become a subscriber, head to our webshop.