{"id":107272,"date":"2024-04-08T12:07:28","date_gmt":"2024-04-08T11:07:28","guid":{"rendered":"https:\/\/www.intelligentcio.com\/eu\/?p=107272"},"modified":"2024-04-08T12:51:55","modified_gmt":"2024-04-08T11:51:55","slug":"ten-ways-to-make-websites-more-sustainable","status":"publish","type":"post","link":"https:\/\/www.intelligentcio.com\/eu\/2024\/04\/08\/ten-ways-to-make-websites-more-sustainable\/","title":{"rendered":"Ten ways to make websites more sustainable"},"content":{"rendered":"\n

Filip Bech-Larsen, CTO, at open-source .NET CMS provider, Umbraco, explores 10 methods for enhancing the sustainability of websites.<\/em><\/strong><\/p>\n\n\n

\n
\"\"
Filip Bech-Larsen, CTO, at open-source .NET CMS provider, Umbraco<\/strong><\/figcaption><\/figure><\/div>\n\n\n

1.Reduce data weight<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Neil Clark, Service Design Lead, at TPX Impact, observes: \u201cSince 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\u2019s 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.\u201d<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Thomas Morris, Tech Lead at TPX Impact, advises: \u201cA 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.\u201d<\/p>\n\n\n\n

2. Compress Images and fonts<\/strong><\/p>\n\n\n\n

Compressing website images is an immediate way to reduce web page data weight. Thomas Morris continues: \u201cOne 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.\u201d<\/p>\n\n\n\n

The experts also warn that stock images are often very large files and are best avoided.<\/p>\n\n\n\n

Minimising text assets, including HTML documents, JavaScript files and CSS files is also a really good practice. Google\u2019s 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.<\/p>\n\n\n\n

Thomas Morris advises: \u201cIt\u2019s 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.\u201d<\/p>\n\n\n\n

3. Choose colours wisely<\/strong><\/p>\n\n\n\n

Web designers can even reduce the energy consumed on users\u2019 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.<\/p>\n\n\n\n

4. Default to Dark Mode<\/strong><\/p>\n\n\n\n

\u201cDark mode has been a first-class citizen on the web since 2013 and has been supported in all browsers since 2018. It\u2019s very simple to set up and can be built on incrementally,\u201d said Rick Butterfield, Development Team Lead at Nexer Digital.<\/p>\n\n\n\n

As with a lot of the best practices outlined by the Sustainability Team, these changes benefit end users too. \u201cA 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\u2019t have to charge devices as often,\u201d said Rick.<\/p>\n\n\n\n

5. Clean up unused content<\/strong><\/p>\n\n\n\n

It\u2019s 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\u2019s server somewhere and still using energy resources and funds.<\/p>\n\n\n\n

6. Keep software updated<\/strong><\/p>\n\n\n\n

James Hobbs, Head of Engineering, at Great State, advises: \u201cSimply 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.\u201d<\/p>\n\n\n\n

7. Load web content efficiently<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

8. Make your site carbon-aware<\/strong><\/p>\n\n\n\n

At the more advanced end of the scale, Rick Butterfield suggests using open-source APIs to build carbon-aware websites. \u201cThe 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.\u201d<\/p>\n\n\n\n

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. \u201cLots of other companies are now starting to introduce this feature,\u201d said Rick.<\/p>\n\n\n\n

9. Use Design Patters to optimise performance<\/strong><\/p>\n\n\n\n

There are commercial benefits to be gained from introducing a regular performance optimisation regime advises James Hobbs: \u201cAny 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.\u201d<\/p>\n\n\n\n

\u201cThe more data you\u2019re 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,\u201d said James Hobbs. For this reason, he advises using technology such as Graph QL. \u201cEnsuring that you\u2019re only fetching what you need delivers performance and sustainability benefits.\u201d<\/p>\n\n\n\n

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: \u201cAsynchronous operations can be a game-changer from a sustainability point of view.\u201d<\/p>\n\n\n\n

\u201cThere\u2019s a theme here: less data being transferred is good for the planet, and results in faster loading sites which provide better experiences for users,\u201d concludes James Hobbs.<\/p>\n\n\n\n

10. Consider using JAMStack<\/strong><\/p>\n\n\n\n

The Sustainability Team also advocate using architectural approaches, such as JAMStack: \u201cStatically 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,\u201d said James Hobbs.<\/p>\n\n\n\n

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%.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":18,"featured_media":107333,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[573,7359,93],"tags":[20140,20139,226,20141,20138],"class_list":["post-107272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-features","category-industry-expert","category-top-stories","tag-net-cms","tag-filip-bech-larsen","tag-sustainability","tag-sustainable-websites","tag-umbraco"],"acf":[],"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/posts\/107272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/comments?post=107272"}],"version-history":[{"count":2,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/posts\/107272\/revisions"}],"predecessor-version":[{"id":107356,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/posts\/107272\/revisions\/107356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/media\/107333"}],"wp:attachment":[{"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/media?parent=107272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/categories?post=107272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intelligentcio.com\/eu\/wp-json\/wp\/v2\/tags?post=107272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}