How better performing websites can help save the planet

Unless you’ve been living under a rock lately, you’ll know that planet Earth is facing the biggest climate crisis any of us or our ancestors have ever known. And, whilst we don’t want to get into the politics of this, we do want to assure you that Wildheart is committed to doing what we can to reduce our carbon footprint and help save the planet.

As an eco-conscious soul who feels very inspired by the actions of climate activists such as Greta Thunberg and Extinction Rebellion, I was delighted to discover that one of the talks at 2019’s WordCamp Europe in Berlin was called “How better performing websites can help save the planet” by Jack Lenox of Automattic, a company owned by Matt Mullenweg, co-founder of WordPress.

I’d like to share with you the key points of his talk and how we can put his suggestions into action.

The carbon footprint of the internet

To be honest, I don’t think this is something many people think about. We all need the internet, right? In fact, we’ve become so heavily reliant on it in so many ways, can you imagine what would happen if it suddenly got switched off and we went back to pre-internet life?!

But with millions of gigabytes of data being transferred every second, and all those servers powering all those websites, it must take an inconceivable amount of energy to power the internet. Here are some shocking statistics from Jack’s talk:

• If the internet was a country, it would have the third largest carbon footprint in the world after the US and China.
• The internet produces 1 billion tons of CO2 each year, which is about the same as all the world’s air travel combined.
• By 2030, 30% of the world’s energy use will be from the internet.
• YouTube alone has a similar carbon footprint as the city of Bristol or Glasgow in the UK. When listening to music on YouTube, if the video playback was switched off this would reduce its carbon footprint by 1-5%.

He also said that the size of the average webpage is growing:

• In 2011 it was 900KB.
• In 2017 it was 3.4MB.
• In 2019 it’s projected to be over 4MB.

How much CO2 is emitted when a webpage loads?

I’m pretty sure this is something people rarely think of. I’d certainly never even considered it. Loading a webpage is simply clicking a link or typing a URL into a search bar, right? What does that have to do with carbon emissions?

Well, Jack took us through a very interesting calculation he’d done. He was looking at the amount of energy it takes to power a single webpage. I won’t take you through the minutiae of his calculation — not least because it was way too complicated to take notes on! But the upshot of it was this:

• A 10MB webpage uses about 14.5g of CO2.
• This is the same carbon footprint as printing about 3 sheets of paper — just for loading one webpage once!

So, you can see why the internet has such a huge carbon footprint!

What are UK companies doing to reduce their carbon footprint?

In his talk, Jack explained that things are starting to change, as more and more companies are understanding the effect their business has on the planet. These are just a few of the UK companies he found online who are making steps in the right direction:

• Loco2.com — this booking service for train travel across Europe features a carbon calculator, so you can see how much carbon you’re saving by travelling by train.
• Great Western Railway — this train company also shows the carbon emissions saved for each journey.
• Untold Coffee — this online coffee roaster and supplier offers to offset the carbon emissions on delivery.
• Amazon — apparently they’re about to get a lot better and will start disclosing their carbon footprint from late 2019 or early 2020.

What can we do to reduce the carbon footprint of our own website?

So, with all this in mind, what do we need to consider when creating or editing our own website? And what tools are available to help us?

Web code

Jack explained that the more complicated the code is on our website, the more energy it takes to render it on the front-end. CSS (Cascading Style Sheets) is more energy efficient than jQuery or JavaScript, so if you have control over which language you use, this could influence your decision.

He suggested doing some “tree shaking” on your site. This means testing your code to see if it’s actually still being used. One of the tools that can help with this is PurgeCSS.

Web features

Similarly, using lots of fancy features on your website will increase your carbon footprint. Large images, videos, image sliders or carousels, and embedded social media feeds all take longer to load, and therefore use more energy. So, when creating a new website, consider if the web features you’re making are really needed to solve the problem.

Jack shared a very interesting piece of research — that people actually find it more stressful waiting for a webpage to load than standing on the edge of a cliff! Generally speaking, people prefer a simpler interface and the easier and quicker it is to do something, the better.

These days though, we do expect to see aesthetically-pleasing features on websites, like large striking images and videos, and coloured buttons that tell us what to do next. But Jack explained the impact of this with a few simple facts:

• A plain text link uses almost zero bytes of data.
• A Twitter follow button uses around 50KB of data.
• In 1969 NASA put a man on the moon using 50KB of data; today all this will get you is a Twitter follow button!

In summary

Can we simplify the user interface, e.g. do we really need:

• Image carousels/sliders;
• Background videos;
• Embedded social media feeds?

Can we reduce the code that’s used to build our site, e.g.:

• Use lean HTML;
• Simplify the CSS;
• Use less script?

Can we make our use of images more effective, e.g.:

• Resize our images first BEFORE uploading them;
• Compress our images as much as possible to reduce their file size;
• Use the “lazy load” technique, i.e. display images and videos “below the fold” so that they load later, rather than immediately as the page is loaded?

Can we improve the user experience, so that webpages aren’t being loaded unnecessarily, e.g.:

• Use effective SEO (search engine optimisation);
• Adopt an accessibility-first mentality;
• Follow best practices?

Is it possible to create a carbon neutral website?

At the end of his talk, Jack shared how he’d managed to create a clean, simple website using very little data. It’s not carbon neutral, but its carbon footprint is vastly reduced from that of the average website found online today. This is how he put it into practice:

• Stripped down webpage;
• No images;
• Only a few requests;
• 6KB total size: 500KB per page is a good starting point.

Of course, this makes for a very dull, feature-less site with just black text on a white background. In reality, this probably wouldn’t get your site very well noticed! But the point he was making is that we can find a balance between the features we actually need and the impact this is having on the environment.

Some useful providers he suggested to help us include:

• The Green Web Foundation — directory for green and renewable energy powered web hosting.
• Ecograder — assesses how green your website is.
• Cloverly — makes carbon offsets on demand.
• Exhale — a WordPress theme whose demo site is only 423KB.

How we’re reducing our carbon footprint at Wildheart

We found a lot of what Jack shared in his talk very fascinating, and we aim to reduce our carbon footprint where we can. But, of course, it’s all about balance. We’re a marketing agency, which means our top priority is helping our clients’ websites get found by more of the right people. And building websites with no images, very little design, and unclear calls-to-action (e.g. buttons) is not going to help us do that!

However, some of the points Jack highlights are things that we already put into action and advise our clients on anyway. These include:

• We always insist on images being resized appropriately first, before being uploaded to the media library. Google will actually penalise you if your images are too big and take too long to load, so your site will appear lower in relevant search rankings.
• We generally advise against using image carousels and sliders, as they slow down your site, and visitors often don’t see beyond the first image anyway.
• We usually prefer buttons over text links, as they’re clearer and easier to see, and it’s important to prioritise user experience. However, we do use text links where we can, if this makes sense to the user journey.
• We use CSS to build and customise our websites, and try to keep the code as clean and simple as possible.

Having run our own site through the Ecograder tool, we scored 55 out of 100. Whilst we’re doing well on page speed, mobile optimisation and avoiding Flash, we do need to reduce our HTTP requests, shared resources and findability, and we’re not currently using green hosting. So, there’s always room for improvement!

Looking for a better performing website?

If you need a new website and want to make sure it’s optimised to be found by the right people for your business, as well as having a low carbon footprint, check out our New Website Package. We’ll give you an easy-to-use, professional website that acts as your best sales tool and brings you customers while you sleep.

New Website Package