7 best practices to create sustainable websites

Joanne Amos's Layout avatar
7 best practices to create sustainable websites

The internet. The cloud. It’s easy to think of them as virtual concepts. After all, our connection to them is largely unseen.

But the data we fire back and forth all day long is collected, processed, stored, and exchanged in vast data centers around the world. The supercomputers that power them run constantly and often overheat. In turn, they’re cooled by giant cooling systems powered by electricity. Few of them run on green energy.

Collectively, the web accounts for 2% of all greenhouse gas emissions. That’s equivalent to the global aviation industry and the same as Germany, the sixth highest polluting country in the world.

Each time somebody fires up a single web page, it emits 20 milligrams of CO2 per second. For more complex sites, this can be as much as 300 milligrams.

At the moment, there are approximately 3.5 billion web users worldwide. But with the global population steadily increasing and more and more people getting access to the internet, the amount of computers and data centers are set to increase dramatically.

I don’t need to spell out what this means for our planet.

So what can we do about it?

Creating energy-efficient websites

The average size of a web page today is 1711.4kb. With more data being transferred, our carbon footprint has naturally increased with it.

“As designers and developers, we all have the power to reduce the energy consumption and environmental impact of the web by designing more energy-efficient websites. ”

As designers, developers, and creators of sites on the web, we have an opportunity to reduce this impact. There are several key areas where we can make small yet significant changes, and all it really takes are a few tweaks to our workflows.

To create sustainable, energy-efficient websites, follow these best practices:

  1. Optimize images to reduce file size.
  2. Be strategic with videos.
  3. Use lazy load for images and media.
  4. Set up web caching.
  5. Delete what you don’t need.
  6. Improve site navigation to make it easy to find information.
  7. Use a green web host.

1. Optimize images to reduce file size

High-resolution images look fantastic on a website., but they’re also one of the biggest burdens on load time and energy consumption.

Fortunately, reducing images is one of the easiest ways to lighten the load. Get fussy about the images you include. Do they have a purpose or do they simply look nice? Only use images you really need, and reduce their resolution and image quality as much as possible. Then use a tool such as TinyPNG or WP Smush Pro before uploading them to the site.


2. Be strategic with videos

There’s only one thing worse than images when it comes to the performance and efficiency of a website. And that’s videos.

But use of video has boomed in recent years, as it’s so effective for engagement and capturing our decreasing attention span.

There are a few things you can do to minimize its negative impact. Again, limit the videos on your site to what’s absolutely necessary, and use as low resolution as you can get away with. Embed them directly into your site, and don’t set them to autoplay. Really think about if you need a video background, or not.


3. Use lazy load for images and media

Lazy loading means loading images and other media only as it’s required. Everything above the fold loads instantly when a user lands on the page, but the rest only appears as they scroll down. So if a user doesn’t scroll all the way to the bottom, not all the images need to load.

This saves on energy consumption and helps websites to load quicker, which is an added bonus for your SEO.


4. Set up web caching

Caching involves downloading shared page elements, such as JavaScript, CSS and images, and storing them closer to the user. When the user revisits the page, they can retrieve this data from the cache location rather than querying the web server again.

This improves the performance of a website and minimizes the transfer of data. Check out this guide for more information about caching and how to set it up.


5. Delete what you don’t need

Periodically carry out a spring clean of your website and delete anything you’re not using. This includes unwanted themes and plugins, old post revisions, unused media, categories and tags, spam comments, broken links, etc. The more streamlined your site, the less energy it gobbles up.

6. Improve site navigation to make it easy to find information

A large unwieldy site with an unclear navigation structure will confuse and annoy your users. But that’s not the only downside. It also increases the amount of time people spend clicking around the site trying to find the information they require.

Spend some time thinking about audience personas and their needs, and set a clear, logical navigation structure so visitors can zip straight to the bits they want.


7. Choose a green web host

With servers, data centers, and cooling systems all chewing up electricity, finding a company that employs renewable energy goes a long way to minimizing the environmental impact of your website.

Green web hosting is still finding its feet, and finding a host that combines solid performance, good customer support, and uses renewable energy can be a challenge. Many hosting companies don’t operate their own data centers, meaning they have less control over how those servers are run.

One thing you can look for, however, is a hosting provider that’s partnered with Google Cloud Platform (GCP). Google matches 100% of their energy consumed with renewable energy and maintains a commitment to carbon neutrality. By using a managed WordPress host paired with GCP, you’ll be that much closer to creating a green and sustainable website!

Looking for a host with this requirement? Click here to learn more about Flywheel’s managed WordPress hosting platform powered by GCP.

Reducing the environmental impacts of the web requires a fundamental shift in focus amongst the entire industry. However, by implementing these easy changes, we can all do our bit in making websites more eco-friendly. As an added bonus, these changes also improve the user experience and SEO of a site, making it a win-win-win.

Reducing the environmental impacts of the web requires a fundamental shift in focus amongst the entire industry. However, by implementing these easy changes, we can all do our bit in making websites more eco-friendly. As an added bonus, these changes also improve the user experience and SEO of a site, making it a win-win-win.

Have you any great tips for designing sustainable websites and reducing the environmental impact of the web? Join in the conversation below.


This article was originally published 4-9-2018. It was last updated 4-17-2019.

Comments ( 3 )

  1. Henning

    April 16, 2018

    Hello,

    Great article as I think most people are unaware of the environmental footprint of their websites.
    For me, one important point is missing here, that is the hosting. Server farms use an immense amount of energy, so e.g. using renewable energies to power these would have an enormous positive impact.

  2. Rahul Singhal

    April 16, 2018

    Hey Joanne,
    Really a well-curated article. I agree to every single point which you have listed in this article. Undoubtedly, videos is the future content. Gone will be those days when user will read text-based articles.
    Best Regards,
    Rahul Singhal

  3. Yash Patel

    October 4, 2018

    Great article as I think most people are unaware of the environmental footprint of their websites.
    Undoubtedly, videos is the future content. Gone will be those days when user will read text-based articles.

Join the discussion