Filip Bech-Larsen, CTO, at open-source .NET CMS provider, Umbraco, explores 10 methods for enhancing the sustainability of websites.
1.Reduce data weight
Just as the aviation industry has been introducing lighter aircraft as a means of reducing fuel consumption and emissions, carbon-conscious web designers can also help organisations to reduce web page weight.
Neil Clark, Service Design Lead, at TPX Impact, observes: “Since the Paris agreement in September 2015, the average web page size has increased over 70% on desktop and over 140% on mobile. These increases are essentially nullifying efficiency improvements that have been made in data centres. Hardware is being made more efficient, but that’s being wasted by making software unnecessarily heavy. Every piece of software, code and website must minimise the data transfer it causes. We must start to consider data transfer as a constraint in all of our digital projects.”
Neil Clark is a member of the Umbraco community Sustainability Team, comprising technology and business leaders from six digital agencies. The Sustainability Team recommends using tools such as www.Ecograder.com and www.Websitecarbon.com which provide a rating and grams of CO2 emitted per web page, with a comparison to all web pages globally. This is the simplest way to check how energy-efficient a web page is, so that improvements can be made.
Thomas Morris, Tech Lead at TPX Impact, advises: “A useful first step on your sustainability journey is to set page weight budgets and stick to them. This helps to create a culture of optimisation with realistic targets. The HTTP Archive suggests a maximum of 1 Megabyte.”
2. Compress Images and fonts
Compressing website images is an immediate way to reduce web page data weight. Thomas Morris continues: “One of the biggest impacts you can have, with fairly minimal effort, is to use appropriately-sized images on your website, or consider whether images are needed at all. Using modern image compression formats, such as WebP, or AVIF helps reduce file sizes by up to 70% compared to JPEGs, without your users noticing any difference. Optimise images before upload, to reduce the extra compute effort of resizing images. Where appropriate, consider using SVG icons, logos or illustrations, since these often result in smaller image file sizes and also scale easily without compromising image quality.”
The experts also warn that stock images are often very large files and are best avoided.
Minimising text assets, including HTML documents, JavaScript files and CSS files is also a really good practice. Google’s Brotli is a lossless compression tool supported by 96% of browsers that makes this a lot easier and reduces text-based files by around two thirds.
Thomas Morris advises: “It’s common to see custom fonts being used. Consider using system fonts to reduce extra server requests. If you do have to use custom fonts then compression tools such as WOFF2, will help to minimise the data weight. WOFF2 is supported across all modern browsers.”
3. Choose colours wisely
Web designers can even reduce the energy consumed on users’ devices by changing the colours selected for a website. Research presented by Google at the Android Dev Summit in 2018 showed that, on newer OLED screens, green hues use 580mW at full brightness, red uses 600mW, and blue consumes 800mW. A completely white screen at full screen brightness uses six times the power of a black screen. Designing websites that default to dark mode is the more sustainable choice.
4. Default to Dark Mode
“Dark mode has been a first-class citizen on the web since 2013 and has been supported in all browsers since 2018. It’s very simple to set up and can be built on incrementally,” said Rick Butterfield, Development Team Lead at Nexer Digital.
As with a lot of the best practices outlined by the Sustainability Team, these changes benefit end users too. “A university study found that switching from light mode to dark mode at 100% screen brightness can save an average of 40% battery power, so users don’t have to charge devices as often,” said Rick.
5. Clean up unused content
It’s a very good practice to regularly review which web pages and content are being visited, on a monthly or quarterly basis. Redundant content is sitting on a hosting provider’s server somewhere and still using energy resources and funds.
6. Keep software updated
James Hobbs, Head of Engineering, at Great State, advises: “Simply by keeping libraries, frameworks and the rest, up-to-date, your organisation is likely to benefit from enhanced efficiency, which means doing more work with the same or fewer resources, which is better for the planet. When Umbraco moved to .NET Core it made a massive difference to the efficiency of the CMS. Staying on top of this can deliver sustainability and efficiency benefits and an improved security posture.”
7. Load web content efficiently
Implementing lazy loading makes data transfers of images, videos and iframes more efficient by limiting what is loaded within the viewport. However, web designers should avoid applying lazy loading to hero images which are always visible at the top of a page, as this will cause the website to load slowly and impact user experience.
8. Make your site carbon-aware
At the more advanced end of the scale, Rick Butterfield suggests using open-source APIs to build carbon-aware websites. “The Green Software Foundation has come out with a Carbon Aware software development kit that allows developers to create software that does more when the electricity is from renewable sources and less when the electricity is from fossil fuels. Open APIs allow us to create this type of service for clients. Functionality of the site can be altered based on current grid usage, where your servers are located, or where your users are. As an example, images can be disabled if the server load is too high, or they could be stripped back to display illustrations instead.”
Rick also recommends introducing user features such as energy-saving toggles on screen and points to the carbon-aware site that digital agency, Kruso, developed for Danish local council, Herning Kommune. With one click, all pictures and videos are removed and colours are muted to greyscale, reducing energy consumption and CO2 emissions by up to 70% across the site and making the site load much more quickly. “Lots of other companies are now starting to introduce this feature,” said Rick.
9. Use Design Patters to optimise performance
There are commercial benefits to be gained from introducing a regular performance optimisation regime advises James Hobbs: “Any unnecessary work is a big contributor to emissions, where systems are sat around idling, or repeating operations that are failing. Design patterns, like the Circuit Breaker pattern, can prevent wasting unnecessary cycles and energy. Baking in performance optimisation will ensure the digital experiences that you build are fast, which is good for users and keeping your application efficient, which is good for sustainability.”
“The more data you’re transferring across the wire between systems and the end-user, the more energy you and your users will end up using. Round trips take time and slow performance,” said James Hobbs. For this reason, he advises using technology such as Graph QL. “Ensuring that you’re only fetching what you need delivers performance and sustainability benefits.”
James Hobbs also advises that, if a platform or application has background jobs that can be run asynchronously, then plugging into services such as the Carbon Intensity API, allows organisations to ensure that they are run at the most carbon-efficient time and place: “Asynchronous operations can be a game-changer from a sustainability point of view.”
“There’s a theme here: less data being transferred is good for the planet, and results in faster loading sites which provide better experiences for users,” concludes James Hobbs.
10. Consider using JAMStack
The Sustainability Team also advocate using architectural approaches, such as JAMStack: “Statically generating websites ahead of time, and delivering them via a content delivery network, means that the round trip for users is significantly reduced and it also takes a load off the backend system,” said James Hobbs.
Andy Eva-Dale, Technical Director at digital agency, Tangent, took a JAMStack approach when building an agile, low-carbon website for UK Power Networks. Using Javascript, APIs and Markup, to pre-render webpages and distribute them on a CDN halved page load times, is more energy-efficient and reduced operational costs by 66%.
Click below to share this article