We have been led to believe that digital and the internet is a green alternative e.g., e-books saves paper, streaming and downloading films and music reduces packaging and digital meetings cuts out the need to travel. Whilst all these alternatives can have a lower environmental impact, the fact is they still create carbon emissions that comes from the generation of electricity that is required to power data centres, telecom networks and devices like mobiles and laptops that deliver these services and products. For example, in 2021, almost two-thirds (61.8%) of global electricity came from fossil fuels (source: Our World in Data based on BP Statistical Review of World Energy & Ember). This figure is slowly improving as more countries transition to renewable energy sources, but it will take time, we need to do everything we can now to reduce our electricity consumption.
With broadband speeds increasing every year and higher screen resolutions, content producers have added richer media to their websites such as larger images and video. Sites are also using increasingly sophisticated JavaScript frameworks like Angular and React. The average global page size of a desktop website has increased by 229.7% during the last ten years. On mobile there has been an increase of 579.5% for the same period increasing the average page size of 288.1 kb in 2012 to 1957.6 kb in 2022 (source: httparchive.org). This is a worrying trend, more data requires more electricity.
Fortunately, there is a lot we can do to make websites more energy efficient, if we truly want digital to be the green alternative. We can make electricity savings across the entire web development process, from UX design and implementation to web hosting.
Easy to find, easy to understand
The longer it takes a user to find what they are looking for and understand what they see, the more energy is used. Working with UX (User Experience) methodologies like user interviews, testing, and data analysis, we can understand the user better. We will have a better understanding of what makes sense for them, how they perceive certain features and what they need. We can design a better experience, which should result in less time and therefore less energy wasted by scrolling through websites or confused users staring at pages scratching their heads. This also means better business and satisfied shopping customers rather than furious cart abandonment.
A vital ingredient for a smooth web experience is clear and efficient copy. Copy makes up a large percentage of a websites content, e.g., text on buttons, text field labels, error messages, product descriptions and so much more. Clear copy can help a user to navigate a site and find the right function. Efficient copy tells the user what they need to know at the right moment. We need to think critically: Is all this information necessary? What purpose does it serve? Does it make sense? UX Writing is becoming an increasingly important role for companies and consultancy services. If done well it can help create a clear and efficient user experience which in turn will save time and energy.
A considered SEO strategy can also help reduce electricity consumption. Quality content and the relevance of content to search terms means higher search engine rankings, making your site easier to find. This means users will spend less time getting lost in dead end search results.
Is this content a dead weight?
Images and video are probably the biggest contributors to heavy web pages. The amount and the size of these content types has a direct effect on the amount of electricity required to transfer and display them. When designing and creating content for the site, we need to give careful consideration about the images we choose. If the images add no value we shouldn’t use them, can the same impact be achieved if the images were smaller? You should also consider if a vector graphic or CSS styling could achieve the same effect as the image.
Due to faster broadband speeds, video is becoming increasingly common on websites. Instead of an image at the top of the website, a full screen video is used, that plays automatically. This is very data and processing intensive which demands more electricity than an image. If you must use a video, removing auto-play and keeping it short will reduce its effect. This resourceful approach to content design and creation is likely to improve the user experience as well. A lot of images and looping videos are usually more of a distraction than a help.
What you should always do with the image content you choose is optimise it. File formats like WebP, JPEG and PNG are image compression formats. These formats minimise the file size in bytes without degrading image quality below an acceptable threshold. It’s important to choose the right format for the image type. WebP and JPEG are better for photos, creating the smallest file sizes with a negligible loss of quality. PNG is good for logos or images with blocks of flat colour or pure gradients like graphics and illustrations. SVG is a vector based image format that can be resized without any loss of quality. It is the best choice for basic graphic shapes like logos, icons and simple illustrations because of its small file size and scalability.
You can also use online tools like TinyPNG and SVGOMG to compress the file size even more. As well as image compression you can reduce the impact of image file sizes, by making sure that the correct image scale is displayed on the site. For example, you should use different image sizes for different devices, there is no point displaying an image that has been optimised for a large desktop display on a mobile device. Reducing file size will increase your sites performance and save on electricity consumption. It will also improve your search engine ranking since page load times is one of the most important factors that ranking is based on.
How many fonts do we need?
A company’s typeface is one of the key building blocks in its brand identity. At the dawn of the world wide web it was only possible to use system fonts (pre-installed computer fonts like Arial and Times New Roman) or images of fonts. Thanks to the development of web fonts, it is possible to use any font you desire, which means that brands can use their beloved typeface and web design becomes a lot more inspiring. Web font files are stored on a server and are downloaded by the browser while rendering the web page. Each font file has a file size and that means every style you use, e.g., Futura, Baskerville… and every weight, e.g., Regular, Medium… has an impact on electricity consumption.
There are several strategies we can use to reduce this. System fonts are the most eco-friendly choice since they already exist on the user’s computer and therefore don’t need to be downloaded. Unfortunately, there are only about eight fonts to choose from. A good compromise is to use your brand typeface for headings and use a system font for body copy. If you must use a web font, then try to keep to a minimum of styles and weights. Only use what you really need. It is also possible to optimise font files. Make sure you are using the latest font file format, which is currently WOFF2, you can use an online font conversion tool like Font Squirrel to do the job. You can also optimise fonts by subsetting them to only include the characters you need. For example, a font like FF DIN supports 114 different languages, if you don’t need those languages, you can probably reduce the file size significantly. You can use FontDrop to get an overview of all the characters in the font and Font Subsetter to do the subsetting.
One more option is to use a variable font, which has multiple styles in a single file, thus reducing the number of font files you need.
Streamlined development
Tidy and efficient code translates into energy efficient websites. Clean code is easy to understand and easy for other developers to change, which saves time and energy. It also means that the page weight is less.
Be mindful of how you use JavaScript. JS impacts page weight and increases the amount of processing power on a user’s device. Think about what you put into a project, be selective about which third-party scripts you use and try to avoid large frameworks.
Progressive Web App technology (PWA) is great for creating a faster, seamless user experience and as a consequence are more energy efficient. PWAs work like native apps, they can cache files on the user’s device. That means that assets and content do not need to be reloaded every time a user visits the site. Resulting in faster load times and the site will continue to work even without an internet connection. This significantly reduces the amount of data loaded by repeat visitors.
Green web hosting
Data centres require a lot of energy to power the thousands of computers and the air conditioning systems to keep them cool. If they use green energy sources and how efficiently they use that energy has an impact on how eco-friendly your website is. Where your sites data is stored and processed is a choice and you can choose a web hosting provider that has a green profile. Some have a visible sustainability profile, others may be efficient, but not so vocal about it. Thankfully The Green Web Foundation’s hosting directory lists 416 green hosting companies across 30 countries.
Another factor to consider when choosing a web hosting provider is the location of the data centre. Data transmission accounts for a lot of the energy consumed by the internet. The further the telecom networks have to transmit that data; the more energy is used. So, it will be more energy efficient to choose a web hosting provider that is close to the majority of your users.
If your customers are more evenly spread across the globe, then a CDN (Content Delivery Network) is an effective solution. A CDN is a geographically distributed group of servers. This means that content will be loaded from the data centre closest to the user, increasing performance and saving electricity.
Every byte saved makes a difference
There is a lot we can do to make websites more electricity efficient and eco-friendly. This may seem overwhelming, but you don’t have to do everything at once. Take gradual steps, plan, see where you can have the biggest impact and prioritise. There are several services that can help you get an overview of your websites carbon emissions. Website Carbon Calculator is a free online tool, it will give you a quick estimation of a page’s CO2 emissions and whether the site’s data centre uses sustainable energy. For a more detailed overview there is Ecoping which has a free and a subscription version. As well as showing your sites carbon emissions, it will also give you information about how many server locations your site’s data is hosted on, how much data is transferred every time someone visits the site, page load times and a breakdown of the website’s resources like images, fonts, script and how large they are.
You might think that saving a few bytes on an optimised SVG won’t make much of an impact, but the fact is that this content is accessed by hundreds, perhaps thousands of users. Each byte saved reduces electricity consumption, the effect of this is multiplied every time a user visits your site.
This blog article is the last in our Climate Conscious Commerce series, where we have also looked at Green UX design practices and Delivery, packaging & sustainability data.
Please get in touch if you would like to know more or have a specific case. Sustainability is a complex issue; we must discuss and develop our approach together with multiple perspectives. Let’s ensure that digital transformation leads to a sustainable tomorrow.