Web performance and the planet

I'll bet you didn't expect to be hearing about climate change at a Web Performance conference.

Right?

But in this talk Web performance and the planet, I'll be looking at the ways that we, as people who care about performance on the internet can help to shape a cleaner, greener, more sustainable Web.

Before we get into it, just a bit of background.

What are website emissions, where do they come from?

And what kind of scale are we talking about here?

It's estimated that around 7% of global electricity use comes from ICT.

ICT stands for "information communications technologies".

That's the servers, routers, modems, laptops, smartphones, all the things that help usstay connected.

7%.

Now that's more than a lot of countries, but what does this look like in terms of CO2 emissions?

Estimates put ICT's annual emissions at between 2 to 4% of the total global emissions.

For a bit of context, that upper bound of 4% puts ICT above the country of Germany, which is the world's seventh largest emitter.

To compare across industries.

Aviation is widely regarded as one of the global economy's more heavily polluting industries.

Aviation accounts for 2% of total annual emissions.

Now, unlike an industry such as aviation, which will require feats of engineering and science in order to decarbonize, us, builders of the web, we've got the tools available to us today to start to really make our industry more sustainable.

Before we get into the how, let's just double click on those emissions and get a feeling for where they come from.

29% come from electricity being used at data centers and to push data over the network.

The majority, 52%, is from consumer devices, and the remaining 19% from production.

The good news for us is that we, as people who maintain, build and optimize websites, we've got the ability to influence three out of these four areas.

That's over 75% of the emissions mix.

So what can we do?

Now I hope the next few slides really give you a feeling for just how aligned web sustainability and Web Performance are.

A lot of the things I'll be talking about over the next few slides are things that you're probably already doing or thinking about doing to make your sites faster.

Before getting started, it helps to get a sense of where our sites currently are in terms of website emissions.

Tools like website carbon and beacon, are almost like page speed insights for website carbon estimates.

Point them at a webpage, and they'll give you an approximation of the CO2 emissions produced each time that page is viewed.

If you'd like to track things over time or across more pages, than paid services like echoPing, Zifera, or GreenFrame are great for that.

And sitespeed.io also have a sustainable web plugin, which you can use on their open source tool.

Now it would be great to see web sustainability metrics appearing alongside the other performance metrics we all care about so deeply.

I know tools like WebPageTest and Lighthouse, both have open issues discussing this, and I'm hopeful that other providers have also given this some thought.

Now, when it comes to reducing the carbon emissions of our websites, there's three key areas where we can look.

The first is to send less data.

Second, reduce the distance that data has to travel.

And finally use green services and green web hosting.

The overarching theme here is to reduce the amount of electricity needed to deliver our websites and where possible ensure that the electricity we are using comes from green or renewable sources.

So let's go through these one by one.

First up sending less data.

The aim of the game here is to optimize all the things.

You'll find your quickest and easiest wins in images and fonts, especially with modern formats.

And now with native image, Lacy loading in all major browsers.

If your site uses video, look for wats that you can optimize how that is delivered and try to avoid auto-playing as much as possible.

Using less JavaScript on your site is always a good move.

And if you can optimize the way your CSS is delivered too you can get some nice little sustainability gains as well.

And finally, if you're using embedded content, look to see if you can lazy load that or only download data when the user interacts with the particular element.

So what kind of impact can all this bytw shaving have?

This quote here is from developer, Denny, vanKooten, who's the author and maintainer of a popular MailChimp for WordPress plugin that's used by over 2 million websites.

He found that reducing a single kilobyte of the size of that plugin equated to an almost 3000 kilogram reduction in monthly CO2 emissions.

That's the impact of a single kilobyte at scale.

Now, when it comes to reducing the distance data has to travel.

It's worth keeping in mind that the lowest carbon request is the request that is never made at all.

So if you can use browser caching or service workers to cache static assets locally, please do so.

If your site serves a global audience, then use a CDN.

And if you perform heavy computational tasks on the clients side, see if you can shift those to the edge as well.

Just a note though, on CD and an edge providers, when you're selecting a provider to go with, do some research into the sustainability commitments they've made.

If they haven't made any at all, or if you feel that the ones that they talking about are a bit wishy washy, then bring that up with their sales team, the more developers that make it known that sustainability plays an important part in our decision making process, the more companies we'll see starting to take meaningful action in this space.

Now talking about using green services.

If you're able to host your site on a green webhost, then you're already off to a great start.

The green web foundation have an online tool, which you can use to scan your current site to find out if it is hosted on a green host.

And they've also got a directory, which you can use to search for green web hosts from around the world.

And finally, it wouldn't be a Web Performance talk if I didn't mention third parties.

Now, although we've got less control over how much data they sending, down, we can still factor in sustainability when choosing the third party services, we use.

Are my third parties green?

Is a website I've built to help people do just that.

It can scan a webpage to reveal which third party requests made from that page are served on green web hosts.

There's also a directory that people can use when they're picking third party services so that they can choose a more sustainable offering.

And if you do provide third party services on the web, what can you do?

The latest web Almanac from 2021 shows us just how prevalent third-party requests are.

So any changes that you make as a third party provider could have the potential to influence a lot of websites.

And we saw earlier just what kind of impact a single kilobyte at scale can have.

Now we've been talking a lot about optimizations and all that stuff here, but to be honest with you, the most low carbon website would just be black text on a white background with no images, no videos or no interactivity.

I'm going out on a limb here, but I reckon that's probably not going to pass mustard with most of your business stakeholders.

And probably not with your users either.

So design plays a very important role in building a low carbon site.

And sustainable web design presents designers with interesting challenges, that are very different to what they might face on a regular basis.

Some things to consider if you do have a chance to talk to your design team about sustainable design include: the use of jumbotron videos.

These are the large often auto-playing videos that are found at the top of web pages.

When you're talking with your designers about these videos, really question whether they add any value at all.

And if you do still need to use them, do they have to be auto-playing?

Could they be presented in a different way that only downloads the data once a user actually interacts with the video?

The same goes for image carousels.

If you've used them previously on your site, you can probably check your analytics to see if they're actually effective at all.

If you do still use image carousels, then please make sure that whatever content is hidden from the user when they first land on the page is lazy loaded, and image carousels are also often accompanied by large JavaScript, libraries, tod rive them.

If you've got the time, and if your designer is able to provide you with a creative brief, then could you look for other ways that you could implement an image carousel, maybe using CSS scroll-step with just a sprinkling of JavaScript.

Sticking with images, they do play a huge part in web design.

They also present your designers with unique opportunities to look for ways to reduce the size of images, whilst also giving your sites a very unique feel.

The images on this slide, are from climate action dot text brunch magazine.

Brunch magazine's website is hosted in the UK and it monitors the carbon intensity of the UKs electricity grid to present different images to users under different circumstances.

When the grid is low intensity, meaning it's powered more by renewable energy, you'll see a full resolution image.

On a medium intensity grid, that image becomes black and white and pixelated.

And on a high intensity grid, meaning it's powered more by fossil fuels, you'll see a placeholder with text describing the image.

Now users do have the option to click on the placeholder to reveal the full image if they really, really want to see Zuck on a surfboard lathered in sunscreen.

But in this case, I think the text does just fine.

Dithering is also another way to reduce image size whilst also giving your site a very, very unique look.

Just as an example, here's a picture of my cat doing what she does best.

The original image comes in at 720 kilobytes.

If I apply a duotone effect and a bit of dithering, I can get that image down to 160 kilobytes-that's all before any other image optimizations are applied or I change the format or I even do responsive sizing.

And just finally, colors also play a role in reducing the energy intensity of a website.

In research that Google conducted on the Google maps app, they found that as you would expect, black is the most energy efficient color, drawing the least amount of energy from the user's device when shown on the screen whilst white is the most energy intensive.

What's interesting though, is that blue is significantly more energy intensive than reds or greens.

Now it's probably a bit of a stretch to go and wholesale change your branding just to make it a darker theme.

But it's something you can consider when working on greenfield projects.

Just a note, though, if you do provide a dark theme on your website, then please do provide an easy option for people to change to a lighter color if they need to.

Reading light text on a dark background, isn't always easy for everyone.

And just to help you, and your designers get inspired, lowww and low carbon two directory websites that showcase low-carbon web design in the real world.

So you can go there and get some ideas.

Now let's bring things back to performance, right?

What can all this web sustainability stuff mean for our site's performance?

Organic basics is a good example here.

They've got two versions of their online store.

The first is your stock standard, regular e-commerce platform.

The other is what they call a low impact version of that site, where they've taken steps to reduce the amount of data being transfered on each page load amongst other things.

You can see one such example here with they've used a light, simple product illustration rather than a detailed product image.

So how did these two sides stack up in terms of performance?

When we look at Chrome user experience report data for the two sites, the difference is stark.

The low impact site performed significantly better across most metrics.

Now I hope the last 20 odd minutes have left you feeling inspired to start taking action for yourself.

To help you get started here are just a few ideas on where you might want to begin.

Now.

I hope that the last 20 odd minutes have left you feeling inspired to start taking action for yourself, just to help you get on the way here's some ideas.

Start with your own corners of the internet, your own personal website, open source tools that you maintain, plugins, other stuff like that.

Bring it up at work.

Whether you bring up web sustainability as part of a Web Performance projector even as part of a broader company wide sustainability push.

Set a carbon budget for your sites, just like we set performance budgets.

This idea came from a post by Michelle Barker on CSS tricks, and I think it's a great idea.

And just finally share your journey because by sharing your journey, you never know who you might be able to inspire to start taking action for themselves.

Thanks for your time today.

If you'd like to connect and talk about web sustainability, web performance or just rugby in general, you can find me on Twitter and LinkedIn.

I'm @fershad.

I hope you all enjoy the rest of lazy load.