Aside From The general benefits of reliability, security, and maintainability, well-written code is inherently more efficient. If you can write in ten lines of code what you used to write in a hundred lines, you’ve not only reduced the size of the file, but likely reduced the amount of work the server has to do to process that file.
Be conscious of carbon emissions
If we can’t measure the actual carbon emissions, then we need to find what we can measure. The primary factors that could be used as indicators of carbon emissions are:
- Data transfer
- Carbon intensity of electricity
Green hosting
The servers that store the files that make up web pages require power 24 hours a day, so the single most impactful thing you can do to move toward a more sustainable website is use a hosting provider that runs on 100% renewable energy.
Location of the data centre and the audience
Having your data stored close to your visitors will reduce energy consumption. The Green Web Foundation has established a comprehensive database of web hosts that are committed to use green energy to help organisations and businesses to make better and easier choices.
If you have a pretty varied international audience, choosing one location can be difficult. In this case, you can use a CDN (content delivery network) which stores cached versions of content in different locations closer to users, so the distance is shorter.
Energy efficiency of the data centre
A data centre requires energy to power the servers, as well as cooling them down. The hotter a computer is, the less efficiently it works. Power usage efficiency (PUE) is a term that refers to the ability of a data centre to keep its energy costs down – having a PUE of 1 would indicate that you have a flawless data centre.
For example, Swiss hosting company Infomaniak has a PUE of less than 1.1, which is extremely efficient.
The carbon intensity of the electricity used to power the data centre
This seems obvious – choosing a data centre that is powered by low-carbon energy will reduce the carbon consumption of any digital product, and you can do so by choosing a Green Web Foundation list supplier.
Use JavaScript with care
The most common example is the use of JavaScript for animating elements in a web design. CSS can now achieve many animation effects with far more efficiency than JavaScript because it minimises the need for the CPU to “think”—and can generally be achieved with far smaller file sizes, minimising the energy used to transfer data. We should think carefully about whether the code we use is necessary. For example, does our website really need jQuery to deliver the functionality specified, and is it appropriate to use a front-end framework like React, Vue, or Angular for simple websites that don’t have any need for them?
Tracking scripts
One of the most common uses of JavaScript is for advertising and tracking scripts, which are at best a distraction and in many cases an invasion of privacy.
Tracking scripts can undo a lot of our great work in creating an efficient website. To solve this, we need to be less passive about simply installing all the scripts requested by the marketing department at the end of the design and development process, and engage in an open conversation about what exactly we are trying to learn from the data. There may be much smaller tracking scripts that can provide the data we actually need.
Lazy loading
Lazy loading helps to shorten the Critical Rendering Path length. Only data that is critical for the initial render will be loaded, saving bandwidth until a user requests these resources, via scrolling or other ways of navigating on the page. The overall loading energy footprint is now customised to the user’s needs!
Service workers
Service workers in combination with CacheStorage let you control whether to fetch assets from the server or from the browser cache. This technique can be used to make certain websites available offline.
HTTP cache headers
Setting meaningful cache headers will avoid re downloading from the server. Static files such as images, CSS files, and JavaScript files can have a more aggressive caching setting.
Code splitting – JavaScript
Certain websites rely on JavaScript for enhancements. Code splitting is a technique to ensure the user only downloads the JavaScript that is required to run that specific page/route. There are several options available, some require bundle processes such as Webpack but using the promise that the import statement returns can be a great first step.
Code splitting – CSS
Splitting the CSS files into bundles that only contain the currently needed styles will also contribute to smaller file sizes that are required per page. A popular approach that will make it easier to split is the use of the BEM naming convention. Creating CSS files per page/route is still a manual process and requires the developer to check whether or not specific components are being used or not on that page/route as there is no native concept of treeshaking for CSS. With JavaScript frameworks like React it becomes possible to easily include specific CSS inside the components code CSS in JS. Because bundlers do have the ability to treeshake JavaScript components, so this automatically means it’s not including unused JS and CSS.
Image sprites
A lot of games use the concept of sprite sheets. This is a collection of different images, all saved as one big image. This way a user only needs to download the spritesheet, which is made out of all the different images a game might need. The use of image sprites is therefore a great way to minimize HTTP requests. As with all solutions, correct usage is key. When creating image sprites, ensure that the images included are actually used. Otherwise the user will load data it will never see.