Due to the widespread availability of the internet, faster and cheaper data, along with our increasing reliance on digital technology during the global Covid-19 pandemic, we're consuming more.

Consequently, it's estimated that the internet could account for 3.5% of global carbon emissions within the next 10 years, at a time when we need to rapidly reduce emissions in all industries. That is why we as web designers, developers, and website owners must be proactive and begin to transform our industry.

Until recently, it was almost impossible to estimate how much CO2 is emitted by a website. Fortunately, that's now possible through WebsiteCarbon.com, a free tool that estimates web CO2 emissions. It can calculate CO2 emissions based on the number of page views, annual CO2 emissions (based on the number of views), annual energy consumption, and whether your website is hosted in a green data centre.

According to WebsiteCarbon.com, websites with 10,000 monthly page views emit roughly 211 kilograms of carbon dioxide. That's about the same amount of pollution as a person flying from London to Rome!

When it comes to your website pages, page weight matters. Page weight refers to the size of files transferred over the internet when a website is loaded. Reducing the page weight will decrease the amount of data being transferred, helping to conserve energy, optimise load times and improve user experience. 

Here are some ways to design and build a more sustainable website:

Reduce the amount of images

Images are one of the major contributors to page weight. Try to avoid using unnecessary images as much as you can to slim down your page weight.

Ask yourself: 

• Is the image valuable to the user?
• Does it communicate useful information?
• Would the image have the same impact if it were smaller?

Compress your images

Compressing and optimising your images is another way to reduce the amount of data transferred. Image optimising involves removing some of the detail within the image, which in turn reduces file size. This reduction in detail is often indistinguishable or negligible. 

Compressing and optimising your images individually, or in bulk, is easy with many of the free and low-cost subscription-based programmes available online.

Deliver responsive images across devices

With mobile traffic slowly surpassing desktop traffic, it's more important than ever to optimise photos for different device sizes.

Serving desktop-sized images to mobile devices can consume up to twice the amount of data required. So, rather than using a one-size-fits-all approach to images, develop your website to serve images that are resized to match the user’s viewport dimensions.

Opt for SVGs

In the age of retina displays, image resolution is more crucial than ever. Icons and logos are often made as png images, saved at a larger file size to retain their high definition. However, these graphics can easily be replaced with SVG files.

A Scalable Vector Graphic (SVG) is a type of graphic that may be scaled up or down. It can be scaled indefinitely, which means that it can be any size you want without losing information; and because it's just code, it's a very small file size.

Reduce video streaming

Videos are by far the most data intensive. As with images, ask yourself if videos are really needed. 

When autoplay is enabled, the page weight increases significantly, resulting in much higher energy consumption. Reduce the amount of video streaming by removing auto-play on videos and keeping video content short. 

Fonts

Wherever possible, designers should use system typefaces to help minimise page weight. System fonts aren’t always attractive, but they can be utilised without the need to load font files as they are already installed on the user's device.

If you must incorporate on-brand web fonts, try to limit the amount of typefaces and weights you are using for each typeface.

SEO (Search Engine Optimisation)

Although SEO may appear to have nothing to do with website efficiency, its objectives are intrinsically tied to the reduction of energy use.

SEO-optimised websites help readers find the information they need quickly and easily. When done correctly, they spend less time scouring the web for information and visit fewer pages that don't meet their needs. Consequently, less energy is used, and the energy that is used is put to good use in providing useful information.

Copywriting 

We may think that we want people to spend a significant amount of time on a website, immersed in our content. However, it’s also important to avoid wasting their time sifting through irrelevant information. How often have you sat scrolling through a page to get to what you’re looking for, without reading everything contained there? 

Clear and efficient copywriting reduces the time and energy spent, and while that’s better for the environment, it’s also worlds better for the user. Of course, you may choose to hire a copywriter (ahem) to help you with creating impactful content, but you can also improve your own copy by following these steps:

• Plan what you want to say before you begin. What’s the main message here, and why will a user be visiting the page? If it’s primarily to see a dinner menu, for instance, make sure this is prominent at the top of the page and avoid delaying a reader by adding a lot of extra text that they probably won’t read.
• Keep your main points at the top of the page. Condense these into an introduction, in short form, and then expand on them in later sections. This way, if someone doesn’t choose to read the rest, they’ll still get the message.
• Read back over your draft, and ask someone else to read it too. Once you’ve got a first draft, check back over it and be brutal: cut everything that’s not necessary, remove any repeated points, and simplify any confusing or elaborate wording. The result will be far more successful.

Build static web pages

When a CMS is used, pages are dynamically generated by retrieving data from the server. As a result, the server has to think about what information to send back to the visitor each time. This causes the server to use more energy.

One solution is to use server caching technology, but in some cases it might be more feasible to have server static web pages with no database at all.

Optimise your files and scripts

You can significantly reduce the loading time of your web pages by optimising your website’s CSS files, SASS files, JavaScript scripts and images.

This includes, but is not limited to:

• Removing comments.
• Removing whitespace and newlines.
• Shortening variable names.
• Transforming SCSS to CSS.
• Converting RGB colour values to hex.
• Concatenating files.

Although you can undertake these optimisation techniques on your own, the process can quickly become laborious. Instead, use Task Runners such as Gulp, NPM Script and Grunt to help you. 

Server caching

When you visit a website, the device you're using has to download the content from the website's hosting server. In order to "serve" you the web page you requested, the server must perform a number of sophisticated and time-consuming calculations known as requests. 

With server-side caching, you can perform a type of caching known as ‘Object caching’, which saves frequently used requests so that they don't have to be worked out from scratch every time you visit. This speeds up the page's load time and helps to conserve energy.

Browser caching is another type of caching that temporarily saves certain webpage elements on your device, allowing the web page you're visiting to load even faster and save more energy. This means that your device won’t have to download elements like images from the website server every time you visit.

Data centres

The transmission of data across telecom networks consumes a large amount of energy used by the internet. The longer a piece of information has to travel, the more energy it requires. 

As a result, selecting a data centre close to your target audience will help you conserve energy. For example, you might find a cheap web hosting plan from an American provider, but if your target visitors are in the United Kingdom or Germany, the energy spent transmitting the data will be wasted. In addition, the extra distance can lead to a slowdown in page load times, so hosting your website in a data centre close to your primary audience is better for everyone.

Green hosts

Hosting companies that offer green services make an effort to conserve the environment by utilising sustainable practices. For every unit of energy they consume, they pay to generate the same amount of energy (or sometimes more) from renewables to help address environmental concerns.

When possible, we utilise services and data suppliers who attempt to minimise their carbon footprint.

In order to help people find the right green hosting company, The Green Web Foundation has compiled The Green Hosting Directory, a list of 362 green hosting companies in 27 countries.

Additional carbon offsetting

As well as making changes to reduce your website's emissions, you can also participate in carbon offsetting schemes to reduce your business' carbon footprint.The goal of carbon offsetting is to reduce emissions in the atmosphere, usually by restoring or creating habitats that absorb emissions, or by reducing the rate at which degraded landscapes emit greenhouse gases.

One UK carbon offsetting scheme that stood out to us was Forest Carbon. This project has been certified by The Woodland Carbon Code (WCC), a quality assurance standard for woodland creation projects in the UK backed by the Government. They also abide by Forestry Commission standards to ensure that the correct trees are planted in the right places.

At a time when greener initiatives are gaining serious traction, and many of us are resorting to digital alternatives to reduce our carbon impact, it can feel discouraging to know that this swap might not be as simple as we think. However, as we’ve seen here, with a little consideration, it’s possible to create a website with a low carbon footprint. 

If you’re investing time and energy (and, of course, money) into environmentally friendly initiatives, it pays to consider your online marketing as well as the offline. Thinking about this now, and getting your (green)house in order, will have real benefits for both your brand and your users going forward.