Fast, green, responsible
Setting the Stage: Host Intro and Ines’s Sustainable Web Focus
The host introduces Ines, highlighting her role as a Google Developer Expert, a green software champion, and co-chair of the W3C Sustainable Web Interest Group. Ines greets the audience, shares her background as a frontend engineer at Storyblok (currently on parental leave), and sets a relaxed tone with personal anecdotes. This opener positions sustainability and performance as intertwined themes the talk will explore in depth. It frames the session’s goal: connecting environmental impact to everyday web decisions.
LEGO Bridge Lesson: Problem Framing, Failure, and Early Constraints
Ines demonstrates how to translate user needs into design by building a LEGO bridge for “Bandit” (a stand-in for users) to cross a river. The first simple bridge works for a person but collapses under a car, revealing a missed requirement and the need to rebuild with sturdier supports. She then contrasts rudimentary structures with awe-inspiring modern bridges to show how constraints drive engineering rigor. This hands-on demo introduces the central theme: starting simple, listening to real needs, and iterating when assumptions break.
From Users to Ecosystems: Accounting for All Constraints
Ines walks through the process of expanding requirements: do we even need a bridge, what terrain and technology allow, and which resources are realistic. She layers in ecosystem constraints—boats that must pass, neighbors enduring long construction, and nature (riverbed, bird migration) affected by design choices. A personal anecdote about crossing a sketchy suspension bridge underscores how constraint-driven designs evolve toward safer forms. This segment reframes “the user” as one stakeholder among many, a mindset she will later apply to the web.
Bringing It to the Web: Performance, Accessibility, and a 2020 Wake-Up Call
Pivoting from bridges to browsers, Ines connects her career roots in accessibility and web performance to a pivotal 2020 moment: seeing planetary boundaries referenced in a modern JavaScript talk. She explains that “the cloud” is physical—devices, data centers, and networks all consume energy and materials. The message is clear: performance work already helps people, and it can also reduce environmental impact. This establishes the talk’s throughline: apply engineering discipline to make the web both usable and sustainable.
Defining Sustainable Web Design: People and Planet, Intended and Unintended Effects
Ines introduces sustainable web design as an approach that puts people and the planet first, noting how fast-scaling digital systems can become part of the environmental problem. She explains the broader impacts—carbon, water, materials—and warns about infinite growth on a finite planet. The speaker also highlights unintended social harms (e.g., social media dynamics) as a reminder that optimizing for “users” can still hurt people and communities. The segment positions sustainability as a multi-dimensional constraint set, not just a carbon number.
From Community to Standards: Building the W3C Web Sustainability Guidelines
Ines explains how a community group of practitioners evolved into the W3C Sustainable Web Interest Group to define what “sustainable” looks like for the web. The goal is a W3C Note that implementers and policymakers can use, following the path of performance and accessibility standards. She emphasizes the need for a clear, shared framework that others can critique and improve. This moves the theme from principles to a concrete vehicle for adoption.
Inside the Guidelines: Image Optimization as a Sustainability Case
Using Guideline 2.15 (Optimize Images) as an example, Ines demonstrates how success criteria start with “do we need the image,” then move through optimization, deactivation, and maintenance. The speaker explains the benefits and advocacy angles, noting the overlap with performance best practices and how these practices can support compliance and stakeholder buy-in. She ties the guidance to evolving reporting requirements (e.g., in the EU), where digital operations will increasingly factor into sustainability disclosures. The takeaway: many “green” wins are the same wins we pursue for speed and UX.
The Hard Part: Measuring Impact Without Misleading
The speaker explains the challenges of measuring digital emissions in a complex, global system, where calculators often use bytes transferred as a proxy—useful but flawed. Ines details pitfalls like cached heavy scripts appearing “zero” transfer despite high compute costs, and warns against public claims that can lead to greenwashing risks. She recommends tools like EcoGrader for actionable guidance (not PR metrics) and notes emerging efforts such as Firefox Profiler’s energy view and the Green Software Foundation’s measurement frameworks. This segment calls for better telemetry from browsers and careful interpretation to avoid false precision.
From Principles to Practice: Progressive Enhancement for People and Planet
Ines introduces the concept of progressive enhancement and shows how it applies to sustainability: ship a robust baseline (1991 web: content first), then layer features based on conditions and preferences. She argues for respecting user intent and context, avoiding gratuitous weight like a 5 MB animated hero GIF. The approach balances experience and impact, letting teams add richness where it’s warranted without penalizing everyone. This becomes her core build strategy for aligning UX quality with environmental constraints.
Respecting User Preferences: Dark Mode, Motion, and Real-World Business Impact
The speaker highlights system preferences such as prefers-color-scheme and prefers-reduced-motion, noting low adoption rates despite their simplicity. Ines shares how, as a new parent using phones at night, dark mode shifted from a preference to a necessity—brands without it lost her business. She points to HTTP Archive data showing underuse of these signals, urging teams to meet users where they are. This segment grounds sustainability in human-centered design that also drives retention and loyalty.
Carbon-Aware Delivery: Adapting Experiences to Grid Conditions
Ines demonstrates how to use Electricity Maps and similar APIs to detect local grid carbon intensity and serve different versions of a site accordingly. She showcases the Green Web Foundation’s Branch Magazine implementation, which delivers low, medium, or full media variants via edge workers, always allowing user override. The pattern marries progressive enhancement with carbon awareness, enabling teams to reduce impact without removing choice. She closes with a call to action: review the guidelines, contribute to measurability efforts, and start implementing dark mode, motion settings, and carbon-aware patterns now.
Q&A: Policy Pathways, Greenwashing Risks, and Inclusive Standards
In the Q&A, Ines addresses audience questions about legislative traction, describing ongoing W3C coordination (e.g., TPAC sessions) and efforts to align the guidelines with EU initiatives and reporting frameworks. She cautions against greenwashing, citing fines in other industries and the need for precise, defensible claims. The discussion touches on digital product passports and the importance of inclusive design, referencing “Invisible Women” to illustrate how infrastructure can exclude when perspectives are missing. Ines invites continued engagement—feedback, contributions, and collaboration—as the community advances from zero to something better, together.
So to kick us off after lunch, we have Inez.
Inez is another Google developer expert.
It seems to be running in the lineup here a little bit. And a green software champion. Inez does a lot of work around sustainability and in fact is, yeah, I wanted to get the naming right but the W3C sustainable web interest Group is the co chair of that. And this is such an interesting, I think area, right, because it's one of those things that I think we're all starting to recognize there's a little, there's definitely an impact. There's a correlation here between performance and, you know, environmental concerns and CO2 stuff. But the connection is a little bit tough still.
It's still, it's very new territory and it's kind of a fascinating topic to dive into. Inez actually also like has two little ones, five months old, is the youngest. So she hasn't slept, but it's fine. At that age when you have two little ones like that, you just kind of like you, you learn to process on no sleep at all. She does a mean Britney Spears hit me baby one more time. She was like jamming over here. So maybe if there's a little bit of extra time, you know, we'll see, we'll see if we can get a little karaoke thing up here for her after. But yeah, everybody, Inez, thank you. I'm going to do this as well. I didn't get to still believe part so he thinks I'm good with Britney Spears. So yeah. Hi everyone.
Tim did a lot of introduction. So my name is Ines.
I'm a front end software engineer and I have been in web performance world for a few years now. I am W3C Sustainable Web Interest Group co chair for a few months and I work as a solution engineer at Storyblok.
That's kind of on hold now because I'm on parental leave currently.
So there is my husband with the two little kids holding the fort there in the hotel. So thank you to my husband for being here. As you may imagine, with two little kids, I don't get to do that much building coding these days, but I do a lot of playing.
So today with official approval of my chief LEGO officer, I got some bricks for us. And if you haven't met this little guy, so this is.
His name is Bandit. He is Bluey's dad. If you have little kids, you probably know Bandit. If not, well, just consider him a user, a person. And Bandit has a problem.
Bandit came to the river and he wanted to cross that river. There Was no bridge. So we decided to help out our Bandit and we decided to build him a bridge.
So, so we came to the river, to the river banks and see what we can do. So we pulled some, well, bricks while they go. Bricks, Some stones from the side.
Here we go. That should do.
And we found a little plank. We put those together.
And now the Bandit had his problem solved.
He could cross our bridge. However, Bandit is a dad of Bluey.
And a lot of times when he goes to do some stuff, run errands, he actually needs to break his heart. Because if you've ever went running errands with a toddler, you know that that's a very slow business. So Bandit and Bluey sit in their car and they went toward our bridge for the first time.
Did we or did we not practice this to be car safe bridge?
Turns out we didn't. Turns out that we wanted Bandit to cross this bridge, but we didn't really account for the bridge to be for cars. So if the car goes on top of the bridge, this is basically what's going to happen. So we need to rebuild our bridge this time. Thinking about the fact that Bandit wants to take his car across the bridge, which can be like a fairly easy job. No, we need just a few more stones. We're going to put this together and put it in the middle. This should make it sturdy enough.
Something towards this line. I hope everyone sees my tupelos here.
And now Bandit and Louie can actually cross this bridge. However, when we actually come, you know, this is our concept of a bridge. We just add this one.
But when we come to the riverbank to assess this, why the bridge failed in the first place, we realized that the solution we have in mind may not be feasible because of the thing that was a constraint in the first part. The river.
How fast the river is, how deep the river is. Can this middle piece actually go in the river? So we came to our first constraint and maybe the answer is no. Maybe yes. But we need to start thinking about all of these constraints. So when I think about bridge building, about this ancient bridge building, which is one of these, solving one of the issues that has been here for a long, long, long time.
This is kind of how I imagine it. You know, they just put this plank across. Let's go. Then the river came, took it off, you know, like, okay, let's put it a bit up. So it came with, you know, a lot of maybe we should try this. Or that didn't work. And it kind of progressed to something more towards this to these modern, beautiful pieces of, I would dare say art that cannot be anything less than awe inspiring when you see them.
And the bridges themselves, other than having so many of these things behind them that you think about. And other than just solving these basic issues of connecting two sides, they actually don't live in isolation. They live surrounded by the ecosystem. And there is ecosystem around it that imposes so many constraints on the bridge that over the centuries that, you know, we have been perfecting the art of bridge building to go, you know, from this, something like this to something like this has been, you know, slowly discovered and slowly progressed. So more and more constraints have been there. So standing in front of some of these bridges usually gives me this, you know, respect towards, you know, someone who made this millimeter precise calculation taking into consideration so many different constraints. And as I said, I do a lot of these Lego builds these days. I'm a pro at Elsa's castle. I'm also pro at Peppa Pig's house. And I love to challenge my daughters. This is actually what happens when you have two engineering parents.
So I love to ask her questions. You know, it's like, so she's building.
She loves to build. And it's like, does Elsa fit there?
Okay, so we don't have more blocks. What do we do?
No, no, we cannot buy for your birthday. You can ask grandma to buy.
But this is the set that you have for now. So this is the discussions we have when we build. And I love imposing those constraints, those requirements to her because I learned throughout my career that I get more creative the more constraints I have. Because this is something that makes me think outside of the box. This is something that gets me, you know, drop old school approach. Okay. This was done this way for a long, long, long time. But how about we try something else?
How about if we cannot use the middle piece, maybe suspension bridge is the option. Could you please raise your hand if you ever crossed something so sketchy like this one? Yeah, that's awesome. Okay, so 2018 Enos in Malaysia is not the only was feeling adventurous as well as slightly crazy. Like halfway through thinking, why am I doing this?
So this is how it kind of starts.
And then we progress into these ones. We progress into these amazing ones that are again, as I said with the previous one, they're just beautiful.
I think these ones are beautiful. So what is really, really interesting is how we came there, how we came from this dodgy bridge to this beautiful big bridge that, you know, we'll build today. I'm not an expert And I have been talking about this for quite some minutes now. But let's go back to the fact that we considered few constraints. We considered the first ones a problem. We had a problem where bandit had to cross to the other side. So we considered his problem, we tried to solve it. But there was this first question of do we even need a bridge? Can we offer him a different solution? I don't know, Fairy, maybe a set of stones? How can we approach that part?
And then actually from there we see the terrain, we see what user needs, and then we also see can we actually do that?
Do we have the technology to build that? And do we actually have the resources to build something like this? So this is kind of the first set of constraints that probably happen quite early on.
And then the ecosystem appears, then appears this other kind of indirect impact that this can have on because of course, other than having situation where he needs to cross the bridge with his car, maybe he needs a bike as well. Maybe he needs our bandit.
Of course, maybe he needs as well some lights if it's dark.
So these are all users, users needs.
But there is more than just meeting the user needs because we have boats, we have boats that have been going down this river for a while now. So if we build this bridge, there is another constraint to consider about how high, how long these boats have been going here, how deep is it, can they actually pass? So there is again this indirect impact on someone else. And then there is another layer from the people that are not even that visibly impacted. Let's say an elderly couple who has a house on the riverbank for 50, 60 years. They are used to come there, sit, drink their coffee and all of a sudden it's a building site for two, three years. I come from Croatia, at least 10. So it takes a while to understand all of the people that are impacted. So there is not only the user that has to be considered, but everyone around him. And then there is another layer, another invisible layer which is the nature.
How are we going to impact the riverbed if we put this middle post inside of it?
How are we going to impact the bird migration? How are we going to impact all of that? So solving this very simple problem is in case not that simple. It actually gets many, many layers the more constraint we keep adding.
So now I'm going to stop about the bridges because we're not here to talk about bridges, we're here to talk about web.
But many of you here have been building for web for many years.
So hopefully you have already started drawing some Parallels about these constraints.
And if not, I want to ask you some questions. I want you to think about the latest projects you did, the latest web project you were building.
What constraints did you have? Did you think about them?
Did you think past the users? Because a lot of us here have been thinking about accessibility, about web performance for a while, and this approach for user has been absolutely amazing. However, have you thought slightly more than that?
If you think your project as a bridge, would you dare cross it? Would you dare cross that bridge that you built? Would you dare if that was.
If we build the web, if we build a bridge the way we are building the web now, how would that be?
So let's talk web now. I've been building websites for over a decade now, and I'm actually very happy that I got to start kind of the right way. So I'm an engineer who started building front end. I fell in love with the front end because it moves and there is a lot of technology and it's very fun. And then you have to center a div and everything goes to waste. But over the time, I was again very, very lucky that my first project had accessibility baked into it. So that was one of the main requirements. So this is, you know, for me, the good way. So I got these constraints very early on. I get to learn, you know, to add these very important constraints from basically the beginning. And then halfway through, web performance came into my life and it added more constraints.
It added these layers, you know, of different devices, of different. And it taught me the mindset of putting the user, of putting the user first, of thinking about real people that are behind there, not just screens, not just devices, but actually who is using them, about the bandits out there who have to use that on many, many different conditions and with many different constraints.
But then in 2020, something changed.
Something where basically one slide changed the trajectory of my career. As I said, 2020, which means I was at home.
It was December, I think, and I was watching a Talk on Modern JavaScript on Google Dev Summit and this slide appeared. So they were discussing amount of JavaScript, how much unused JavaScript there is, which anyone who ever audited websites, you know that. And then this appeared.
And this was the first time when I saw this planetary boundary introduced in web development.
And oh, down the spiral I went.
So I started exploring. Okay, wait, wait, wait, wait. It's so logical. Of course it makes sense. No, because we have Internet, which even though this cloud propaganda didn't really help us, because a lot of people who are not in tech Have a feeling that the cloud is just there floating. And a lot of times they're not even aware that it's very much physical. So all of these devices that create Internet use energy. And of course to use energy we need still to burn a lot of fossil fuels. And then to use these devices, we need to mine, we need to create them, we need to disassemble them, we need to put them somewhere. And when we talk sustainability, a lot of times there is this idea that digitalization is what's going to help, what's going to save us.
But it turned out that it's becoming a part of the problem because it started scaling, it started growing fast and fast and fast. And of course, as I had some of the chit chats about this topic now around, a lot of people ask me, are you going to talk about AI? I was like, well, I don't think there is much to emphasize here other than, yeah, the demand for electricity that we have has been increasing exponentially.
And unfortunately, our society is trying to achieve this infinite growth on the planet with limited resources.
So there is so much devices that we can build, there is so much metal we can extract, and then there is so much data centers we can build. We're going to run out of water or metals or land at some point in time. So there is just no infinite growth, which is a constraint. And researching about this topic led me to sustainable web design, led me to few other enthusiasts about the topic who have been there in a while. For a while. And basically I saw this. You know, it's just an approach to designing web services that puts people and planet first. So I was like, okay, yeah, we've been doing people for a while, so planet cannot be that hard. Oh, was I wrong?
So there is why I talked about bridges, because again, throughout the centuries these were, you know, progress, these constraints were building. So my favorite way to learn is on other people's mistakes. So hopefully we can use some of the other especially engineering practices to kind of fast track some of our progress. But when we think about constraints on the web that follow people and planet for people, I think it's quite straightforward.
A lot of them, you know, we're already doing it, especially as this amazing web performance community. We've been thinking about users for a while of their needs. What Bandit really needs accessibility.
We're finally on the side where accessibility is a law.
Yay. I'm so excited about that part.
And then comes these extra considerations.
Of course, then we have the extra part of people.
Because not only the user that we have been trying to optimize, the history showed that a lot of times when we are building for users as much as we're trying to optimize for some parts of lets us down some, maybe a bit different path. I think social media is a very good example of that. Where it was built for a reason, to solve a simple problem of actually connecting people. But it turned very, very tricky. This is now maybe some ethic talks that can be a full talk by its. How does this affect people? How what we build affects users?
How does it affect people around them? The people who are not even connect with them and the people who don't have a choice because the elderly couple on the bank of the river where the bridge is being built, they don't have a choice and they probably don't need a bridge because if they lived there for 50 years, they probably have a boat they just use to cross.
So a lot of this is about trying to, to consider the invisible layer.
And then of course the planetary boundaries come. So we've discussed that a bit. And there is of course from carbon emissions to water. There is this amazing website that is kind of written from AI perspective and it's kind of shaming people for drinking all AI's water and using all of AI's resources and all of that.
So it's actually quite, you know, funnily explains this issue of the fight for resources.
So going through this we realize there is a lot of constraints happening here. But one thing that wasn't really clear is what this actually looks like. So we're building for people and planets. What are we building? What are these constraints?
We can talk about them generally. People, planet. Yeah, all good. But what is this? Look a bit in practice. So I think two years ago now I joined the W3C community group for Sustainable Web. And at that time it was I think 70, 80 people just kind of discussing this topic, you know, sharing some resources. I actually remember the naiveness I had like seeing the list of resources which was around 50 or so, you know, two books and like a couple of links and I was like, oh, I may actually read through all of this. Spoiler alert. I never did. But it luckily grew exponentially. However, at that point it was just a group talking about this. And soon we realized that in order to preach for this, in order to get people to adopt it, we need to define it and W3C. You know, most of you have heard about W3C, the World Wide web consortium who has defining standards, all of what good looks like what a standard looks like for the web. So that was a kind of good place to be because they're the ones who defined what performance looks like, what accessible look like, what ethical, safe, what does that look like? So we took a wild, well, not a guess, but wild science backed approach to trying to draft a document that would show what sustainable looks like. Because we knew that at this point we need something, we just need something to hand it over to everyone who's building the web and hopefully have you tore it apart so we can rebuild it, thinking about many aspects, taking so many years of expertise into account and see how we can fast track figuring out, uncovering all of these constraints that are actually there.
So on August 30, 2023, so almost two years ago, we actually published the first version of web sustainability guidelines.
I'm not going to go much into the W3C organization because I'm still trying to figure out some of these parts myself. But basically this document is nothing very official. It was again just a draft that we tried to kind of set it up and it was amazing to see how it progresses. So as I mentioned, we were community group.
Right now I'm chairing interest group that's basically one level up which allows us to be under W3C and this also allows us to prepare this document which is now for anyone who may know this terminology, a note. So hopefully we get it a note which would have it be backed by W3C, which is a huge thing because being inspired by accessibility, by what accessibility community achieved, trying to get this in front of the legislators, trying to get some regulations for technology, which goes extremely slowly, would be a huge win in order to have some of this adopted.
So let me actually show you how one of the guidelines look like. So we have 93 of those, there is 300 pages. So it's a pretty lengthy document and I think I saw that around 100 people already contributed to it. So this is open source, you can go to GitHub, of course, after you read through this, you can go there and offer any, any please constructive criticism about this and give us your opinions. So I just chose Guideline 2.15, Optimize Images for sustainability. And again, spoiler alert, a lot of what sustainable looks like, it's also what performant looks like. So when I realized about this topic, I was so excited about it because I realized I'm already doing a lot of these things. So that was kind of a very, very rewarding moment. So thank you, thank you all who have Been doing this for years because you have been kind of saving the planet by removing JavaScript.
So each guideline has a success criteria. And you can see here from the way we thought about the bridge building, solving problems, we start with need for images. Do we really need this? Then we go into optimization, into even deactivation, how we maintain it. Again, this is just an example for you to see how this looks like. Then we provide you with benefits because every constraint offers are something of course it's there because some boundaries, but then it also implementing this situation, like implementing images the good way, the way that we consider to be sustainable has a lot of benefits. We did this because a lot of us who worked on the guidelines, worked in accessibility, worked in web performance and we know how hard is how much we are fighting against the wall to actually get people to listen, to get these prioritized, to get them like, you know, all the way up from the end of the backlog, to actually understand that these are important, that these are important, of course in accessibility and web performance, these are important for people. But now there is another layer.
So hopefully some of this may help you out with advocacy about these topics and help you show some of the stakeholders that we can actually go beyond that. It's not just the people that we are designing for that we are also designing for the planet.
And with that in mind, we also try to align it with some of the reporting because if you have been following some, you know, of course news and things like legislations, on the level at least the European Union, there's a lot have been going on and digital has been kind of slipping under the radar for a while, but that's changing.
Hopefully that will be there soon.
And the more and more discussion is happening about the digital because a lot of companies are fully digital these days. When you think about insurance companies, they do most of their stuff digitally. There is maybe here and there, a few bankings as well. So there's, I don't know, branches here and there. But generally they do a lot of things online now. So when you report your carbon footprints, know, your energy use, your water use and all of that, actually the digital is the one that's soon going to have to be reported as well. It cannot be stuffed under this very big carpet anymore. So what we're trying to do is already prepare this document to be set up in front of the legislation to get some traction and to get some help with making this something more and more official. And here comes the biggest challenge we had so far, which is measuring A lot of you, of course, working in web performance know how important measuring is, you know, because this is what helps us prove.
This is what also helps us see the relativity of what we're doing, the impact.
And as we discussed people and planet and all of these invisible layers that happen that we don't even know these, these constraints, you may imagine how hard is to put a number on something like that. So I guess some of you have seen stuff like this, these kind of CO2 calculators. Have you seen something like this?
Can you raise your hand? Okay, about a third.
So these have emerged two years ago and there was also, I think maybe two years ago already. Oh my God, two years already.
There has been a debate about this inside of web performance community as well, like do we do this or not? And to be honest, I don't really have a proper stand. My proper stand on this is a typical. It depends. But let me kind of just give you a brief overview why this was so why is this so debatable?
So when we do something like this, we use models because web in itself, it's a system, it's such a complex system of many, many, many interconnected devices.
And in order to get the proper number, in order to get the proper CO2, we would actually need to know how much CO2 every single device of every single person emits while using it and while being produced and while being disposed. So you can see how complicated this topic can be. And as Tim said as well in the beginning, this topic is emerging. There is more and more talks about it. So there is more and more research happening on it as we talk. There is probably, well, not probably for sure, more research happened. And as that happens, the models keep evolving. But the models we have at the moment, there is a saying about models, all models are wrong, some are useful.
So this is wrong 100%. This is not a question. We're not never discussing how wrong this is. The question in hand is like, is it useful? Can we actually make this useful?
So it depends here.
What's happening is that these models that are used in calculators are using proxy, so they're using bytes transfer as a proxy for carbon. So maybe you can see already where the issue appears because not all bytes are created equal.
So let's say that you're calculating something CO2 off a website and this website was loaded from cache, gives you a zero because the transfer never happened.
However, if we loaded this heavy JavaScript from cache and if we are processing it, it will be way more energy intensive. And by this dirtier perhaps unless you're in Iceland, which have clean energy, so you can do whatever you want. But in this case, if you load for the first time a very light site, it's going to show more CO2 than the other one.
So this is one of the first, one of the small issues we have here and that is someone actually who used this on a client project.
I was consulting a client on web performance and sustainability and we added this to it.
I was very, extremely careful to include all the fine prints, to include how tricky this is.
However, after the first presentation I did, they wanted to send it in their newsletter, which is a serious case of greenwashing, which is a law which can cost you a lot of money. So basically putting this in front of everyone can be slightly dangerous because if not used with a lot of care, it can actually create fines. So from a perspective of development, I do use it occasionally, especially Ecograder, because Eco Grader was made from idea of Lighthouse just for sustainability and it gives you a lot of not only carbon, but it also gives you a lot of whys and it gives you a lot of similar way the Lighthouse does low hanging fruit, it gives you why the score happens. So here on this one you just kind of see, see some basic stuff, but there you actually get a lot of things. So if you want to make your website sustainable, you can actually go to Eco Grader, do this audit and see what it comes up with because ignore, please don't report anywhere the amount of CO2 emits. But it will give you the strategies it would give you like these constraints and everything how you actually can make this less, less carbon intensive in this situation. There are also some more progressive situations where we have like inside of the Firefox profiler there is an energy. So with this energy we don't have to do as much modeling. So actually putting a CO2 on this, it's slightly more correct, still very wrong.
But it gives us also kind of this sneak peek that it's happening in very, very small pieces. So organizations such as Green Software foundation are working on this topic and they're working on for example Energy Impact Framework and different ways to figure out how to measure and how to actually put together this small, small, small stuff around. But this keeps being one of the biggest challenges.
This is kind of a call to action as well to think about it. There was a Great talk by Brian 2, two years ago as well about, you know, kind of plea as well to the browser vendors to help us out, you know, exposing Some of the data that we could use in order to calculate to give us more precise calculation here.
But some of the question here is like that we are still not completely sure what we need in order to get that.
Because, you know, how are you opposed to if we build a data center and then we impact birds that were living there, how do we put a number on that? So there is still a very, very tricky point. There is very, very a lot. But there's still a lot of stuff we can measure. Starting from when you see the guidelines themselves, they have few different sections. And section about web development kind of goes very easy. Is the CSS minified?
Are the images optimized? It's kind of very easy to put check marks and to measure some of these things. But then for example, the section about product design and business strategy has the question, is this product supposed to exist in the first place?
How do we justify that? This is a very hard thing to justify. So yeah, it's a huge work in progress and the more hands on deck, the more, the more thoughts, the more fresh perspectives the better.
So the last part of this is can we actually put it into practice?
Can we do something about it? So we cannot really measure it yet. We can measure pieces of it and we can go to the guidelines which can educate, but can we code?
Can we do something fun with this? And I think we can. So the way I see, you know, this progressing because for me sustainability is about these constraints. It's about people and a planet. It's not about oh yeah, this is how much carbon. It's just about having this bigger picture and kind of making everyone happy, which is something we can do with a very kind of quite well, not very old, but fairly old pattern. So it's nothing new, but it's something that a lot of time I see not implemented much or maybe let's go with the. Well, so most of you know about progressive enhancement. It's a pattern we've seen from emerging of the responsive design before we had that like a mobile site and a desktop site in parallel. So as these different screens started emerging, we realized it's impossible to keep so many sites in parallel. So we started doing responsiveness and it could go the two ways. No progressive enhancement or graceful degradation. And actually a few years ago with my team in a company I used to work for, we started working something about this topic. This topic was kind of introduced as well to me by my ex colleague Fabian. And it's the mindset I adopted so far and kind of worked on Top of this, because it makes so much sense. Because when you think about it, the way performance work, the way we want, the accessibility work as well, the way we want to make everyone happy is we need to take everything into consideration.
And the best way to do that is to offer the 1991 version, offer just the basic plain content.
Because a lot of people still come to web the like.
Why do you come sometimes to the website? You come for the content, you come for information and then you get bombarded by a lot of these extra things you never ask for really. So what I'm kind of trying to say here is that respecting user choices as well as conditions is a kind of first layer where we can go towards using the progressive enhancement as kind of the build strategy.
So we start from something very simple and then we start layering on top.
So if someone really, really just wants to read the text, they can just get the text and then we can offer a whole range of possibilities. You know, to think I had to fight one time, which was an animated GIF of a raccoon blow drying.
It's here, five megabytes in the hero image.
Maybe someone wants it, I don't know, I'm not judging here, maybe someone wants it. But in the end of the day, this is something that harms a user, it harms the planet. And I'm not really sure who it benefits other than the person who maybe designed it and got a lot of money for it, I don't know. But offering this range of choices, respecting the conditions people have, respecting what users asked us to provide, is something that can have especially monetary as well long term consequences in a good way.
So one thing that you can see here are just some of these options that users can actually set up so you can see, prefer color scheme, the dark mode, white mode, we have preferred reduced motion connections. So all these information we have, but very, very few sites respect them and actually worked around them. So if we check some of the data from 2024 HTTP Almanac, we can see that only 12% of websites actually implements the color schemes.
And that was for me, when I saw that it was wild because it's such a basic, you know, it's. I don't think that's a very hard thing to implement. And then as someone who.
As well. Four years ago when I became a mom, I started using my phone a lot during the night in the dark.
And this was the moment when my preference for dark mode stopped being a preference. It became a necessity and very, very fast. I discovered brands that do have a dark mode available and the ones who don't. And one pro tip about nursing moms, we online shop a lot at night.
So any brand that didn't have this dark mode lost my business. And again, it's such an easy thing to do. Just respect my choice, respect what I ask you to do. And actually it's very cool to see that hopefully due to know this is from accessibility chapter. So preferred use motions is the one that can be, you know, dangerous. It can be.
It can trigger some conditions in people. So seeing that this is at least on 50% but there's still 50% of websites out there who don't really care about triggering anything in their users about again respecting the choice, they add on top of that and then planet comes in. So there are as well very interesting applications such as electricity maps that provide us with carbon intensity.
Carbon intensity is how clean or dirty the grid is. So you can see here, I took this screenshot two days ago here in Netherlands. You can see at that point in time some have real time data, some not real time really some have less real time data.
There is actually a great talk on how they do this that I can share with you as well. And the hoops they have to go through to consolidate all of this data is absolutely amazing.
But they do it great. And we can see here that depending of course Iceland is always green. So of course if we just all move to Iceland, I can just stop talking about this topic. And we're all good, but the most of the world is not really. So we all depend on sun, we depend on wind, we depend on all of that to give us clean energy.
And of course with emerging of AI and with this electricity, the need for electricity skyrocketing, they cannot follow that. They just cannot follow the amount of energy we need. So with electricity maps we can see what's the situation. So how clean or dirty our grid is in Amsterdam right now and there's an API which basically allows us to change our websites to enhance our website depending on current conditions of a user. So there has been a project about that from Green Web foundation that was released actually a few weeks ago. It's an open source project as well.
So you can get this boilerplate, you can go and play with that. So they have this branch magazine which is also a great read with a lot of more resources about this topic and about a lot of mindset behind that. And as you can see here the top, I also did this screenshot right after the other one.
It gave me this medium version of a website.
So I was Netherlands, they declared my local grid around average emissions which gave me this.
I can of course override it, which is again something I consider very important is to allow users a choice again to allow users to override if they don't really, you know, want something. So these are actually three options that they offer. No. So they did this in the progressive mode.
This is at this point kind of based only on carbon aware. How it works is that it checks using electricity maps or there's few similar ones like that API on the edge in the worker. They use that to check for the conditions and then they serve the different version of the website.
So in case of of course very dirty network, you get for example no image, you just get this alt text. In case of the medium, which I had yesterday here, I guess it was cloudy, I don't know what was the wind situation, but it was the medium one. And then of course in case of Iceland, you get always the one, the green, the one with the most, you know, the one where us as a developers, we can also have a lot of fun and maybe put the raccoon in if you're crazy.
So this is something I believe can make everyone happy from people from planet and allow us to work around these constraints and allow us to respect all of these different boundaries. So with that I have few well call to actions for you. First one is the guidelines. Now if you go to this link over here, you're going to go into the notes, something that we are actually trying to publish but by April next year, which is the Earth day, so we are in a place where we are reviewing them, trying to find some gaps also. Now the hardest part comes the measurability task force is going to come in right now and try to do the basically the impossible part, which is try to come up with kind of impact scoring. And it's going to be imperfect, it's going to be wrong, but it's going to be progress. It's going to be probably better than what we have for now. So I encourage you to go there to check it out, to give us feedback and as well I encourage you to check out the progressive enhancement carbon awareness to try to play with this and to try implement some of these user choices in the size. There is a lot of work on the dark mode.
We can start with that and then progressively as well work with all the other ones back to our bridges. Internet is not in isolation. Internet is there to connect us all and something I do here can actually have an impact to someone, you know in Japan. It can have an impact to someone who never chose this, who never, you know, had any opinion, who never had any seat at the table. So we need to respect the boundary, we need to expand the boundaries and build Internet like we built the bridges. Thank you.
Thank you. Yeah, if you want to grab your water, we'll got a couple more here. Couple questions for sure. Yeah. This is such an interesting space. Interesting time to be in that space too. I always feel like, you know, the going from zero to something is the. It's the most difficult part. There was a question around if there is any sort of. We keep going back to this, to the legal thing. This is a legal crowd, but yeah, but going back to like, are there any progress or efforts around like getting the EU or anybody else to sort of adopt some of these sustainability guidelines as compulsory or anything like that? So we're working on that.
We are actually working very intensively on that part. So there has been some of the. So there's your opinion union, there's European Commission, I am trying to wrap my head around that part as well.
Who is the right person to talk to. So there are some ideas, you know, who to reach out. But currently what we are trying to do.
So next actually next week is TPAC which is the yearly conference of the W3C. So it's in Japan.
So I'm not going because my husband bringing two kids with me to Japan was a bit of a stretch. So we're not doing that.
Next year is Dublin. So I think I can, I can get them up for that. But basically a lot of people know, some, some of, some of my other co chairs, we also have the kind of sustainability lead working with us. They're going to be there and we already scheduled a lot of sessions with other as well groups. So we're going to have the session with performance working group, of course, with Access Disability working groups to see how we can interact, to see where we can go and how we can prepare this document for the legislation.
Because we've been trying to put this as well. You know, I had this joke where, you know, I always say like this is not a beach read, you know, so reading, you know, standards is not the easiest thing to do. It's not something you. Well again, no judgment. Some people maybe do it for fun but I personally don't.
So it can get like hard. Especially of course if you are a non native speaker. It's not that easy thing to do. And we've been working on that, however, the guidelines are targeted towards standardization.
They are targeted at this point in time as well, towards implementers and hopefully legislators. So this is something that we're trying to prepare them for in order to bring them, you know, to start these conversations with European Union and see where we can go from there. Because, no, there is this green deal. There is also this report reporting CSRDs. There is many of these things happening, but we still have to see where do we fit in, who do we have to kind of, you know, like, pull their sleeve and kind of put this on their tables? Because, of course, accessibility is there.
It's. It's so amazing. What was June 28, I think it was.
Yay. So, of course, with learning from there, we would very much like to go that direction. Of course, right now what we have is the green greenwashing.
So very, very careful because there have been a lot of companies, especially for example, the aviation companies that already got fined. I think actually KLM was one. They got fined because they were saying, you know, we are greener than this one and we are. And you have to. To be very, very, very careful. You know, what are you comparing yourself to? What are you saying? How are you saying in order not to say something that's not really true? So this is also the part that has to be navigated. Right. But this is one thing that's there. There is also something called the digital passport for the product. Digital product passport.
But, yeah, they're very lengthy documents. So we are trying to figure out how we fit in and how we can align with that, if that's. If that's helpful. Yeah, I think there's a lot. There's obviously a lot of work to be done. I love the analogy of sort of the progress of the bridge, though. Right. It's like not getting too caught up in having that perfect answer yet. We have to work our way towards that. So is it safe to say folks can come up to you and chat a little bit about anything around, like the guidelines themselves or the metric task Force, if they enter interest? Yeah, absolutely. So here you go. Like, I'm happy. I'm not, like, super responsive these days because there is a lot of things. But yeah, please, please, of course, reach out to me for any questions for anything about the topic. And of course, like, please, like, give us your opinions. We really, really need.
Because we are all the ones building this thing and we need more, you know, like, we need this every time we talk, especially, you know, about inclusivity itself on any perspective. No, in a workplace or, you know, about building infrastructure. No. There is this great book, it's called Invisible Woman, and it has it's saying how a lot of infrastructure was not adapted to women and how they function because they were not people who were building these ideas. For example, Metro, so there was a ticket for a metro that you go in and go out. And the way a lot of women, I think it was in Britain function is that they do a lot of small trips. So they go to the kindergarten, they leave the kids, then they go, you know, do some shopping, and they basically then have to buy four different tickets instead of one hourly tickets. So basically, we need this inclusion. We need all of your perspectives on web, because this is such a, such a complex and huge topic. Awesome.
Well, thank you so much. Appreciate it. Thank you.
- W3C Sustainable Web Interest Group
- Web Performance
- Accessibility
- Modern JavaScript
- Unused JavaScript
- Digitalization
- W3C Web Sustainability Guidelines
- Optimize Images for Sustainability
- JavaScript Removal for Performance
- Carbon Footprint Reporting
- CO2 Calculators
- Eco Grader
- Firefox Profiler Energy Impact
- Green Software Foundation
- Progressive Enhancement
- User Preferences (Dark Mode, Reduced Motion)
- Electricity Maps API
- Green Web Foundation
- Progressive Enhancement Carbon Awareness
- European Union Green Deal
Performance work has always been about speed, but speed is only part of the story. This session explores why faster sites are greener sites, practical principles from the W3C Sustainable Web Guidelines, and ideas like carbon‑aware websites that adapt to grid intensity.







