What makes a website ecological?

Not so long ago, this would have been quite an unusual question to ask. However, in recent years, general awareness of the global climate crisis and our effect on it has increased dramatically, and along with it, the realisation that websites and web-based services also have their own carbon footprint, just as individuals and businesses do.

Author: George Hieron
13.9.2024
  • Blog

The foundation of a green website

The fundamental thing to get right in terms of ensuring a website is ecologically conscious, is the hosting; do the website’s servers run on renewable or sustainable energy? At Redandblue, we use Seravo as our hosting provider, a carbon negative company whose servers run on hydropower and wind power.

But how can you tell if your hosting is sustainably powered or not? You can verify this, for example, with tools such as Website Carbon Calculator, which not only gives an estimation of how much CO2 emissions are generated from visiting the given URL, but also an assessment of whether the site appears to be running on sustainable energy or ‘bog standard’ (i.e. fossil fuels) energy.

If your hosting is not already green, switching to a provider offering sustainably driven servers is one of the best ways to make a difference to the CO2 emissions your site produces; after all, this is the root of your website’s carbon footprint. Otherwise, efforts to reduce its emissions by changing the content alone will be at odds with the emissions generated by the hosting.

What about the content?

Of course, the content of your website also greatly affects the amount of carbon dioxide emissions it produces. For example, a simple blog that is primarily text-based will incur much lower CO2 emissions to host than a site which is image and/or video heavy in its content.

Images and, in particular, videos are often the biggest contributors to high emissions generated by a website. Thankfully, there are some development techniques that can be implemented to lessen their impact. When a website is coded thoughtfully, developers can ensure that, for example, images are loaded at an appropriate size for the device it is being viewed on, i.e. loading smaller versions of images when the site is viewed on mobile phones. For videos, autoplay is discouraged to prevent the user’s bandwidth from needing to begin downloading the video content immediately. If autoplay is a must, then videos can be placed lower down in the page’s content area, and JavaScript can be used to ensure that downloading the video does not begin until the video is about to enter the visible area of the page.

Tips for using visual media in your content

Content entry personnel also have a responsibility to use visual media responsibly; in 2024, websites need to stand out, and building successful web content is a constant balancing act between efficiency and wow-factor. Purely text-based sites may struggle to engage the target audience, but excessive use of videos and images can bog down a site and cause an unpleasant user experience due to sluggish performance, which itself has other impacts.

Therefore, it is strongly encouraged to ensure that content entry teams use image and video content thoughtfully and sparingly, to balance its positive impact on the content with the negative impact on carbon emissions. It is also important to ensure that the original image and video files uploaded to the site are a reasonable balance of file size and image quality, and to use the right image and video formats: for example, WebP is a widely-supported, modern image format that is typically much smaller in file size than equivalent JPG files. Images can also be compressed to varying degrees in order to ‘squeeze out’ unnecessary detail and keep file sizes down. Both of these solutions can be implemented by your content team, if possible, or handled automatically by WordPress plugins.

An alternative solution is to replace traditional images with scalable vector graphic (SVG) illustrations where possible, since SVG files are essentially just code instructions for the browser on how to ‘draw’ the image they contain, and not an actual image itself. The website Thanks in Advance is a great example of how to use SVGs for presentational effect. Another technique for reducing emissions is the extended use of dark colours, particularly for backgrounds, as darker colours require less energy to emit on screens than lighter colours, particularly if the screen the content is viewed on uses OLED technology. This is something that Thanks in Advance also shows off.

Speed is king

As noted above, large images can not only impact the loading speeds of your site, but also its carbon footprint; after all, larger images and longer videos means more data, and more data requires more energy to host and more bandwidth to download to a user’s device.

This is a simple way to roughly assess how ecological your website might be, without copying and pasting every URL into a tool such as Website Carbon Calculator; if your site is running on sustainable energy and feels fast, especially when loading visual media, odds are its carbon footprint may not be so bad. Loading time differences can be assessed more easily if you have access to, for example, an older mobile device that has less powerful hardware than modern devices, or maybe even one with a 3G data connection; this will exaggerate loading times and make comparisons between different pages or other websites clearer.

Put simply, speed and environmental friendliness frequently go hand-in-hand. Fast websites are often ecological, and ecological websites are often fast.

Additionally, the pace of development in the web industry is rapid, as it is in all technology sectors – if your website is several years old, odds are that there are development techniques and practices available these days that can further help to improve page speeds, such as modern caching solutions.

Improve the ecological credentials of your WordPress website

Redandblue are not only a carbon neutral company ourselves, we also have great expertise in producing environmentally friendly websites; in 2024, we were finalists in the Grand One competition’s Most Ecological Web Service category with two of our works. Still, it is important to highlight that making your website as sustainable as possible is a journey, not a destination. Much like embarking on a project to improve a website’s performance or accessibility, the task is almost never ‘finished’, but any amount of progress is important.

We offer both website ecology audits and website performance audits, as well as solution services for actually implementing improvements to your site. Or perhaps you would like a brand new, ecological website to replace your ageing one? In either case, don’t hesitate to get in touch with us.

Example references of environmentally friendly websites:

Our finalists in Grand One’s Most Ecological Web Service category this year were STEK and Ilmastoinfo (both available only in Finnish). When testing a selection of pages with the Website Carbon Calculator tool referred to above, both sites perform excellently, with an average 0.12g of CO2 emissions per page visit for Ilmastoinfo and 0.131g for STEK. These averages equate to the tool’s grade A level, meaning that both are more environmentally friendly than approximately 87% of all websites globally.

Both of these sites were developed last year in 2023. Newer projects launched this year in 2024 highlight our commitment to continuous improvement in this area of expertise, such as the new website we made for The Union of Journalists in Finland. When checking the CO2 emissions of a similar selection of pages, the average per page is only 0.085g of CO2, with 60% of pages tested achieving a grade of A+, or greener than 92% of websites globally.

Read more about these projects by following the links below:

Petri Siltala

Director, Sales & Finance

Phone: +358 41 506 2462