Blog

7 ways to create more sustainable websites

It’s up to website creators to reduce the internet’s carbon footprint. Here are seven ways to begin making your site more sustainable.

The climate crisis we’re living through shouldn’t be news to anyone.

As a population, we’re starting to realise the power of individual choices. The ways in which we live and work can have a huge impact on the planet, for better or worse. The same goes for our internet usage.

We’re used to thinking about technology as a cure to all of life’s ills. The internet in particular has the appearance of a totally ‘clean’ medium. After all, there aren’t any visible emissions from your laptop or smartphone. So there’s no harm being done from all that browsing… Right?

Unfortunately, internet usage is actually a major contributor to carbon emissions.

The problem with the internet

According to studies by the Eco-Friendly Web Alliance, approximately 3.7% of global carbon emissions are due to internet usage. This is only set to increase in the coming years, with an ever-expanding digital infrastructure and growing consumer appetite to use online services.

Right now, the average website generates more than two grams of carbon dioxide per page load.

Think about how many web pages you loaded today. Then add in any audio or video you streamed. The environmental impact of your device usage may suddenly feel a little more real.

These figures can come as a surprise for many. After all, climate change education has historically been targeted towards transportation, industry and household energy use. But with this insatiable demand for digital services, it’s clear something must be done.

The burden can’t be forced onto the consumer. Like any responsible industry, we must take accountability for our choices. It’s up to us, the makers, to start reducing the internet’s carbon footprint.

This isn’t a simple fix we can make overnight. Indeed, being more sustainable is something we are progressively working towards here at Pixel Fridge.

We’ve learned a lot on this journey so far. Here are seven methods we are implementing to reduce the environmental impact of our websites. These are things you can start doing right now, to make your own site more sustainable.

1. Optimise your images

Images (particularly high-resolution photographs) make up a large portion of the average web page’s size.

This is probably the number one sustainability concern with most websites we work on. Luckily, optimising your images is the simplest way to reduce your site’s weight. There are a few ways you can do this.

• Make sure your images are the right size. Web browsers generally scale images to fit the design. The size of images should never exceed the dimensions at which they are intended to be used. For example, we often see website owners using huge 4000×4000 digital camera photos, but only using them in a small gallery where they’re shown at a third of that size.
• Put all your images through a compression tool. Before adding images to your website, put them through a compression tool. We like to use Tiny PNG or Optimizilla. These tools use clever compression techniques to make your files smaller, without causing any discernible reduction in visual quality.
• Use CSS or SVG where possible. Using these technologies we can include some graphics and visual elements in the website code itself, rather than as separate downloaded files. This is much more efficient in terms of size, and also involves making fewer calls to the server. This technique works better for vector graphics and illustrations, so we often prioritise these in our design, instead of an over reliance on photography.

2. Don’t show what isn’t needed

There is always a temptation to show more content than needed. This is particularly true when it comes to home and landing pages. Every department wants their own message to be featured, along with a big impactful image to top it off.

We’ve already talked about how weighty media content is. The more we add, the bigger our page load times. The bigger our page load times, the more energy requirements there are to show the page.

Don’t overstuff your page with more than it needs. We see many homepages that are incredibly long, and chock-full of promotions that most people won’t ever see. Whilst it’s a myth that people don’t scroll, they are still much less likely to continue scrolling after they’ve gotten what they need.

Think carefully about excessively loading pages full of features and promotions, especially when it results in a lot of scrolling. This goes for home page carousels, too. Most people don’t interact with them, so by using one you’re probably loading a lot of really big images unnecessarily.

Make a habit of regularly evaluating the content of your pages. If its usefulness is in doubt, leave it out. If you’re uncertain about what’s being used on your pages and what isn’t, then try a heat mapping tool like HotJar or CrazyEgg. These will show you which parts of the page are being looked at, and which aren’t. You can use this insight to remove unnecessary page weight. Not only that, but you’ll improve the user experience by focusing on what matters.

3. ‘Lazy load’ content when appropriate

Lazy loading is the technique of delaying the load of objects until they’re actually needed. In keeping with our last point, it means that we don’t download assets for users who will likely never see them.

We find lazy loading most useful on ‘list’ type pages, where the user is presented with many cards to scroll through. Think pages with dozens of news stories, blogs or other resources. Many of these will have accompanying image thumbnails, so just downloading the lot straight away can be very wasteful.

The designer can be creative with how lazy loading is triggered. For example, page content could be loaded in gradually as the user scrolls. Alternatively, we could just show the first few objects in a list, and then have a ’’show more” button to load others underneath.

4. Make navigation easy

We already know the importance of intuitive website navigation. It’s something we talk about a lot. Clicking around many pages trying (and failing) to find what you’re looking for is frustrating, to say the least. But couple this with the added waste of resources that every unnecessary page load causes.

Poorly structured websites aren’t just a usability issue – they’re an environmental issue.

Website navigation should be planned carefully. Ensure that key information can be found in as few page loads as possible. By making our websites easy to navigate we don’t just improve the user experience. We reduce the carbon emissions caused during each session.

To plan effective navigation, your website’s information architecture (IA) must first be in order. Research tools like card sorting and tree testing are invaluable when it comes to this. They help you to understand where people look to find certain information. By understanding what works and what doesn’t, you can refine your navigation structure and prioritise what matters. We’ve put together a guide to streamline your website navigation on this blog.

5. Write clean, efficient code

The way you build a website from a technical point of view has a big impact on performance. Two websites may look identical to the user, but the way they are built under the hood could present huge differences in efficiency.

Most websites use a number of third party frameworks. These often contain a lot of code that the site doesn’t utilise, resulting in more processing power being used where it isn’t needed. Choosing lightweight frameworks, and stripping out the elements that your site doesn’t use will free up resources.

When it comes to writing custom code, efficiency is key. Quite often the same user experience can be achieved with a smaller script, compared to something very big and bloated. Ensuring code quality also brings other benefits such as increased load speeds and better search engine optimisation. So it’s a win-win.

6. Have a caching solution

Web caching means downloading and saving elements that are common to multiple pages on the website. This means that if a user views several pages or visits the site multiple times, they don’t need to re-download the objects shared between pages. This will include site-wide CSS, JavaScript files, and certain components such as headers and footers.

By using caching effectively, you’ll significantly reduce the number of requests made to the web server by people who view several pages. For sites that encourage repeat sessions with many page views, this can make a huge difference over time.

Progressive Web App technology can also be considered in some cases. This approach allows mobile users to experience a simplified version of the site, providing a more app-like experience. The stripped-back approach to Progressive Web Apps can radically reduce load-times and demands on the server, which is only a good thing when it comes to sustainability.

7. Choose greener hosting

Web hosting is a very energy intensive operation. When it comes to controlling emissions, some suppliers are doing a lot more than others. In that past, we considered reliability, security and price to be the main factors in choosing our web hosting partners. We’ve now added ’sustainability’ to that list.

When choosing a web hosting service, look at what they’re doing to offset energy usage and run their data centres more efficiently. Most reputable providers will have a sustainability policy, which you can use to compare and contrast the environmental factors of each option.

At the end of the day, there is always a balance to be had between environmentalism and project requirements.

Although some of the smaller providers tout the best sustainability figures, they may not provide the same feature sets or uptime guarantees of larger competitors. We’ve recently conducted an audit of our hosting providers here at Pixel Fridge, and have opted for Google Cloud Platform.

We selected Google because their data centres offer the best balance of performance and sustainability. They are the first big hosting company to have neutralised their legacy emissions, and also invests heavily in the development of renewables. Google also has a commitment to be the first major carbon-free company, rather than simply offsetting. That’s an aim we can get behind.

Together, we can build a more sustainable internet

The journey towards a greener internet will be a gradual one. But by taking conscious steps towards better design and development practices, we can help reduce the impact our work has on the planet.

By taking these seven steps in your projects, you’ll be well on your way.