A sustainable approach to the web

A Sustainable Approach to the web Neil Clark and Thomas Morris

Contents Context 01 Tech tips 02 What we can do 03

Hello Umbraco Spark!

Neil Clark Planet Officer and Service Design Lead linkedin.com/in/nrclark/

Thomas Morris Technical Lead Umbraco Certified Master @mozzydev

01 Context

Organisational design & change Technology and engineering Digital experience Enterprise applications Data & artificial intelligence Managed services

People, Planet, Community We’re committed to building sustainable futures for our People, our Planet and our Communities. People Planet Community Decreasing pay gaps, representation gaps and gaps in inclusivity. Employee wellbeing and satisfaction. Measuring, reducing and removing our carbon footprint. Removing barriers for our employees. Leading industry change. We are equipping our communities with future-proof skills, kickstarting 5,000 digital careers.

Our planet strategy Employees Organisation Clients & Partners Empower our employees Leave no trace Drive change in our industry Collective action Behavioural change Ways of working Measure, reduce and remove our footprint Planet projects

The climate crisis doesn’t happen in a vacuum Climate change isn’t solely an environmental issue. It’s rooted in a web of ethical, political, and systemic issues. A lot of these issues overlap with tech, design, and how we do business. 🎧 Listen to Introduction to climate justice ▶ Watch A chat about climate justice This slide has been stolen with love from Sandra Pallier 🙏

Emissions Sources & Natural Sinks

It was COP27 🥳

It was COP27 🤬

Why does that matter to organisations? Ed Hawkins | showyourstripes.info | Ocean temp 1850-2021

The digital industry is responsible for around 4% of global emissions; above that of the aviation industry…

… And since the Paris Agreement, average web page size has increased almost 60% on desktop and over 125% on mobile

More high level trends…

Why isn’t the planet a stakeholder in digital projects? Lack of awareness Lack of breadth and depth of research No universally accepted standards Sustainability isn’t a non functional requirement as per security, performance or accessibility Greenwashing from major stakeholders Multiple different calculation methods

But this isn’t just a developer or engineering problem Engineering Company leadership Research Product Ownership UI/UX Content Infrastructure QA

What needs to be done? 1 2 3 4 Energy efficiency Hardware efficiency Carbon awareness Inform and educate Actions taken to make software consume less electricity when performing its functions Actions taken to make software need fewer physical resources when performing its functions Actions taken to understand how much carbon is on the electricity grid and react accordingly, to use renewable energy Raises awareness of why digital things cause emissions and how that is being addressed

02 Technical tips

Guidelines We have standards and checklists for other aspects of the web. You can test and get a score. 1 Accessibility 2 Security 3 Performance What do we have for sustainability?

Guidelines There is no accepted checklist for sustainability, but there is progress.

W3C working group Green Software Foundation BIMA sustainability council We will show you some of the approaches you can take and would be a good starting point for consideration.

How do we measure all this?

EcoPing Set up a regular ping for your website’s carbon emissions

Where do my website’s resources come from? How green are they? Understand your monthly impact Diagnose issues Track changes over time

EcoPing

Technical tips We will look at this from 3 main areas of interest. Combined this can have a substantial impact on your footprint. 1 Infrastructure 2 Front end 3 Content

02.1 Infrastructure

What does it mean to be green?

Hosting options Data centres require a lot of energy to run.

How efficient are they? Do they use renewable energy? How is electrical waste handled? Green Web Foundation publishes a directory of green hosts: https://www.thegreenwebfoundation.org/directory/

Umbraco For Umbraco, we typically use Azure for hosting. Umbraco Cloud is also running on Azure for all it’s services. 1 Azure web apps 2 SQL elastic pools But what does this mean from a sustainability perspective? 3 Azure storage

Azure Azure, as a part of Microsoft, has been 100 percent carbon neutral since 2012. This means they are removing as much carbon each year as they emit, either by carbon removal (carbon Azure weboffsetting) apps or reducing SQLcarbon elastic pools emissions. 1 2 By 2025, Azure will shift to 100 percent supply of renewable energy. 3 Azure web apps

Is it really green? Whilst you may be hosted with a green provider, websites typically utilise resources that come from all across the world. 1 2 …andAzure not allweb countries energy. appsproduce green SQL elastic pools 3 Iceland - 100% renewable and low-carbon United Kingdom - mostly renewable, but also reliant on imports Azure web apps

Carbon aware development

Utilisation of electricity Consider when the grid is filled with renewable energy sources. If the grid is in high use, it may be using a high amount of fossil fuels.Azure web apps SQL elastic pools 1 2 Let’s revisit our electricity map… 3 Azure web apps

Optimise our code In development terms…

Send form submissions at a later time Batch up newsletter campaigns Apply patches outside of peak times Deploy when the grid is low intensity

Let’s deliver content close to our users

CDNs

CDNs By utilising a Content Delivery Network, we can deliver content efficiently.

Less travel time Less bandwidth Less effort from origin servers Greater performance More secure

How can we be efficient with data?

Server configuration 1 2 3 4 Turn on HTTP/2 Minify assets Compression Caching Allow for more requests, by loading them concurrently. Easy enable on most servers. Minify static files to keep the file sizes low Reduce file size even further using compression with Gzip/Brotli Cache responses effectively so that the server doesn’t have to work too hard

Serverless A serverless function could provide the experience we need

On demand resources Resources are allocated when needed Execute as individual functions Low impact

JAMstack Can we utilise a different approach?

JavaScript, APIs and Markup Serve static content Composable architecture Shift for developers Lots of hosting options

MACH alliance MACH is an industry tech standard describing modern technology.

Microservices APIs first Cloud native Headless

What about bad bots?

Bot army Not all bots are bad, but unfortunately 25% of traffic is from bad bots.

Submit junk data Hijack accounts Scrape content DDoS attacks Let’s look at some options we have…

Block requests

Robots.txt Rate limiting Block IPs Super Bot Fight Mode!

Let’s turn off what we don’t need

Dev/staging These websites are typically not needed that often

Extra resources Low usage Ramp up when needed Consider impact

Azure runbooks Set up Azure runbooks to amend resources when not in use

Use the Azure cli Schedule for regular times Switch off or scale down after work Automated quick win

02.2 Front end

Images are the most popular resource type on the web

Combined they consistently add the most to page weight

Image optimisation 1 2 3 4 Optimise upload Better formats Suitable sizes Caching Optimise images for storage, these can then be handled effectively Use newer formats such as Webp and AVIF in favour of JPEG or PNG Adjust images to the viewport of the user Cache images so the user doesn’t download multiple times

Optimal images Ensure the image stored is optimised in size

Use a tool to optimise Optimise during upload Show warnings within the CMS Upload the max size required

Serve the best format possible

JPEG

The most common format. Standard from the late 1980s. Supported in all major browsers. Lossy compression Our image is 1.01 MB as a JPEG file. 664 kB with some optimisation.

PNG

Widely used for high quality images Allows for transparency Launched in 1995 Supported in all major browsers. Lossless compression Our image is 7.46 MB as a PNG file.

WEBP

Designed to supersede JPEG and PNG Allows for transparency Launched in 2011 Supported in all major browsers. Lossy and lossless compression Our image is 363 kB as a WEBP file.

AVIF

Up to 10x smaller than JPEG Generally offers the best results Supported in some browsers. Introduced in Chrome August 2020. Lossy and lossless compression Our image is 294 kB as a AVIF file.

Picture tag

Allows us to support the best possible formats today. Can still support legacy browsers if we need to Browser will load the most relevant image <picture> <source srcset=”photo.avif” type=”image/avif”> <source srcset=”photo.webp” type=”image/webp”> <img src=”photo.jpg” alt=”…” width=”…” height=”…”> </picture>

Resource hints

Default behaviour for assets is eager loading Images are being loaded regardless of placement on the page Images only load when they come into view. <img src=”image.jpg” alt=”…” loading=”lazy” />

Await interaction

Turn off autoplay for videos Set preload to none to prevent browsers from loading data. Use a poster image to showcase where a video is used. <video controls preload=”none” poster=”placeholder.jpg”> <source src=”video.webm” type=”video/webm”> <source src=”video.mp4” type=”video/mp4”> </video>

Can we use an SVG instead?

How about the use of fonts?

Font optimisation 1 2 3 4 Optimise for use Better formats Limit variations Self host Optimise fonts for the device, and use custom styles sparingly Use only WOFF2 and forget about everything else. Reduce the number of font variations required to be efficient with usage Self host and use a CDN for caching of requests

Optimise for the device

Custom fonts need to download We can make use of fonts that are pre-installed on a device. Extra benefit in that they match the look and feel of the OS. :root { —system-ui: system-ui, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif, … }

Optimise for delivery

Subset could be latin chars only Provide a hint for the unicode range Browser will download if it finds a match @font-face { font-family: LatoSubset; src: url(‘path-to-optimized-lato.woff2’) format(‘woff2’), url(‘path-to-optimized-lato.woff’) format(‘woff’); unicode-range: U+65-90, U+97-122; }

Self host If you do use custom fonts, then self host should be preferred. 1 2 UsingAzure Googleweb Fontsapps results in extra SQL elastic pools round trips (and tracking) Remove a reliance on a 3rd party 3 Azure web apps

Can we make sustainable design choices?

Sustainable design 1 2 3 4 Colour choice Image use Low carbon Inform Use a more sustainable colour palette as certain colours use more energy Use smaller images and in less places, say no to stock images and prefer illustrations. Adjust the design based on low grid intensity Be visible about your design choices and the impact we can have

02.3 Content

Redundant, out of date or trivial content?

ROTN content 1 2 3 4 Redundant Out of date Trivial No longer used Duplicate content, confusing to users and bad to the planet. It’s possible for content to go out of date as things change and don’t get audited. Content for content sake. Understand the value of the content being added. Review content that is no longer required and has no purpose.

Redundant How to reduce redundant content.

Content audits Card sorting Consider the page UX Editor warnings

Out of date How to reduce out of date content.

Content audits Show last updated Flag stale content in Umbraco Notify users

Trivial How to reduce trivial content.

Content audits If in doubt, leave it out Readability score, e.g. Preflight Editor warnings

Do you really need it? 1 2 3 4 Images Integrations Data Downloads Is it just decoration? What impact does it have? Can it be done with colour? Is it actually in use? Evaluate purpose and which sources are in use. Are they duplicated? Are they worth it? Ask only what is necessary. Define why it’s important. Keep data for as long as it’s needed. Review content that could be made available as HTML first content, e.g. instead of PDFs

Let’s be HTML first

HTML first Use web pages instead of PDFs

Avoids large downloads Web pages load upon request Provide suitable navigation Allow for search More accessible

03 What we can do

As an organisations/agency 1 2 3 4 Adopt low carbon practices Make it everyone’s problem Challenge your client’s brief Open source your ideas Formalise the why, how and what But make sure someone is really pushing it It’s easy at first but stick with it The successes and the failures; add to the bank of knowledge

Umbraco as a whole Umbraco functionality changes Hosting and infrastructure Community

Umbraco as a whole Umbraco functionality changes

AVIF support Aggressive defaults for backups, versions and other data storage Carbon aware defaults for backups, deployments, patches, resource allocation, versioning etc Device power consumption of rendering a page CO2e/page weight budgets and alerts

Umbraco as a whole Hosting and infrastructure

CDNs and caching Bot blocking Plugin management Payload compression Hosting transparency Make the planet a stakeholder of future hosting decisions, e.g. data centre locations

Umbraco as a whole Community

Can we set up a planet or low carbon focused community group? How do we maintain a dual focus on best practice when developing with Umbraco and changing the core of Umbraco? Could we publish a “What would a sustainable Umbraco community look like” as per Wordpress? How might the marketplace reflect the need for low carbon websites?

Questions?

Thank You

A Sustainable Approach to the web Neil Clark and Thomas Morris