With just a few small changes to design and functionality, you can enable your website to drastically reduce its energy demands. Here’s how.
General awareness of the web’s environmental impact, while shamefully quiet, is growing slowly. The average website produces 1.76g of CO₂ for every page view and the average energy demands that websites are making – often down to pretty unnecessary visual flourishes such as autoplay videos and wild animations – are also unfortunately growing.
When it comes to reducing your website’s carbon footprint, you essentially 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 optimised for search engines. File this under the no-brainer category.
Let’s start with switching to an eco-friendly hosting provider if you’re not on one already. 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.
Codes are also a big one. 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.
Furthermore, unless they’re central to your operations and add value to your business, consider removing unwanted tracking and analytic tools.
Making these changes will also benefit your 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?
Mobile first sites are also important here. That means uploading images at mobile size, rather than requiring them to be resized every time they load on a phone.
Images and videos are the files that tend to take up the most space. Beyond asking whether an 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 optimise them. Use file formats like WebP instead of JPEG, too. Furthermore, instead of relying on JPEGs and PNGs for illustrations and GIFs, use Scalable Vector Graphics (SVGs), which are much smaller in size. Also, 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.
When it comes to the general layout of your website, 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. In terms of your colour system, using dark, high-contrast colours 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.
