Green guide

A lot of energy is used both when webpages are read in a data centre and when data is transferred to and from the data centre. Choosing a data centre has a great impact on both energy efficiency and speed of the webpage. For this reason it is vital that you think through the points below when choosing a data centre.

Choose server caching that reduces energy consumption

Webpages using a CMS, such as WordPress or Drupal, are dynamically generated each time someone visits the page. This is very inefficient because it requires server processing for each view of the webpage, which increases the energy consumption of the web server.

Caching technologies such as Varnish generate static versions of each webpage in advance, so the server load can be significantly reduced for most users. This reduces the energy consumption of the server considerably and makes a big difference to the loading times of the webpages.

Such caching technologies can be complicated to set up, but several web storage operators, such as Kinsta and WP Engine, offer this as an additional service (off the shelf feature). This means that with relatively little effort you can increase both energy efficiency and website performance.

Choose web hosting service with a high PUE rating

Data centres are rated for energy efficiency with a PUE metric, which stands for Power Usage Efficiency. The PUE rating is calculated by dividing the amount of energy entering the data centre by the amount of energy used to run the computers inside the data centre. This way we see how much energy is "wasted" on activities that have nothing to do with the computer systems (non-computational activities), such as e.g. cooling.

A typical PUE for a data centre is around 1,67, which means that for every 1,67 watts entering the data centre, only 1 watt is used to power the computer systems. High-efficiency data centres, such as those used by Google, can have PUEs as low as 1,11.

Further reading:
Is PUE too long in the tooth? Efficiency (Google Data Center)

Choose a data centre close to the end users

Much of the energy consumption when using the internet occurs in connection with data which is transferred over the telecommunications network. The further the information has to travel, the more energy is used on the way.

An example: Let's say you find a cheap web hosting service package from a company in the USA, while most of your users are located in Norway or another country in Europe. Then a lot of energy is wasted moving information across the Atlantic Ocean. In addition, the large distance can contribute to extending the loading time of the webpages.

If you choose a data centre close to the end users, it will be positive for both the user experience and the planet.

Use CDN

Choosing data centres close to the end users is good practice, but what do you do when the users are spread all over the world?

Content delivery networks (CDNs), or nettverk for innholdslevering in a proper Norwegian, are a good solution. With CDN image files are stored on a network of data centres in several locations around the world. With this, in most cases, the largest data files will be loaded from the CDN location which is close to where the user is located. This reduces the distance the data has to travel each time a webpage is loaded – which, in turn, is positive for both energy efficiency and page load time.

Tools you can use to check whether websites run on green data centres

Website Carbon Calculator is a recognised and widely used calculator that you can use to check how a webpage affects the planet. The calculator checks the carbon footprint of the webpage you enter, and it shows whether the webpage runs on a green web hosting. Websitecarbon.com also contains information and articles on measures you can take to improve your webpage’s footprint. The Green Web Foundation has a very good overview of data centre providers that claim to use green energy.

How to find a green data centre?

• Start with what you already know. What approach to sustainability do the providers you make use of today have? Maybe you will be pleasantly surprised.
• If you are looking for a new provider, you can use The Green Web Foundations database. You will find there around 500 data centres that have committed to using green energy. But don't trust them blindly - check for yourself which providers meet your requirements for technical specifications, service levels and costs.
• Things you should check when considering new data centres:
  • Has the provider published its sustainability and environmental policy?
  • Does the provider use green energy and/or ensure carbon compensation in its facilities?
  • What PUE rating does the provider have?
  • Does the provider offer tools that can make your web applications more efficient?

Read more about how to go about choosing a green data centre.

As a developer you have a great influence on the energy efficiency of the webpages you create and maintain. Although some decisions made by designers and content designers are beyond your control, you can optimise the content and designs you receive.

Write clean code

Keep your code clean and simple, avoid duplication and write efficient queries. The code behind the scenes must be a well-oiled machine.

Remember that this applies not only to the code you write, but also to the code you borrow. If you use existing frameworks and libraries, make sure they too are tailored to deliver the functionality you need. Avoid unnecessary plugins that cause bloat - choose plugins that minimise server load and don't put unnecessary weight on the front end.

Use less JavaScript

JavaScript (JS) influences your webpage’s performance in two ways:

1. It adds file weight (size) to the website.
2. It increases the amount of processing the user's device requires.

Point 2 applies much more to JS than to other types of files. Functionality powered by JS is processed on the user's computing device and increases CPU usage, which in turn increases the energy consumption of the device. Do you hear the cooling fans on your laptop whirring? It is energy that is wasted.

Therefore, try to achieve front-end interactions, functionality and animations using more efficient technologies such as CSS. If it fails, you must at least use JS effectively.

The web inspector in Safari has a useful tool for assessing the energy impact of a webpage on the end user's device. The article How web content can affect power usage from Apple's WebKit developers provides some detailed advice.

Optimise images

Images are one of the biggest contributors to the amount of data transferred on most webpages. As a developer you can make various technical decisions that reduce the file size of the images, which automatically also reduces both the energy consumption and the page load time:

• Upload images in the correct scale instead of relying on CSS to resize them.
• Use tools such as TinyPNG or ShortPixel to compress images without visible loss of quality.
• Use the most efficient file format for each image, for example WebP instead of jpeg.
• Use vector graphics and CSS effects to create a visually engaging experience with much smaller files than jpeg and gif.
• Upload large media to environmentally friendly third-party providers.
• Set a size limit of image files that can be uploaded to the webpage so that no one has the opportunity to upload larger images than necessary.

Further reading:
How to optimise images for web and performance
Why and how to use lossy compression on your WordPress images

Build static webpages

As we have already mentioned, one of the solutions is to use a cache server. However, sometimes it is possible to display a static webpage that does not use any database. You do this by writing the webpage as a static file in HTML, CSS and JS, or by using a static page generator or a data centre that specialises in static webpages. They convert the webpage that uses CMS to a static file instead.

Examples of static website frameworks:
Next.js
Gatsby

Use Progressive Web App

Progressive Web App (PWA) technology enables websites to take advantage of functionality normally seen only in native apps.

One of the core features of a PWA is the ability to cache files on the user's device, so that content and ”assets” do not have to be reloaded every time the same user visits a webpage. In this way the amount of data the user transfers is reduced. This applies particularly to mobile devices which use more energy for data transmission than wired connections. In addition, it can help improve loading time and user experience.

Consider using lazy loading

"Lazy loading" means delaying the loading or initialisation of resources until they are actually needed. This improves performance and saves system resources.

An example: A webpage has an image at the bottom and the user has to scroll to see it. In many cases the user will click away from the page without scrolling all the way down to the image. The energy and resources are therefore wasted on loading the image without the user having seen it. One solution is therefore to insert a placeholder for the image and only load it if the user scrolls down to it.

Some advantages of lazy loading:

• It reduces the size of the webpage and thus loads the page faster.
• It saves bandwidth because it only delivers content to the user when needed.
• It saves system resources because only some images and JavaScript and some other code need to be processed and executed.

This is how to implement lazy loading:
There are several open source libraries you can use. Here are some examples:

• blazy.js – lightweight JavaScript library.
• LazyLoad - script that automatically loads images when they are visible in the window.
• How to use LazyLoad.Js
• Lazy Loading Scripts

Different methods of implementation:

• Lazy initialisation: Sets objects to null. The object data is only loaded when it is called by checking if it is null. If not, it loads the object.
• Virtual proxy: When you need to access an object, you can call a virtual object with the same interface as the real object. When the virtual object is called, you load the real object and then delegate to it.
• Ghost: Loads only a shell of the object (partial state), with only an identifier. The first time the object is called, the complete data can be loaded.
• Value holder: Creates a generic object that handles lazy loading behaviour. The object should be displayed instead of the object's data field.

Further reading:
Lazy loading on imperva.com

• Make the website mobile friendly. Around 60 percent of all Google searches are done on mobile.
• Make sure that the loading time of each webpage is as short as possible.

Consider using AMP

Accelerated Mobile Pages (AMP) ensures that content loads faster on mobile devices by removing unnecessary code and file weight. In this way the user gets a minimalistic version of the original webpage.

Google prioritises AMP content in search results on mobile phones and tablets, especially for news-related topics. This can therefore help to increase the visibility of your content.

But note that AMP is a powerful tool that must be used carefully. The disadvantages are that the content is displayed on a Google domain and that some of what is removed by AMP may be important to the user.

Support tools for SEO:
schema.org
moz.com
Google Search Console

Further reading:
Best practices: search engine optimisation and usability
Moz artikler og blogg

You can reduce tracking and advertising code which consume data without providing much value to the user. Find out how to analyse third-party performance.

A third-party external service is a service that communicates with webpages from outside the pages’ own server. Here are some examples many people use every day:

• Social media: Facebook, Instagram, Twitter etc.
• Third-party ad networks such as Google Adsense, Media.net, BuySellAds and Amazon Associates.
• Webpage analytics tools such as Google Analytics, Crazy Egg and Hotjar.
• A/B testing tools such as Optimizely, VWO and Unbounce.
• Wordpress comment systems such as Disqus, Jetpack and Facebook comments.
• Backup and security tools such as VaultPress, Sucuri and CodeGuard.
• Social sharing tools such as SumoMe and HelloBar.
• CDN networks such as KeyCDN, Amazon CloudFront, CDN77 and StackPath.
• JavaScript that runs externally.

This is how external services cause problems

If you, as a developer, use a lot of external services, you have to download all of them and wait for the information from them every time you load a new webpage. The more calls you have, the longer you have to wait. The load on your own server becomes higher and the probability of the page having more problems increases.

In some cases, loading of the webpage will wait until after the data transfer is complete between the webpage and the external service. If the service is called in the header and is then interrupted, the page will refuse to load.

There are actions to make it go faster, such as asynchronous code loading. But in most cases the volume of extra data will be the biggest problem you'll have to deal with when you troubleshoot third-party performance problems.

• Create reusable architecture.
• Use replaceable components.
• Use known standards.
• Set up auto scaling for applications.
• You should scale out stateless apps.
• Stateful apps are better to scale up.
• Choose a scalable serverless architecture if possible.
• Do a CO2 emissions calculation for your system. For example, use Microsoft's CO2 calculator. Create a point of reference and use it to measure the CO2 emission costs of each new feature. Take actions to reduce energy consumption.
• Check the cloud server locations. Cloud servers in Asia are known to emit more CO2 than those in the rest of the world.
• Investigate how much time does it take to replace manual work with AI where appropriate.
• Do not move data around the system more than necessary.