Every time a visitor accesses your website, kilobytes are sent back and forth. The heavier your website (the number of kilobytes to be downloaded), the more electricity is consumed and the more CO2 emissions occur. To make your website more sustainable, you need to make it lighter. 

A first step is to determine what a visitor downloads when they visit your website. 

You can do this by inspecting a page on your website in a browser (such as Chrome). 

• In Chrome, open the inspection tool by right-clicking and choosing "Inspect" (you can also use the shortcut CTRL+SHIFT+i)
• In the inspector, navigate to the "Network" tab. Press CTRL+F5 to reload the page. 
• You will now see which files are downloaded every time a unique visitor views your page. 
• By sorting the files by "Size," you can see the largest files (and thus culprits).

Action 1: Replace Videos with Images

If your website displays videos that autoplay, chances are they will be at the top of the list. The best approach is to replace the video with a static image or at least allow the visitor to choose whether to play the video, rather than autoplaying it. 

By the way, this is a requirement if you want your website to comply with accessibility standards. These standards state that the user must have the option to pause videos and animations longer than five seconds.

Additionally, for every video you embed, consider whether it could be better presented as an (interactive) infographic. Some videos attempt to explain complex issues, but not everyone always has the time to watch a video or the ability to listen to it, such as when they are in an office setting. An infographic provides a solution, allowing the visitor to consume the information at their own pace.

There are also techniques available nowadays to animate SVGs. This way, you can add playfulness by animating something while significantly reducing the number of kilobytes required. 

Optimize Images

Images can be large files. However, if you optimize images smartly, you can save a lot of kilobytes by:

• Offering images in a modern file format such as WebP. This format is supported by all major browsers and provides the same image quality as JPEG or PNG but with better compression.
• Using vector files such as SVG when an image consists mainly of abstract shapes. The advantage is that these images always scale sharply when enlarged, whereas JPEG or PNG images become blurry.
• Setting the compression of JPEG and PNG images to 85% instead of 100%. The difference in quality is hardly noticeable to the human eye, but it significantly reduces the number of kilobytes the user needs to download.
• Ensuring that images are displayed at the correct size. In a website I worked on, all 12 images on the homepage were loaded at 1200 pixels wide. However, CSS was used to display the images at different sizes to the visitor. For example, a profile photo next to a quote was displayed at 75 pixels wide. By making a small technical adjustment to load and display the images at the correct size, the homepage size was drastically reduced.

Green Hosting

If you have a website, it inevitably consumes energy. A significant portion of this energy is used to keep the server running on which your website is hosted. Therefore, it is essential to always choose a hosting provider that uses green energy. Also, ensure that this claim is verified by an independent organization. Any hosting provider can claim to use green energy, but that may not always be the (whole) truth. Here you can find a list of all hosting providers verified by the Green Web Foundation.

Additionally, it is best to host the website in the country where most of your website visitors come from. The less distance the kilobytes have to travel, the less electricity is consumed.

Clean Up Content

Make sure that visitors cannot access pages that have no value. For example an outdated news article or a product page for a product that is no longer available. Every time a visitor accidentally lands on these pages, the entire page is downloaded.

In your analytics tool (such as Google Analytics, Piwik, or Matomo), you can identify pages that do not convert well or at all. Be careful not to focus solely on vanity metrics such as page views. A page that receives many visits but has minimal conversions is essentially worthless.

For example, I once wrote a blog about DuckDuckGo. In Google search results, this blog appeared above a reference to DuckDuckGo, resulting in hundreds of visitors who were actually looking for the privacy-friendly search engine. This led to a massive waste of data, as visitors would click away within milliseconds.

ABC: Always Be Caching

To limit the data usage of your website, ensure that your caching is properly configured. With caching, you can avoid downloading the entire page for each visit but only retrieve the sections that differ. 

Popular Content Management Systems like Drupal and WordPress have built-in caching systems, so make sure they are enabled. However, it's worth exploring services like Cloudflare or Fastly. 

In addition to caching the website, these services also ensure that your website is accessible from multiple locations around the world. When someone in the United States visits your website, it will be served by a server in the United States. This makes it faster for your American visitors and also more sustainable, as the data doesn't need to travel as far, reducing electricity consumption. Both services also offer options to further optimize images.

The basic package of Cloudflare can be tried for free.

Get Started

Hopefully, you can immediately start implementing these improvements to make your website less polluting. Do you have any good tips of your own? Share them below by leaving a comment.