Making your current website more sustainable

If you already have a website and want to know how you can make it greener, this is the article for you!
 
Below is a list of things specifically tailored for businesses with websites that are already online. Some things you can do via your content management system, and other things will require a web developer to implement.

Benchmark your current site

To ensure that your changes make a measurable difference to your site’s carbon emissions, you should benchmark your existing site. You can get basic page details from Website Carbon Calculator, or more detailed insights and tracking over time from EcoPing (£12 p/ month).

When you’ve updated your website you can check back and see the difference.

Hosting

We mentioned in our Designing & building a sustainable website article that having a hosting provider that runs on clean energy will go a long way to making your website sustainable. If you can switch your existing hosting, have a look at these green providers.

Compress your images

Before uploading images to your website or CMS, run them through a compression tool like Short Pixel, Tiny PNG, or ImageOptim. Additionally, talk to your web developer about dynamically sizing your image uploads so that they don’t appear as massive files for your users. There are plugins for most website platforms that will do this for you.

Choose the right image file type

For photographs, your best bet is usually JPEG. For simple images that use blocks of colour, use PNGs or GIFs. And for animations, use MP4s.

There are other, newer file types for images, like WEBP and AVIF that deliver even better compression, but you should check that they will work on your users’ devices before switching. 

Make sure your videos are externally hosted

Where you must include videos, use embedded players, like YouTube or Vimeo.

While platforms like YouTube and Vimeo may not be as lightweight as native players, using a large-scale video service like YouTube lets you take advantage of their network scale and compression algorithms. Both platforms are also working towards net-zero infrastructure.

Lazy-load images & video

When you load a web page, you only see the top to start with. As you scroll, you see the rest.

But when your computer loads a web page, it loads everything at once. If you have lots of images or video on the page that can take a long time, and cause users to drop off. This is especially problematic as many users won’t scroll through the whole page anyway.

Lazy loading solves this issue by instructing the browser to load only the elements within a user’s view. This lets them interact with the page more quickly as you only load the elements they want to see. This improvement in efficiency means their device uses less power, which is better for the planet.

Dynamic Offsetting

Even taking all the above steps, your website will likely still emit carbon. This is because you can’t control the energy your customers use to charge their devices, or how telecoms companies power their networks.

The good news is you can make up for this gap by offsetting your carbon footprint. Since your carbon footprint is tied to the number of customers visiting your site, you can use a technique called “dynamic offsetting” to purchase offsets at the same rate you emit carbon.

The easiest way to do this is by automatically planting trees when customers visit your site.

Tree-planting APIs like DigitalHumani, Tree Mates, Print ReLeaf (beta), Cloverly, TreeNation, and More Trees all offer a framework to build this service.

Use tree-planting as an online incentive

You can even extend this technology to incentivise your customers to take certain actions on your website. For example, you could automatically plant a tree every time a user purchases a product, signs up for a newsletter, or refers a friend.

You could even make tree planting an easter egg on your website. When users find hidden sections or pages of your site, you could reward them by planting trees. 

Include a “Sustainability” page to the footer of your website

When you’ve put in the work to make your website greener, you should talk about it!

Discussing your efforts lets your customers know it’s an issue that’s important to you. (And customers are more and more interested in hearing your green credentials.[1])

Adding a Sustainability page to your website also helps raise awareness and will drive more businesses to participate as it becomes commonplace.

Why not listen to our podcast?

In this episode, Danny talks to UX Designer Sam Selbie about finding simple ways to make your business website more sustainable.
We look at ways of reducing your website’s carbon footprint through some small changes, such as image sizes and hosting, as well as exploring how a sustainable website can also benefit your customers and their experience of your brand online!
Find out how you can start being more sustainable today.