display: green; applying the web sustainability guidelines

Our next speaker is Hede. Hede de Vries. And Hede and I, we kind of go way back. We met each other. I think it was Frontiers Conference. I think it was a second conference or a third conference.

It was my first Frontiers Conference. And then I saw Hede. I was like, okay, cool. And then the year after that, you go to the conference again.

It's like, I know that face. And then the year after that, you start talking to you like, I've seen you before here. You're like a regular. And then we also ran into each other at CSS Day. All editions Hit has been to all editions of CSS Day. He's one of the three people that raised his hand. Yes. Impressive.

I'm one of those people. I had tickets for every CSS Day conference, but I had to miss one addition thanks to my boss back in the day.

Boo. Yeah, but let's focus on Hede again. You might know, hide from a bunch of working groups.

He is very involved in all this. He's a member of the CSS Working group, Web Accessibility we working group as well. And also he's a very active participant in Open ui. The stuff that Brecht talked about yesterday. So that's very impressive.

It's even so impressive that recently he applied to become a member of the advisory board of the W3C. I think two days ago or three days ago, you officially got appointed to be on that advisory board.

Yes. Whoa. Very impressive.

HEDE also runs a blog. It's very easy to remember.

It's HEDE Blog. And he mostly blogs about accessibility.

And this is also the thing that he will be talking about today. I read on the website best practices from the W3C's new web sustainability guidelines and beyond. So please welcome on stage Hede Thank you. Thanks. Yeah, I can recommend that do go to every CSS Day from now on.

It's my favorite event of the year. It's true.

I do have my own blog. I also use it as a URL shortener now.

So you can go to hita blog slides and it's going to bring you to these slides and also the links and resources and everything. So my talk is about global warming, climate change. It's one of those things that we all know about. And although it goes way too fast, that is the kind of core of the problem. It's also something that kind of goes so slowly that you can also ignore it. And, you know, it's easy to somewhat ignore it. But I'm pretty worried about this And I'm not alone. If you're worried about climate change, you're One of the 89% of people in the world, according to the Guardian, that is worried about this and that wants governments and companies to do more about climate change.

I would love that to happen. I try and do some things and adjustments in my personal life to fight climate change and I know that's just one person doing a few things. I eat vegetarian, I hang my clothes on the line instead of the dryer and I try to take devices that I then like to try and have them last longer.

I'm quite bad at that actually, because this one is newer than it should be.

I've got solar panels, I've got a little forest on ecology.com you can subscribe and pay a monthly fee and then they will plant trees for you. They'll also do other stuff because they know that planting trees alone is not going to work.

I'm doing a couple of these things. I'm trying to.

I think many people are kind of trying to, but at the same time I also do a lot of things that aren't super green. I think we're all somewhat hypocritical and you can tell me that in the break afterwards and say, well, I've seen you in an airplane. And it's true, we're all somewhat hypocritical, but at the same time we can make the world greener. That is a thing that we can kind of do simultaneously to also doing things that are not so green. And what I'm going to talk about today is actually how we can make the world greener faster at work. Because we're here at kind of a work conference, right? We're all paid to make websites and probably work on websites that have some value and that have some visitors. And with that we can probably make quite a lot of impact. And if we try and do that, that's going to align with a lot of higher level goals, like the 2015 Paris Agreement to limit global warming to under 2 degrees.

It's going to align also with the European Commission's digital strategy, which has sustainability as one of the core aspects.

And that means in a lot of legislation that is now coming out of Europe, sustainability is part of that, like the eu, the AI Act. I talk a lot about the European Accessibility Act.

It's not in there, but it's in the AI act and it's in many of these other acts as well. Now, I'm somewhat new to the subject. I looked it up on Mastodon it was four or five months ago that I joined the first meeting of the Web Sustainability Interest Group. I'm a part of that now and try to make time to contribute to it. And it's what I'm going to be talking about today. The guidelines that we are producing there, it's only a few months, so I'm going to talk a bit about the things that I've learned in that time and that kind of stood out to me as things that I can try and change at my job and that I hope you all can change. I always thought it's about airplanes. Airplanes are bad, I shouldn't be in airplanes. And they are a part of the problem and I feel bad about using them. But what I didn't realize is that ICT emissions are actually higher than aviation emissions.

And when I realized that, I was like, oh no, that's my industry.

I work in tech. So I'm kind of double bad.

I feel bad about this. If the Internet was a country, it would be the 13th largest emitter between Mexico and Brazil.

So it's quite big. But at the same time this also presents as an opportunity because it does mean that we can do stuff at work to actually change this. There's a lot of emissions associated with us, meaning we can act and actually make a difference. Especially if we work on a lot of websites. If we work on websites that are multi products, we can make a lot of things change at once.

And at Adobe 3C, we're trying to help with that through the Web Sustainability Guidelines. They are going to be a new document, kind of inspired by the Web Content Accessibility Guidelines, the wcag, but they are a bit different. They're also in a different stage of the standards process. They're an editor's draft, meaning that they still need a lot of review and a lot of stages to go through. But the first version is out there. It's got six principles, 92 guidelines, 256 success criteria and over 100 contributors.

So it's quite big. It's got a lot of information and they are kind of spread across a lot of different areas, like user experience, design, web development, there's hosting infrastructure and systems, and then also business strategy and product management. It's all these different areas that together can make the web more sustainable.

And that reminded me a lot of accessibility because it's kind of the same. There's a lot of different people that need to work together to try and make accessibility happen at scale. And that's the same for sustainability.

Everyone in the team can contribute. There's opportunities for everyone to try and help with this. And they're kind of organized by impact. So they're low and medium and high impact things to work on as well as effort. So there's low effort stuff, medium effort stuff, and then high effort stuff where you need to do heavy refactoring. And we just heard how hard that is. But like Anna, I embrace progress over perfection. It's important to do that because you can kind of work really hard and really long to become perfect.

But that's almost impossible. There is so much progress to be made on every kind of small step can potentially help.

Now, what can I help with? What's the kind of footprint of the World Wide Web, you might wonder by now? It's basically three things.

One of them is data centers. So that is those servers that are humming all day. It's the electricity associated with those servers. Right. They cost electricity, they're using that all the time.

But also the hardware that's being manufactured. So kind of the stuff that goes into the hardware. Then secondly, it's the network. So basically the data that we're sending down to the user's devices and whatever they're uploading to us, and then it's those devices themselves, the consumer devices, they are a large part of this as well. So manufacturing laptops and tablets and phones and all of that.

When we're talking about sustainability, there are kind of two things that we're trying to do. On the one hand, it's offsetting.

So we've realized we've caused some carbon emissions and we do something to offset that. So like plant the tree and then that's equivalent to how much of the CO2 we've emitted. And then we kind of can ignore it. That is a good thing to be doing, but elimination is even better because then you're not emitting in the first place.

So that's kind of the end goal. The holy grail of sustainability is to try and eliminate the. So to do less stuff so that you also don't need to offset because there's less stuff, it's not there in the first place.

So, yeah, we can make the world greener, faster at work.

And I'm going to talk about five different areas roughly that we can do that in. Yes, one of them is css. I'm going to leave it towards the end because it's not the largest part of what we can do.

But there are some things that we can do. But the first one is really to make smaller web pages And I think that's something that most people here, especially developers, will know how to do intuitively. But we're not really doing it because median website size is growing and growing and growing. In 2011, it was 467k and today it's 2678k.

That's five times more. It's a lot more.

By having smaller sizes, we can really save a lot of emissions. There is a WordPress plugin developer who wrote a blog post about what if I shave off 1 kilobyte of my plugin and that plugin gets loaded in 2 million websites, how much CO2 could I potentially reduce? And he got to the number of almost 3,000kg per month. That is a huge amount.

It would amount to about five flights or 118kg of beef. So it makes a huge impact. That 1kg, that's five years ago. And since then we've kind of realized in the industry that this is not something that you can calculate in the way that he did it.

So the calculations are somewhat off. That's a general problem within sustainability, that it is hard to measure things. But I think the greater theme still stands. Like, if you're building something that is used in a lot of different places, whether that's a lot of page views on your websites, like users that you have, or whether that's people using your plugin, that's going to make a lot of difference. So one kilobyte could make a lot of difference. And if I would step off the stage and give you two minutes, maybe one minute, you could probably shave off one kilobyte of your project right now. We all know of a few kilobytes in our code bases that we could get rid of. Right.

If you want to look up how your website is doing today, you can go to website carbon.com it's puts your website on a scale that goes from A to F, and it gives you some kind of insights around how much energy is my website using today?

It translates that into easy to use things such as how many trees would you need to plant to compensate for this? How many cups of teas could you be boiling water for? If you're English, that's going to help you to figure out right now there's things to know about the numbers, because some of these things are easy to measure and sometimes things are easy to miss as well. You can measure how big your DOM is, but it's a little bit harder to know how much memory is being used or how much GPU is being used for all of your users because you don't know exactly which devices they're using and all of that. So some of these numbers are easy to measure and you might see them everywhere, but they might not be the most important numbers. It is a little bit tricky.

And then again, we sometimes measure, we sometimes estimate what these emissions amount to my friend Farjad Irani, he did a talk at Green IO in Singapore where he compared estimating to measuring and kind of explaining that both are helpful. And sometimes we can only do one or the other, sometimes we can only estimate. And that's like the best we've got. So we'll have to do that. If you want to do some estimations, the good news is that we've got some abstractions for you that are available and one of them is the sustainable web design model. I'm not going to explain the whole formula to you, but basically what happens is data transfer. Information goes in. So how many gigabytes is being transferred? And what comes out is carbon intensity, a number that's going to tell you how much carbon per kilowatt hour is being emitted at a given time. That goes in as well.

Sorry. What comes out is a sustainability number.

And that's helpful because then you kind of have a rough idea of what's going on. Carbon intensity is something that's really important in sustainability because it is not the same all the time. You can imagine if some of your power is from green energy, like from windmills or from solar panels, that if it's not windy or not sunny, like it was here yesterday, then more carbon is being emitted than if that would be the case, we would have less green energy. So at any given time, the kind of mix of energy is going to be different. So we need to take that into account. Another abstraction is CO2JS. It gives you an estimate of carbon emissions. You can get different forms of grid intensity data, both averages and marginal data.

And you can also figure out if your website uses a green web host, because there's a system for that to figure out which hosts are green. Basically, what it comes down to for us, a thing that we can do quite a lot, is minimize images and videos. I did this talk for a government audience and I went onto one Dutch government website.

I won't expose which one. I done my best to kind of take away the parts. Basically, that government website was 1.2 megabytes. And when I looked at that hero image, I saw that that was actually 32% of the whole page.

And there is something that we need to really think about. Because when I go to my city's website, I want to find out when they are open.

So I'm going to go and apply for my passport or I want to find out when my bin is going to be collected. I don't need to see a picture of windmills. In fact, if I lived in a city, I could probably go to the windmills and look at them there. This is not something that's going to benefit the users yet it is 32% of the page load. So this is something that we can really consider. And if we really wanted the picture, we can also do some optimizations. Emily Trotter of Nomenza talked about this in her talk Planet Centered Design, and she explained detail as data when it comes to images. So ways to save images because of that is you can blur the image or use some compression mechanism and that could look kind of arty as well. You could remove some background, simplify the image, or of course compress the image as well. You can do some of these things at once and also use lazy loading as we talked about yesterday. And all of these things are together going to help to kind of reduce that image size.

We should also be reducing assets, especially JavaScript.

I love the idea that Michelle Barker posed of having a carbon budget for your website on CSS tricks.

I think we should be doing that so that it also becomes easier for a team to go, all right, you want this image, but we can't have it. There was a time where I spent a lot of time on the bus between Bristol City center to Bristol Airport.

And what you should know about that route is that the data is not very good there. But what I would usually do on a bus is try and check into my flight. I'd go to KLM's website and try and do that. And one day I was so frustrated with how slow it was that I went home and blogged about it as you do. And I found that that page had 151 requests, 1.3 megabytes transferred over 20 JavaScript files, and a lot of pictures of palm trees.

And I love palm trees, but I didn't even see them on that view. The only thing I came to do there was to put in a number and then get a boarding pass out. And it made me realize that I think we could save so much. There's so much opportunity for saving there. What if we optimize for radical simplicity, like if we made just an HTML version of this and submit that data to the server and gave people their boarding pass as a response. And this could be incredibly fast. If we think about how fast this could be, I think we all as developers would know ways of keeping this under a few kilobytes and then save 1000 times what it actually was. Of course, there's a lot in between that bare bones version and what it was.

There's a lot in between and that is about attitude. What kind of things can we do and what kind of things can we be really careful with? We could put this into the brand font and the brand color and it would still be only a few kilobytes. And of course you are allowed to have fun. But yeah, the current day version of this is actually 8 megabytes and it's still kind of the same thing.

Lots of pictures of palm trees and people checking in and people having a great time at the Apple. I get it. But yeah, it's not great.

And one thing that kind of changed since that 10 years ago version is that a lot of it is now JavaScript.

As Brad mentioned yesterday, JavaScript done, got the IG.

And there's lots of things that we can do in CSS now, right? We can try and do some stuff in CSS that we normally need JavaScript for before. As John mentioned, we can use the Hasselector and try and make our forms much more compressed that way. So we should compress files where it's beneficial.

But it might also make sense to assign someone on the team to. This is from the business part of the web sustainability guidelines. We should have a representative that's responsible for sustainability and that has a seat at the table, maybe a budget as well, some power, so that then they can actually say, well, maybe this is too big, we can make it smaller. And that's hard. It's hard to do that.

I've had the role of the accessibility representative many times in a company and it is hard because you're usually the person that goes, I can't really do that. The carousel, yeah, can't have it.

But it's important because we want to save data.

So as people in tech, I think for us a lot of this is actually a people problem. We need to find out how to have that conversation within our teams because we all know how to reduce data from a site if we took some time and set some time apart for it and had it as one of our goals. So yeah, we need to do a lot of people and talking to other people so that we get the green light to proceed Another thing that you can use is echocrater.com it can help also in those conversations. So you can put a URL and it's going to give you an overview of how sustainable your page is. I did it for CSS day. It has no scripts, which is cool. It's got only a little bit of HTML CSS and it's got a lot of images, but that's the speaker's photos and they're cool. I love the speakers of the last few days. Another thing you can do is use web platform features instead of libraries. We've talked about it a lot in the last few days and yeah, I think that's right.

We can use the web platform and by that saving a lot of libraries. I've seen some uses of the web platform that I found quite amazing in the last few days, like converting binary to hex. I think it is super cool with checkboxes. I didn't know that was possible, but I do now.

Another thing that the web sustainability guidelines recommend is to take control of your dependencies, find the ones that aren't even being used, the ones that are unnecessary, and also take advantage of native features, native functionality. For instance, if you're using fonts, if you want to use fonts, you don't have to embed Flash movies, you don't have to do that. As Rachel explained yesterday, UI should be stylable and if it's stylable, it also going to mean that we need less libraries to do the styling if it's stylable right in the web platform. And I'm glad that we're getting some new features for that, that we're getting some new features to style forms. For instance, it's going to save a lot of bytes for us and hopefully that way CSS is only going to take care of the parts that are not boring and hard. So yeah, another thing that we can do, support older devices. That might seem a little counterintuitive, but one thing I Understood from Jerry McGovern's book World Wide Waste is that when you buy an E reader, you actually need to read over 100 books to make it worth the climate impact. If you compare it to buying paper books and printing them, shipping them to your house, all of that made me realize that these devices, we need to take more longevity out of them. We need to use them as long as we possibly can. You can find data on a lot of products online as well. Like Apple publishes these environmental reports.

In one of them they explained that the iPhone 14 Pro 81% of the emissions during the whole lifetime of their phone is associated with the production of the phone. That means that buying the phone is kind of the most unsustainable part of the whole life cycle.

And then usage is only like 15%. And the takeaway for us should be that we shouldn't be the reason that users upgrade.

And we can play a huge role in that depending on kind of what sort of features we use. I don't know if the Dutch people here remember this app. We used to have this app where you could load vaccinations and I think test as well. Like you had COVID test on and you get a QR code and then you could go to events. This was a solution for kind of opening up society while the pandemic was still going on.

And when that was happening, they used a system that Android and iOS developers had kind of come up with together, and it worked on specific versions of those platforms. Now, this made the front pages of newspapers because when they announced these plans, they found out that about a million Dutch people would not be able to use these things because they didn't have the modern phones that were required for that. So what was a super sustainable move for them to do is to actually provide a paper fallback. I think you were able to print these yourself. Maybe they would send them to your post address.

I can't remember and I couldn't find out. But there was a paper fallback.

So nobody has to buy a new phone. And it's great because that also means it's a little bit more sustainable. We all know that progressive enhancement is a good approach. I'm not going to try and convince you of that.

I think we all know that here you can progressively enhance scrollers to be a lot more fancy. You can progressively enhance select multiples very soon, and that's exciting.

So progressive enhancement is a good approach, but it's also a green approach because it means that older devices will still continue to work and then you're not the reason that people upgrade.

All right, third point, choose green hosting, because hosting is a large part of a sustainable web. So we want to choose a green hosting provider. The thing about the cloud is it's like this beautiful metaphor for what we all do on the web. But what we often don't realize is that it is very physical.

The cloud is real. It is those servers that are using electricity that are sitting there, these chips that are environmentally very unfriendly to produce. And they used to be kind of small server rooms in the basement. I think that's where they usually keep them, in the basement.

They've kind of changed to be more larger data centers that go from like 100 kilowatt to 1 megawatt kind of server parks, literally like multiple buildings sometimes.

And they start to be referred to as canvases as well. So server parks are kind of getting bigger.

It's not just a few servers in your back room.

And we can make a big difference by using or changing to a green provider. The Green Web foundation has a list of what those providers are. They have 329 verified green hosting providers, and they have a really thorough process for figuring out which ones are green. And if you work in a team and you're involved with where we're going to put our website, this is a good thing to ask sales representatives as well. They come and try and sell the stuff there. So you might ask the question, like, how green are you? How do you compare to other environments? We have power there, too.

Factors include renewable energy. Some of these data centers are right next to a windmill park or solar parks, which is kind of cool because they sometimes get the electricity directly from that. It's also to do with how long they use their equipment for.

Sometimes we have requirements for equipment, so they need to purchase new ones.

But we all know making new equipment is a huge part of sustainability.

And then it's also about waste recycling. The thing to remember here is that there is only one grid. There's only one grid, meaning that you cannot have 100% green energy. You're going to get a mix of energy from all these different sources at a given time.

Unless you have your own little grid with your solar park that's right next to you. Right. This is a screenshot from an app that I use to charge my car. And anytime I do that, I get a breakdown of where the different bits come from. Some of it will be wind, some of it will be solar, some of it will be biomass, and some of it will be coal. At a given time, it's always different. I always have a look and it surprised me because I actually thought, there is a lot of windmills here, so we should be fine. We should be kind of green, especially when it's sunny out. But it depends. It changes all the time. If you go look for this information from these data centers, you'll find that their marketing websites are extensive.

A lot of the big cloud providers have a lot of marketing websites, information, pictures of how green everything is.

But if we know that there's only one grid and that we don't have 100% green energy. We should also admit that a large part of this is not yet green. So we're not there yet, but we're going to get there. And I think it's also great that they are working on this now.

One thing we can also do is to consider timing. Timing is really important.

I talked about carbon intensity before. It's basically how clean energy is at a given time. We can play with that in the websites that we've built. Farshad Irani calls this grid Aware website and I find that idea really interesting.

If you have an About Us page with information about your team, you could potentially have a video on there, like an 8K documentary that is 45 minutes long, where you introduce every single team member. And you can imagine that is a somewhat unsustainable solution.

But you could do that. But maybe then you could fall back to a version that has just pictures of the team members and then you have multiple versions that you can switch between. If the carbon intensity is really high, you could switch up the versions. You could have a low carbon version where it's just the names and maybe the phone numbers of people, because we all know text is not very heavy. We could play around with our websites and try and have lower and higher carbon versions. And depending on how the grid is doing at any given moment, we could serve the right version. There's a shop called Organic Basics that have done that as well. They have a lot of pictures on their website because they're in fashion and that makes a lot of sense. But they also have a low carbon version of their website where they use SVGs for everything and they serve that when the power is not so great.

The fourth thing that we can do is to use only features that are absolutely necessary. We should be more critical of the kind of stuff that we put into our websites. And I think one of the main things that we should be doing there is to avoid technology that has a relatively large energy use.

So if you think about the energy use of kind of solutions that we're trying to provide, and there's a bit of an elephant in the room here, and that is AI. AI has a massive energy use. I'm not going to quantify it anymore because there's a lot of different types of AI and they all use a lot of energy. Most of them do. There are low carbon versions, but I'm going to keep it to just the general word AI to not overcomplicate this. We talked about data centers, those colocation data Centers, they're up to one megawatt in terms of power that they can use. Recently we started to kind of upgrade these data centers. So everywhere around the world you start to see these data centers that have like 150megawatt and they're much bigger. They're usually multiple buildings and they're a lot bigger. And this is changing now with AI because they are now building so called mega campuses that are 1 to 2,000 megawatts.

So the size is increasing at a huge speed. They're very big. Here's a picture of one of them that's in the north of the Netherlands, in Eemshaven.

It's huge. It has its own car park. There's hundreds of people working there.

And it uses enormous amounts of power.

There's another one quite close to here in Minamir.

Again, huge, very big. It's really hard to find information. I wanted to put on this slide some information about how many megawatts are being used inside of these places. But what I found is that the press releases related to these data centers, they don't release information about how many megawatts are actually being used or how much power. They talk a lot about the money that they invest in the Dutch economy, which, no thanks, it's great. But they don't talk about the megawatts. So that's kind of hard to find. But we can assume that they are very big. Just from the pictures of them.

We don't know exactly how much power AI uses because the huge AI companies, all of the bigger ones, they refuse to release information about them. That, and that's somewhat sad.

A researcher named Alex Defries Gao not family of mine, they looked at how much power AI is using by tracing chips. So they went to like the chip factories and they figured out which chips are being used. And then they did some magic mathematics and they figured out that AI was using more power than multiple countries. They figured out that it was about 11 to 20% of the data use or the electricity use of data centers. So basically all I can tell you today is that the data usage is large. That's something that we know for sure. I don't know exactly how much it is because they don't disclose it.

The International Energy Agency, which is an independent group, they also looked at this and they said electricity demand could double in a lowercase scenario or could quadruple because of AI and also cryptocurrencies. They released that report recently.

You can also think about what would happen if we replace services that we use. All the time with AI, someone named Wim van der Bauer did that. Van der Bauhader. They looked at what if we would replace search engines with GPT style things. And they said if it was a GPT3 style model, which is one of the models that OpenAI made, it would increase 60 times.

And if it was one of the larger models, GPT4 even larger, that could increase 200 times. So the increases are very big. They're not like doubling or quadrupling, but they are actually hard to imagine this kind of growth that AI would cause if we do that. One of the interesting things about AI is that people also say that it can help solve climate change. And that would be really interesting because then we wouldn't have this problem right now. OpenAI is one of the companies that are working on that. And what they are working on specifically is something called AGI, Artificial General Intelligence. And it can do several things. They've talked about this in different blog posts.

Sam Altman talked about this on his personal blog as well. Scott's personal blog.

He doesn't host it himself, but he's got one of those.

They talk about it a lot and it gets them into interesting places. But when I was reading a book called Empire of AI by Karen Howe, which is fantastic, I really recommend it, she has actually followed the leadership of OpenAI, especially in the early days, and she's asked them many times, what do you actually mean by AGI? And what I took from her descriptions in this book is several things. One is that AGI is not well defined.

So they kind of talk about it as it's going to emerge.

When it's there, we'll recognize it, but it's currently not well defined. It's also not in existence. So it's not there. It doesn't actually exist. And because of that I think it's not sure if it can actually solve global warming. I think it wouldn't be a safe bet to try and assume that it's going to happen with AGI.

I also wanted to do my research, not just say these things. I did go to OpenAI's website and I searched for global warming.

It returned with it. Looks like your question goes beyond what we can assist with.

I get it. They are using an LLM to give these responses and we all know that you should double check that with an expert. I didn't do that. As of current, I think we can say that it has unknown support, unfortunately. There's lots of interesting information though to find about this sustainability and AI.

There's a great paper called From Efficiency Gains to Rebound Effects.

I cannot summarize it for you here, but it kind of goes into the two different sides of this debate because there is genuine efforts happening using AI for sustainability, but there's also genuine concerns and they're kind of talking about both of them. In the conclusion they say we simply cannot hope for the best outcome or cannot simply hope for the best outcome. And that really resonated with me. Like I would embrace it if the best outcome would happen, but I think it wouldn't be the right guess. So for now I'm going to recommend to you that adding AI means adding magnitudes more emissions.

We don't know exactly how much because the companies don't disclose that, but we do know it's a lot, not a little bit more, but actually magnitudes more. So finding ways not to use AI is a green strategy and that's what I would be advocating for.

If there's any way you can stop projects from including AI or using large language models, that would be a great thing to do. Or figuring out if there is a low carbon version of something that you can potentially use. You could also do a UX optimization. I think you could let users opt out of the things that are carbon intense. You can communicate the impact of user choices. So if you run a search engine, you could be like, how do you want to maybe talk to our chatbot? Or do you want to browse the search results? And you could market that second option as, hey, this is the green version. There's not many websites that do that today, but I think it could be actually meaningful also on a place like YouTube where I love watching videos of music online and I sometimes stream that in 4K.

This is one of my unsustainable habits, I guess.

But I don't actually always need to see the video. I might be cooking at the same time. So I could actually turn that off. And I think the greener options, if we identify them and give users a choice, there's actually some benefits to be gotten there as well.

Currently it's really hard to opt out of energy intense things.

I did get a tip from Bruce Lawson yesterday. If you add profanity to your query, it's going to filter out AI results in Google. So that's really, really helpful, I think.

Yeah, you're allowed to have fun, right?

I think we want to try and work on removing stuff rather than adding it. And that's maybe a sort of more general thing that we need to think about. I can't tell you what you need to remove from your code basis, but what I can tell when we browse the web today, it is really heavy. Like there are very big websites out there that I don't think need to be as big as they currently are. And a lot of that is conversations, peopling, making sure that everyone's on board with trying to go for more carbon efficient version of a website. We can strip a lot of things out and we can make things a lot better. I promise that.

Also get into style sheets or as people who were here two years ago would know, css, right?

CSS is awesome. CSS just works.

There's a couple of things that we can do in css. I don't think it's going to be the largest impact that you can have. You cannot have the large impact with css. But we can try a couple of things.

Some of them are in color so we can use user preference media queries, for instance, the preferred color scheme dark is for instance something you can choose to provide a dark mode that's going to be a little bit more energy efficient than a light mode.

There's also this concept of an eco mode that I was chatting about with a few friends recently because dark mode is still going to use a lot of electricity and something that OLED screens apparently can do is that they can turn off pixels if they are completely black. So that would be a way to also save. It might be a version of your website that's less accessible if there's too much contrast.

So there's a little bit of tension there. But we could try and invent modes of our website that are more eco friendly and offer that as an option.

Of course we can also use PREFER's reduced data currently has limited availability, but I hope it's going to be moved forward. Any private show folks here, I'd love to see that happen because I think again mentioning that at the start it emissions are larger than aviation emissions.

We have a lot of opportunities in our industry to make a difference and I think this could be one of them. If we think about reducing data, we could use this media query. We could try and use it. We can also optimize for monochrome devices. If people want to use those, they're going to be using less energy as well. And I was going to mention print style sheets because why not? You can try and optimize that too. You can remove some stuff so that people can save paper.

And then CPU and GPU usage I think is also going to be a Large factor in this. I was talking to Sana yesterday. He spoke at CSS Day last year, I think, and he made these really cool demos that were using a lot of custom properties, a lot of them, and it made his laptop behave strange. It put his USB port on fire. On fire explodes. Ish.

This happened. You can talk to him later to hear more about it.

But there is things that in CSS we can do to break our GPUs and we should try and avoid that. I guess. We can also respect reduce motion queries. That's a good thing for accessibility because we want to avoid people getting motion sickness. But it can also be a way of not using their GPU if you don't have to.

One more thing, just like with JavaScript, we can try and figure out what stuff is unused because if you don't need it anymore, then don't use it.

We can use tools like Anna already mentioned, like Project Wallace. They give you a lot of insights on the kind of things that you could potentially remove or could optimize for.

If you want to know more about it, you should find Bart who is here.

He's been coming to see us for many years. I think he's right there.

Yeah, people are pointing it's happening. He allowed me to take this picture earlier. He made Project Wallace and he can give you a lot more information on the kind of things you can take from there.

You can also figure out what your font can do, as I'm sure you've all figured out. There's this tool called Wakamai Fonto if you want to know more. I guess I don't see you here.

Yep, there. Yeah, awesome.

Yeah. Do reach out anyway. We can make the world greener faster at work. There are a lot of opportunities that we can take to save emissions for us as web developers, there's ways that we can make things better. We can make smaller web pages and really argue for that because we all know, I think how to remove some bytes. But we aren't doing it. The current web isn't showing that we're doing it. We need to support all the devices so that people don't need to buy new ones. At least that weren't of the reason. We want to try and choose green hosting, only necessary features and use greener css.

And with that I think we can make the world a little bit better at work. Not just in our personal lives, but actually in a place where we have a lot of page views, a lot of users and maybe also the budget to actually try and fix it with that. I want to thank you very much.

Yes, thank you. Hede. Let me first fix our furniture because chairs have moved around. What is happening with the chair chairs? At least we still have two chairs. Or you would have had to sit on my lap. Or me on your lap. Whatever you prefer.

All right. Thank you for that talk. Thank you for that talk. You managed to squeeze in like a bunch of references to all of the previous talks that we had.

You even managed to squeeze in Adam's talk from two years ago.

How did you do that? I'm bored.

I'm not bored. No. Yeah, I enjoy that.

Anastasia from the crowd gives you a challenge, by the way, because she would like you to see include photos of all of the speakers from the previous 11 editions in your presentation.

If you will be talking at CSSA 2026. Yeah, I can make that happen. Let's try it. Cool.

So I'm not great at maths, though. Like, that's a lot of slice. So. But we'll see next year. I'm very much looking forward to that. We have some more questions from the audience.

Jeremy Keith wonders. He sometimes hears some users telling him their website is broken to them because they are using older devices like an outdated tablet, an outdated iPhone and so on. And they can't update the operating system anymore.

And because Apple ties Safari updates to the operating system on iOS, they can't update their Safari and then they can't install any different browsers because it's all WebKit under the hood.

Jeremy doesn't want these people to buy a new device. Is there something Jeremy can do? And I think you covered it a bit in your talk.

I think it would be really important to say these kind of things on a stage like this where Apple might be watching.

I think they should do better. They shouldn't do this to the people. That's also something that they actually did in the case of the Corona Check app.

The Dutch government people reached out to Apple and said, can you do this on all our devices? And I think they moved it down one iOS version from like 12 to 11.

So that happens. But yeah, I love to see them not make these ties and optimize for all their devices. It's obviously against their interest.

Right. Because then they can't sell. And besides us being vocal about this sort of things, is there something that we as developers can do?

Yeah, I wonder. I mean, not without damaging ourselves, I guess. Right. Because then we would get angry users and how do we sort of. I think you covered a fair bit with progressive enhancement.

Yeah. Where it's like, this is the way to go.

Rohir is wondering a lot of the JavaScript that gets loaded onto their websites are being used for analytics. How can we decrease this type of JavaScript on our sites?

Yeah, this is again a people thing and an organizational thing. If your sustainability person is higher up in the food chain, they should have the seat at the table where they can actually say, well, no, we cannot have this because it's going over the size. If there's a carbon budget, you could say like, well, this goes over the budget. What do you want? Do you want the carousel or do you want the ads? Or you can kind of have the make decisions sort of based on that because yeah, analytics are a huge part of this and they're not in the interest of users.

Usually they are sometimes marketers as such. Right. They will say, oh, we'll make our website better because we've measured what you've been doing and we'll make it better. Sometimes that might be the case.

But yeah, there's often so much JavaScript involved that probably doesn't need to be there. Right. Which leads me to the next question Dennis asked. Do you think there is a need for official regulation and legislation regarding the energy consumption of digital products such as websites and services?

Are there already such initiatives?

There is a need and there is also a lot of legislation.

I actually forgot to put that in my talk. But the Web Sustainability Interest Group, they have a spec that has like a list of all the different legislations a lot more than say for accessibility, especially in Europe.

Like there's a lot of different laws that actually quote this and a lot of requirements, but I don't know if that kind of cycled through yet inside of people who make websites. But they exist in a lot of different areas. Right. So it's something that then we as web developers, we can start building it into our own websites, taking it into account and hopefully the bigger companies out there will follow along and do the same thing.

A question by Kevin, which is how do you feel about companies like Beta? And I know Microsoft did it as well, buying their own nuclear power plant. And could this potentially be the norm for large tech companies? Yes, potentially. I think it's interesting for us to see because they don't disclose how much energy they're using, but they are buying the nuclear power plant. So we can infer that they are probably using a lot of power and that it's not all green. And that's important to know because the salespeople from the cloud company will come and say, we're doing it all green. And I love to see it, but I would love to see it to be a little bit more real with actually more green energy than there is currently and less nuclear power plants, I guess.

Cool. You mentioned the carbon emissions and showing people different versions of your website based on the existing carbon emissions.

You also mentioned people may be preferring like, okay, you are giving the option to do a search on Google search. And it's like, hey, do you want to ask the chatbot or do you want to check the search results? Maybe we need new media queries for this. Yeah, that would be really cool.

As a user, I really love more choice in this because often some of these really carbon intense things are kind of forced upon us. And I think that's not what I hear from other users that I talk to. A lot of people are like, I wouldn't really use that or I don't really want to use it, but it's kind of getting forced upon us. So I would love to see that get more choice. And yeah, maybe media queries could help with that and also propagate that idea of making it possible. Maybe make it easier as well for websites to offer that we should chat about that. My document is changing as I am looking at it and it's. Who's typing?

It's Jan van Helmont. That Jan, I will get you. Yeah. Quentin basically asked the same thing about media queries. Cool.

Yeah. With that, I want to thank you Hide for your talk and I hope everybody here enjoyed the talk as much as I did. So please give him a warm hand. Thank you. Hede Vriest. Thank you.