Website performance and the hidden environmental impact of the internet

David Kindness
Monday 30 March 2020

It could be easy to assume, given its intangible nature, that the internet’s environmental impact would be trivial. Unfortunately, the ever-growing volumes of traffic and the data centres and servers required to handle that traffic have grown to account for an estimated 3.7% of global carbon emissions. This is equivalent to that of the worldwide aviation industry, and these figures are expected to double by 2025.

Every time someone performs an action that uses the internet, such as sending an email or viewing a web page, a small amount of carbon dioxide is emitted. With approximately 4.1 billion people (53.6% of the global population) now accessing the internet, this has a significant cumulative effect. The global distribution of this issue is not so straightforward as dividing total emissions by a population. Someone in one part of the world with a high-speed internet connection may have a far greater carbon footprint than others elsewhere. Data centres also vary significantly in their carbon emissions around the world: while the big providers of cloud services pushing towards renewable energy, many others still rely heavily on fossil fuels.

The increasing scale of the internet can also be highlighted by the growing size of a web page. This shows that in the last ten years the median web page size on a desktop is now 4 times larger than it was in November 2010, while web pages delivered to mobiles are 12 times larger. An increase in images and video in particular is a major contributing factor – all of which leads to more carbon emissions.

How we measure up

In our strategic plan, the University has committed to continue reducing our carbon footprint by various methods. The digital communications team are actively looking to improve the performance of the University’s website as part of this strategy.

The Website Carbon Calculator is a publicly available tool that uses key pieces of data to try and accurately measure the carbon emissions of a web page. Here are the results for three different styles of page on the University website:

Homepage

The main landing page of the University website has a large number of images.

  • Cleaner than 53% of other web pages tested
  • 86g of CO2 is produced every time someone visits the page
  • With average monthly page visits of 145,104, this equates to 1,494kg of CO2 equivalent produced per year.

Source: www.websitecarbon.com/website/st-andrews-ac-uk/

About St Andrews

A typical navigation-style landing page with a number of small thumbnail images.

  • Cleaner than 67% of other web pages tested
  • 54g of CO2 is produced every time someone visits the page
  • With average monthly page visits of 2,170, this equates to 14kg of CO2 equivalent produced per year.

Source: www.websitecarbon.com/website/st-andrews-ac-uk-about/

Faculties

A typical content page where the majority of content is text.

  • Cleaner than 67% of other web pages tested
  • 48g of CO2 is produced every time someone visits the page
  • With average monthly page visits of 1,265, this equates to 7.3kg of CO2 equivalent produced per year.

Source: www.websitecarbon.com/website/st-andrews-ac-uk-subjects-study-options-faculties/

The results above follow the logic that the fewer images a web page has, then the smaller the overall download for each visitor. Lightweight web pages not only reduce carbon emissions but also load quicker.

This performance factor is a key aspect in both search engine optimisation and in retaining visitors. Google uses web page loading speed as an important metric in how it ranks pages in its search results – as users of its search engine want results that load quickly. A study by Google recommends that the average page on mobile should display within three seconds to avoid losing significant visitors.

Update, 2 April 2020 – The University hosts it’s website within its own data-centres and purchases 100% green (REGO certified) electricity, so the above scores will be better, in reality, compared to the tool’s estimates.

What have we done so far

Improving the performance of the University website is a key aim for the digital communications team, and we have implemented a number of improvements already with the assistance of our colleagues in IT Services.

Compression

This essentially reduces the size of the files on the server before they are downloaded by a visitor’s device. This can have a significant impact on transmitted file sizes and improve page load times.

Browser caching

When a web page is downloaded, a wide range of different files is required such as images, fonts, CSS, HTML and JavaScript. These files rarely change, but may be downloaded every time a user revisits your website. By adjusting caching settings, a browser can retain the same copy for a longer period of time. Therefore, repeat visits to a website download far fewer resources and load much faster.

HTTP/2

This protocol governs how a server supplies a browser with the various resources it requests. It is a more efficient replacement over the previous HTTP 1.1 method that was being used. All modern browsers support this feature which should reduce overall download times for a web page.

Lazy loading

A more efficient way of loading a page’s resources is to only download files that are immediately required. For pages with lots of content, many visitors may never read to the bottom of the page, so content may be downloaded that is never viewed. We now use a popular lazy loading script on the majority of images to keep the initial page download as lightweight as possible.

Compressing images

Images are one of the worst offenders in contributing to large web page sizes – causing slow page loading times and greater carbon emissions. Often images can be reduced in file size without any loss in visible quality, using a tool such as ImageOptim or replaced by the vector SVG format. The digital communications team provides training to contributors of the University website that includes image optimization and compression and are actively monitoring the state of images on the website.

What can still be improved

We are constantly seeking to make our web pages more efficient and improving the experience for our visitors. Here are a few other areas that we are working on.

Global CDN

The principle of this solution is to store website resources in the cloud which is then shared in data centres around the world. When a web page is visited, the content delivery network (CDN) accesses the files from the closest data centre to where the requesting visitor is located. This technique can reduce loading times by up to 50% and provide additional reliability and security benefits.

Streamlining our code

Reducing file size has a big impact on load times, user experience and the environment. Every kb saved can quickly add up to a large cumulative amount. On top of file size reduction methods, we are actively looking at where our website code can be optimized. The digital pattern library is our central source for HTML patterns and the JavaScript and CSS that supports this. We continuously improve the digital pattern library based on new requirements and user feedback, and we will also place a greater emphasis on performance now.

Improve support of flexible image sizes and formats across different CMS

With the rise in retina displays over the past decade, higher resolution images are now widely used to retain image quality on these devices. Unfortunately, this comes at a cost with larger images increasing their file size. The Google PageSpeed Insights tool reports this as a common problem along with a number of other issues and suggestions.

Update July 2022 – the Google PageSpeed Insights tool processes one page at a time. Experte page speed check will crawl a website automatically and determine the page speed score for each subpage. The data yielded is identical to the data of Google PageSpeed Insights.

There are technical solutions to this that require multiple sizes of the same image to exist. The browser then downloads the image that best fits the required space. This comes with its own problems when it comes to content governance, often needing multiple versions of the image to be created and uploaded to the CMS. We are using this in a small number of website content patterns but are looking at whether we can use a global CDN that can automatically resize an image dynamically. This would greatly streamline the process of image management.

Another suggestion reported by the Google PageSpeed tool is to use new image formats, including their own WEBP next-gen format. These can significantly improve image compression and reduce file sizes even further, but not all browsers fully support them yet. This means that images need to be uploaded to a CMS in multiple formats, again increasing content governance problems. We are looking at methods of dynamically creating these formats in the future but for now are settling for implementing them manually where the greatest impact can be made.

TLDR

It is not just our duty of service to our website visitors to improve the performance of our website, but also a duty of care to our planet to reduce our website’s carbon footprint. We have already implemented a number of techniques that will help and are actively working on more to reduce the size of page downloads, speed up page load time and improve our SEO.

Related topics