Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o...

Ow! Hey! No! You can't... I'm not even through the Shop-o-maniacs part. You can't come in.

No! Ow!

Chris Coyier: [Laughter]

Dave: [Speaking with an elderly Jewish New York accent] Hello, Christopher. It's me, Senator Bernie Standards, and I'm here because, of course, you know I want to get the billionaires out of the JavaScript ecosystem. But today, I want to talk about a green, new deal for the Web.

Chris: Okay.

Dave: [Continues speaking with an accent] It's very important. [Laughter]

Chris: I remember voting for you in college, Bernie Standards.

Dave: [Continues speaking with an accent] Thank you very much. [Laughter]

Chris: Yeah. [Laughter]

Dave: [Continues speaking with an accent] Well, that's all. I hope there's some good Web sustainability-related content today. But now I have to go back to Congress. Uh... The Senate.

Chris: Hey, don't forget your mittens.

Dave: [Continues speaking with an accent] Oh, yeah. I'll never forget. [Laughter] The Internet won't let me forget. Goodbye!

Chris: Goodbye.

Dave: Wow. Hey, wow! Senator Bernie Standards.

Chris: What are the chances? What are the chances?

Dave: Just really wanted to come. Hey, Shop-o-maniacs. Thanks for listening. This is ShopTalk. That was unexpected.

I'm Dave. With me is Chris. Chris, who do we have in the studio today?

Chris: Well, we didn't have anybody. But now that Bernie wants us to talk about Web sustainability and stuff, I guess we'll just... Let's call up... boop-boop-boop-boop--

[Laughter]

00:01:33

Chris: She's down to do it. Okay. Okay, in the studio now, all of a sudden, Michelle Barker. Hi, Michelle. How are you?

Michelle Barker: Hi. It's great to be here.

Chris: [Laughter]

Dave: Thanks. Thanks for coming in at the last minute notice. That was just unexpected. [Laughter]

[Laughter]

Chris: Yeah.

Michelle: I kind of want to get Bernie Standards back. I think we should at the end.

Dave: Hey, if you put on a Web sustainability conference, I'm sure Bernie could make an appearance.

Michelle: I hope so.

Dave: I bet that could happen. [Laughter] I guess maybe we need to introduce you, or maybe you can introduce yourself. Tell us about... For those who don't know who you are and sort of what you do, can you give sort of the Michelle elevator pitch? Is that--?

Michelle: Sure. I'll do my best.

Chris: Michelle-o-vator.

Michelle: Oh, my God. I love it.

[Laughter]

Michelle: Yeah. Oh, there's no pressure then. It's always the worst thing talking about yourself. But this is the bit when I'm doing conference talks. I just skip over this part as quick as possibly can.

Dave: You skip this part?

Michelle: Yeah, so I'm a front-end developer at Ada Mode, which is a small company here in the UK. It's a data science and AI company focusing on making industrial processes more efficient. I do that for my day job. Much of that job is building a Web application for wind turbine operators, so it's kind of a data visualization platform for people operating the wind turbines.

As you can imagine, if you're operating wind turbines, it's super difficult and super expensive and dangerous to send somebody up a wind turbine to fix it. So, I deal with... The software that we're building is that it's going to help people diagnose problems more easily and be able to target maintenance and that kind of thing.

Dave: You don't send people 200 feet in the air for fun.

Michelle: Yeah.

[Laughter]

Michelle: Hopefully, bring down the costs of getting more wind farms.

Dave: Wind maintenance, yeah.

Michelle: That's what we all need. But yeah, so I do that for my day job. Also, some of your listeners might know my blog "CSS in Real Life" where I write lots of things about CSS, but also Web development in general, and sometimes not Web development. Sometimes just general life and technology and moaning about stuff. [Laughter]

Dave: Yeah. You had that... I feel like it was just a while back, you were kind of like, "How big is the fourth wall?" I guess, between my life and technical articles and stuff like that. Did you ever settle on a line there?

00:04:20

Michelle: Not really. I want to want more personal stuff as well, but also I feel like the title of my blog is kind of about CSS. I need to keep it a little bit focused.

Dave: Ah...

Michelle: I'm still weighing out the pros and cons of having a whole separate site where I have to have a whole separate blog and write even more blog posts. I don't know.

Chris: So tricky. But you do have a personal site already, so you could use it for that. Yeah, that's tricky. Nobody wants to be the one to tell you, "Hey, don't. Don't blog about yourself." How rude is that? Of course, you should be able to do that. But I get the pressure to just keep it on topic, like you said, kind of because of the title - in a way. It would be pretty weird to have that be a movie review blog all of a sudden - or something.

Michelle: Yeah, for sure. Also, I kind of think sometimes I write a post when it's not to do with technology and not to do with CSS and the Web. I think, actually, the act of writing it is part of the sort of catharsis in itself. I don't really need to share it with the world. Sometimes I can write something and it's just for me.

Chris: Yeah.

Michelle: It's like my own journal.

Dave: That's the best. I have a dead pool column in my kanban of articles, and it's great.

Chris: Not the Marvel guy, just a pool of dead articles.

Dave: A pool of dead articles, a graveyard, and I love it because I get real worked up about Smartwatches. "Ah, man. I've got to thought lead on this one!" you know? And then it's done. Then it's drag it, goodbye. I don't need to talk about that. [Laughter] That's...

[Laughter]

Michelle: Yeah.

Dave: It's kind of cool. It's interesting.

00:06:02

Michelle: The best one I wrote recently was I wrote an article for MDN about Web sustainability. I'm really sorry if the person involved is listening to this because it's probably super embarrassing for them.

Somebody wrote me an email and basically mansplained the entire article step-by-step, like, "This is what you're doing wrong," and all of the steps. And I wrote the best blog post of my life. [Laughter]

Chris: [Laughter]

Michelle: Which will never be published.

Dave: Good. Yeah. Okay.

Michelle: I just had to get it out. I was like, "Yeah, here is my reply to you."

Dave: Yeah.

Chris: Oh...

Dave: I feel like we all need Patreons to unlock those good ones.

[Laughter]

Chris: Yeah. This is just for the three of you that support me - or whatever.

Dave: Yeah.

Michelle: Yeah. On the whole Patreon thing, I feel like a lot of people now have blogs and have the Patreon and try to kind of monetize it a little bit. I don't know how much experience you guys have with that because it's always been something at the back of my mind. It's like, "Oh, should I be trying to do this a bit more? Should I be asking people for money?" because I don't want to have ads on my site. I just removed the ads that I did have, which were bringing in hardly any money.

Dave: Two whole dollars a year, yeah. Yeah.

Michelle: Yeah, like a couple of coffees.

Dave: Yeah.

Chris: Mm-hmm.

Michelle: Yeah, I don't know if I want to monetize it at all, but I'm interested to hear your thoughts if you've had much success with that kind of thing.

Chris: We do it in this podcast.

Michelle: Yeah.

Dave: For the Discord, it's floated the podcast for the last year, for sure, as we scaled back ads. That's wonderful people, but I'm with you. I hate credit cards, so if I'm charging money and now I'm responsible to pay taxes on that money, I've hurt myself. I've injured myself and no amount of money can fix that. That's a weird thing for me.

But I think the younger generation, they're like, "Yeah. You just charge people money." [Laughter]

Michelle: Yeah.

Dave: If you're ten years younger... I think you're probably already ten years younger.

Chris: Oh, yeah. You'll flip those switches all the time. Yeah.

Dave: Well, it's just like, yeah, I think people are just like, "Yeah, pay me. I put content. I do content. Pay me."

Michelle: Yeah. But isn't it less fun when you're doing it for money? That's what I always find.

Dave: Oh, maybe. Yeah.

00:08:31

Michelle: If someone is paying me to write an article, then I immediately don't want to write that article anymore.

Chris: Oh, I totally get it.

Dave: Yeah.

Chris: Yeah. It is actually motivating for some people. Handing money is a decent carrot sometimes, but not for everybody. It really can be demotivating.

I had one minor story there of when, ages ago, I did that CSS-Tricks redesign where I kind of quit my job and was like, "I'm going to screencast the whole thing. Just back me on Kickstarter." Then I'll do all the work and deliver it to you as a bunch of videos or whatever.

I found it, maybe like you would feel like, kind of demotivating, like, "Oh, crap. I've already been paid for this work." I got it done. I felt obligated. But it didn't feel right. You know?

Michelle: Yeah.

Chris: I much prefer the opposite way around, like, if I do a good job and I work really hard, then I can have some money. Not like, "Here's a bunch of money. Now you owe me."

Michelle: Yeah, for sure.

Chris: The reverse of that.

Michelle: Yeah, I think I remember when you published that as well when you were doing that redesign. Yeah, I don't know.

Chris: But here's a tiny little piece of advice. I was pretty strongly opinionated when ShopTalk Show decided to do our Patreon in that I don't want to promise very much. In fact, I almost want to promise nothing at all.

Here's what you get for backing ShopTalk Show on Patreon. Nothing.

Michelle: [Laughter]

Dave: Chat room. Discord. Discord. Discord.

Chris: Yes, that's what you get now. I don't even think that was a compromise. That's fine because that's pretty close to nothing if you ask me. We don't say, "You are promised five engagements per month," or anything like that. It's just like, yeah, we all chat in there. That felt good to me because it doesn't require any work, necessarily. It's just enjoyable. We just chat with people in our Discord. But I was really... I could not promise you a bonus episode or something. I can't do it.

00:10:29

Dave: The only thing we promise in the ShopTalk Discord is if you hop in the gear channel, like the, "Hey, what's this cool tech?" and you say, "Should I buy this?" we will convince you to buy it.

[Laughter]

Dave: That's our only guarantee at ShopTalk Discord. It's the only guarantee is that we will talk you into a purchase.

[Laughter]

Michelle: I think that happens not on Discord but maybe on Twitter (back in the day or something).

Dave: Yeah.

Michelle: When I was thinking about buying a drum kit in lockdown.

Dave: Oh, yeah. Yes!

Michelle: I said it on Twitter, and everyone convinced me to buy a drum kit, and it was the best decision of my life.

Dave: Oh, great.

Chris: That's great. Yeah, can you imagine people replying with, like, "No! Save your money."

Dave: You'll never be good at drums.

Chris: [Laughter]

Dave: Yeah. No, it's like, "Buy drums." You saying, "I want to buy a drum kit," makes me want to buy a drum kit.

[Laughter]

Dave: It's like--

Michelle: Let's everyone buy a drum kit.

Dave: It's reflective. Yeah, it's just like, "Why don't I have drums?" Yeah.

Michelle: Yeah.

Chris: Oh, that's great. Yeah, that's a part of your... That's part of your life. Still drumming?

Michelle: Oh, yeah, absolutely. That's probably why I'm not writing as much about CSS anymore because I'm spending too much time drumming.

Chris: Hell yeah. That's a perfectly fine tradeoff, I think.

Dave: Do you play in a band or anything? I should know this, but do you?

00:11:47

Michelle: I have a very kind of low-key band.

Dave: Cool!

Michelle: It's just for fun. We're not doing any gigs or anything. But it's nice to play with people.

Dave: That's fun. My wife played in a band and toured and stuff -- it was very cool -- when we met.

Michelle: Wow.

Dave: Then she was like, "I don't want to do this." [Laughter] "I hate touring," and then quit playing drums. And so, I'm like, "Maybe I'll just buy her a drum kit. We'll just have it, and she'll have to do it."

Michelle: Yeah. Well, maybe it's more fun when there's no pressure, right?

Dave: I think that was it.

Michelle: Like we've just been talking about.

Dave: Yeah. Yeah.

00:12:21

Chris: For sure. I'm living it right now because I spent a lot of time. I have text threads with different musicians in town, and most of the time I play just in living rooms and stuff, and front porches and parks and stuff. It has this really fun, low-key vibe that I wanted.

It has since grown up a little bit. People are like, "Hey, you know, we booked this down at the bar. Do you want to come play?" It's like, "Ooh, that's a gig, isn't it?"

Michelle: [Laughter]

Chris: All of a sudden--

Dave: I have to put on shoes for that one. Yeah.

Chris: Yeah. [Laughter]

Dave: Yeah. Yeah.

Chris: I had one last night. I've got one tonight.

Dave: Dang!

Chris: I'm like, "Okay. It's starting to feel a little--"

Dave: Second job-y?

Chris: More serious, but in a way that I've got to be really careful about for all the stuff that we're talking about. It's got to remain fun. It's got to remain chill because - whatever. I made $11 last night, guys.

Dave: Dude! Whoa, buddy!

Chris: It's not going to... [Laughter]

Dave: That's like ad money. [Laughter]

00:13:15

[Banjo music starts]

Chris: This episode of ShopTalk Show was sponsored by Jack's Radical Design Course. That's radicaldesigncourse.com/shoptalk.

If you could lick a three-pound toad and magically become an incredible designer, would you do it? I would. [Laughter]

What if instead of an organic wart machine, it was a rebellious video course? And instead of licking it, all you had to do was watch it and follow along? Would you do it then, fair listener?

Well, this ad script that I was handed might suggest this toadless, wartless Web design course by Jack McDade (the creator of Statamic) is anything but boring. It will not teach you how to copy overused trends nor surrender to the safety of so-called best practices and cookie-cutter templates. Instead, it teaches you how to develop your own personal style, how to write content that will be remembered, how to use design to stand out in a crowd, and how to design quickly and efficiently so you can get on with the 71 other things on your to-do list.

Don't I know it, and I love Jack's style, too. This is good copy. He's an excellent designer, too. I'm going off-script. Sorry.

Yes, even though Jack wrote the script I'm reading to you right now, you don't have to take his or my word for it. Real customers of this course have called it exceptional, hilarious, and more life-changing than toilet paper. So, if you have the itch to build new skills and create something original, check out Jack's Radical Design Course at, again, radicaldesigncourse.com/shoptalk and use the code SHOPTALK (all caps) to save 10%. Prior design experience not required. Burnt-out designers welcome.

[Banjo music stops]

00:15:04

Chris: Anyway. Okay. Good stuff. Keep drumming. That's the best.

So, we promised we'd get into digital sustainability. I mean that's why we wrang you up. I mean Bernie Standards called, so I would love to talk about a bunch of CSS stuff, too. But I want to make sure we get to this.

You have put a lot of time in thinking and writing into this world. You do a good job of highlighting some points that perk my ears up a little bit. In one of your intros recently, you said that data centers in Ireland are responsible for 18% of all of the electricity in the country.

Michelle: Yeah, it's crazy.

Chris: It's that kind of moment where you're like, "Well, how big of a deal is this kind of thing?" Um... It's a fifth of all the power used, so I'd say it's a pretty big deal.

Michelle: Yeah, it's pretty crazy in those areas -- I think, even in the U.S. as well -- where they're using so much of the area's water supply. And people have water shortages for drinking water. You've got these data centers consuming vast quantities of water as well as electricity.

It's becoming more and more of a kind of scary issue, really. I don't want to get into the whole AI and crypto thing too much because there's a lot in there. [Laughter] But especially with those things as well, on top of everything else, it's just going to need more and more of these data centers.

Dave: It's a lot of energy, a lot of electricity and water, to run GPUs at glowing hot temperatures for a long time.

Michelle: Yeah, for sure.

Dave: I think we could all agree. Even if it was video games. That would be a very long time. That would be a thing we'd all say, "Maybe we need to play less video games."

Chris: Well, that last part is interesting that, Michelle, I think you've written about, is that a lot of it is garbage anyway.

Michelle: Yeah.

Chris: Now it's a fifth of all this power, but -- what'd you say -- 88% of it - or something - is data that will never be touched again.

Michelle: That was the article that I quoted, yeah. It was like 88% is spam and junk mail, stuff that is collected by companies, is never looked at or used again, sort of junk data. I don't know how we get around this problem of companies having this need for more and more data.

Is it even really a need? I don't know. It doesn't seem like they need to be collecting all this data. But they are, for whatever reason, and it's consuming more and more of the electricity.

Chris: Right. Right. It's easy to think of something like photos from 1994 in some hard drive that you'll never look at again. I think that's worth thinking about. But also, that's your personal photo. Probably shouldn't have too much horror at that. It's worse, of course, at enterprise-scale when they probably have access logs or something from the '90s - or whatever - on their website.

Michelle: Yeah.

Chris: That will absolutely never happen again.

00:18:24

Dave: Well, an email signature is worse than my personal photo. You know what I mean?

Michelle: Mm-hmm. I think this is one thing that concerns me a lot is putting the responsibility for this stuff onto the individual when actually it's at the company level that they need to take responsibility because if you rely on everybody cleaning up their inboxes and deleting all of their photos, I mean that's just not going to happen. You're not going to get everybody to slim down all this data they're storing. It's the companies that need to make it easier to delete data, and they need to clean up their own data as well.

Chris: Yeah. Yeah, company level. I could even see laws helping out here, like maybe some companies keep old data around because there's some audit law that says, "Hey, you've got to go back seven years," or something. Can a law be passed that says, like, "Yeah, but we'll never ask for your database access logs from over five years ago," or something, which gives companies permission to delete some of that stuff. That's pretty theoretical.

Michelle: I'm sure there's some stuff that they have to keep for legal reasons. But there is so much stuff that they collect that they really don't have to have, and they're probably collecting illegally anyway.

Dave: Yeah, like behavioral data and stuff like that. You slice up the problem in a bunch of different ways. It's compute usage, right? Just burning - whatever - a JavaScript while loop or something. [Laughter] You know?

There's GPUs, crypto, bitcoin, AI, whatever. There's this cold storage element that you're talking about, like just files on disks drawing vampire power, right? Then there's people recharging their cell phones because we burn through their batteries with our JavaScript.

Is there any other dimension to Web sustainability that you think about?

00:20:36

Michelle: There's also the kind of climate justice element and environmental justice, so a lot of these things impact the most on people in developing countries or the global south or people who are already disadvantaged, so there's the material for mining, the mining for the material for our devices, and then there's the waste disposal. So, huge amounts of old electronic devices are sent to poorer countries and just kind of dumped there. There are fewer regulations to deal with them. They poison the ecosystems and have a huge impact on communities.

Yeah, I mean there's obviously the impacts of climate change. We're causing all these problems by having these digital lifestyles and consuming all of this electricity and causing all this pollution. Where it impacts the most will be on people who are already disadvantaged.

Chris: Yeah. Ain't that how it goes? You know? Ah! You know? It's not like we're going to solve this problem by putting wind turbines at rich people's houses - or whatever. You know?

Michelle: Yeah. [Laughter]

Chris: It never affects the people at the top.

00:22:07

Michelle: That's for sure. Yeah, when I'm talking about this stuff, there's always an element of, like, "What can I do as this one tiny person?" because the more you talk about it and the more you think about it, the problem is capitalism, obviously. [Laughter] But we're not going to fix capitalism overnight.

But that doesn't mean we can't do anything. So, we do need to be mindful of our impacts and our actions. I think the more we talk about this and the more we share this knowledge and build our own websites in a sustainable way, so make our own corner of the Web as sustainable as possible, then the more those kind of ideas and actions kind of ripple outwards and impact on other people, too.

Chris: Bernie Standards loves the grassroots approach here.

Dave: Yeah. He almost... I saw him coming back in. He was about to come back in. [Laughter]

Chris: Was he?

Dave: When you said capitalism. The problem is, he almost broke in again.

So, okay. Web sustainability, you're a part of a group. Is it W3C or it is one of the side groups?

Michelle: I am part of... It's the W3C Community Group.

Dave: Okay, okay, community group. Yeah, yeah.

Michelle: I think they are working to... So, they've just published the Web Sustainability Guidelines. It's now on maybe the third or fourth draft, I think.

Dave: Okay.

Michelle: The idea is that this will hopefully at some point get made into a standard, and they'll become an official working group. Yeah, they're not a working group at the moment -- our community group.

I've been a little bit involved with that with the development of the original guidelines. I certainly can't take much credit. It's Tim Frick and Alex Dawson are doing huge, huge amounts of work on that. I just kind of try and pop in whenever I can because of time.

Dave: Yeah, yeah.

Michelle: But I'm also part of the climateaction.tech Slack group.

Dave: Oh, cool.

Michelle: It's mainly a Slack group, and lots of people discuss Web sustainability.

00:24:35

Dave: I guess I'm a dummy. How do I do Web sustainability? I have a static site, Jekyll, and it builds my site in five florps. I push it to Netlify. I have 100's on Lighthouse. Am I doing good? How do I know if I'm doing good? How do I become sustainable?

Michelle: I mean that's pretty good. You're probably in the top few percentage of sites there with just those actions.

Chris: Really? What's the biggest thing? Is it the staticness? Is that a big one?

Michelle: It can be, yeah. I think there's quite a lot of nuance to whether it's better to have a static site versus a WordPress site or something like that. I don't know all the details on that. It really depends. It's one of those things. But certainly, minimizing client-side JavaScript is a big one because that just uses so much energy.

Obviously, the browser has to download and parse it. It basically also wears out the user's device faster. That's one issue is if you're draining the battery on a user's device, then they're going to have to buy a new device sooner. That in itself is huge.

Dave: Right.

Michelle: If you hold onto your device for five years versus three years - or whatever - then you're actually saving a huge, huge amount of energy.

Dave: Yeah. Your device has 300 battery cycles - or something. I don't know what it is anymore. I probably contributed to one, right? That's kind of how you have to think about it. I'm not solely responsible for ruining somebody's iPhone, but I'm part of it.

Michelle: For sure.

Chris: Hmm...

Dave: I'm part of that.

Michelle: Yeah. I mean one thing you can do is run your website through website carbon, which is a tool that analyzes your site and tells you how sustainable your website is.

Chris: Oh, really? What is that? That's a tool thing?

Michelle: Yeah.

Chris: Like a browser extension or something?

Michelle: I think it's just the URL is something like, I think it's like websitecarbon.com or something like that. It does come with some caveats because it obviously can't use your website like a user would and load all of the JavaScript and click around.

00:27:14

Chris: Yeah, right. It doesn't know what's happening behind the scenes, in a way. I don't know why I've been obsessed with this forever. It's like Netlify and Vercel. They have this concept that I actually think is pretty useful (should there be no cost to it) called Immutable Deploys.

You change one little thing of your website and you have a branch for it. It's connected to the branch. It will produce the website, but it'll produce it at this special URL that's only for just looking at quick to make sure you didn't screw it up. It's just basically a staging site. But it's never deleted ever.

Michelle: Yes.

Chris: It's just forever that build will be around until the end of time because that's what they say. It's a feature of the site. I don't know how big of a problem it is or if they do really efficient, interesting things with that data storage or whatever. But it weirds me out that, like, "Ten years ago, I was learning how to use Gatsby, and I made a little branch of a Gatsby site. Now that URL is online forever." It very doesn't need to be.

Michelle: I was thinking about this recently because, yeah, I have the same. My site gets deployed to Netlify, too. I have, yeah, the staging preview. I was kind of wondering how long that sticks around.

Chris: And how would this website know that? The website carbon calculator doesn't know that every change you've ever pushed to your website is locked in time.

Dave: I get it. I ran my site. Can I read my site and just give - whatever.

Chris: Yeah.

Dave: We're open auditing here.

Chris: Mm-hmm.

Dave: A+. All right, I'm an A+.

Michelle: Excellent.

Chris: You got an A+?

Dave: A+, baby!

Chris: Wow!

Dave: Cleaner than 95% of all Web pages globally. Okay? That's good. I feel like that's good. Right? [Laughter]

Michelle: Well done.

Chris: I got an A+, too, on Chris Coyier, even though they're about as different of websites as you can be.

Dave: Congratulations. Well, so only 0.06 grams of carbon is produced every time somebody visits the page. Okay?

Chris: Okay.

Dave: A tiny gram of carbon. Not even a point of a gram, 0.06. No American knows what a gram is, but we'll just press through. [Laughter]

Michelle: You don't have grams?

Dave: Uh... Only in cooking.

Chris: Only if you buy weed.

Dave: Yeah.

[Laughter]

Dave: Okay. But over a year, with 10,000 monthly page views, which let's say that's what I get. I don't know. It could be more, but let's say that's ballpark. It produces 6.74 kilograms of CO2, which is the same as boiling water for 913 cups of tea. That...

Okay. I got a 95% rating, A+ rating, and it's like 913 cups of tea. Now I'm kind of shocked. Or it's 18 kilowatts, which is the same as 1,466 full charges of a smartphone. Now I'm like, "Wow!" And it emits one tree's worth of carbon a year. That is shocking.

Michelle: Yeah.

Dave: Now I'm like, "Whoa!" And I got an A. What does an F get? [Laughter] Yikeronies!

00:30:33

Michelle: Yeah. I really like how it quantifies the emissions like that because so much of our digital output and our digital emissions are just completely invisible to us. We don't go and visit these data centers humming away.

Chris: It's easy to think, "Oh, in aggregate, there's lots of energy. But my website is basically a zero."

Michelle: Mm-hmm.

Chris: What does one website do to the world? This is what's shattering that feeling.

Dave: It's one tree.

Chris: It's like, "No, no. One website is a lot. Yeah."

Dave: One tree, dude!

Chris: A thousand charges of a phone. What?!

Michelle: For sure. Yeah. Like you say, it's easy to say, "It's just my one website. It's just a drop in the ocean." But then there are other websites. I mean your websites probably get a lot more hits than my website. [Laughter] But then there are some websites that are visited by millions of people. Actually, when you quantify all of the emissions of those websites, it's actually pretty big.

The top 28 websites -- is it 28? I think that's right -- for the most recent climate conference, so I did a little analysis of that. Farshad, who is part of the climateaction.tech community and works for the Green Web Foundation, he also wrote up an analysis.

But that website was loading a 30-megabyte image on the homepage and was full of YouTube embeds. It was one of the worst sites I have ever seen for sustainability in just loading all this data that was completely unnecessary.

Chris: Oh, that was extreme irony. The website was for an event about Web sustainability and it just was awful?

Dave: It's like the Davos climate summit where all the billionaires fly their planes in. [Laughter]

Michelle: Yeah. For sure. It's exactly like this one. I shouldn't be surprised. It was in a massive oil-producing country.

Dave: Right.

Michelle: And there was already a lot of controversy about that. But yeah, it was a very unsustainable website. And when you think that's being visited by millions of people over the course of that climate conference, it actually adds up to quite a lot.

Chris: Ooh...

00:33:01

Dave: Well, I remember working on a large pizza company, and it's like millions of hits a day, multi-millions a day. I'm sure that's not anything compared to the carbon emissions of the pizza ovens that are just running all day. [Laughter] I'm sure we eked out okay against those. But it's just something to think about, like how quick.

At one point, there was a one-megabyte CSS file being shipped down, and so it's just like--

Michelle: Wow.

Dave: Can you imagine what the cost of extra CSS was just in that situation? Yeah, I worked on another site and they said billions come a year.

Michelle: Mm-hmm.

Dave: It's billion with a B, and I was just like, "Wow!"

Michelle: Yeah, so the impact can be pretty large. You know, like you say, it may be dwarfed by the impact of those pizza ovens. But do we know that?

Dave: We don't, right?

Michelle: It's just because we can't see emissions from the website.

Dave: Right.

Michelle: It could even be worse. I don't know.

Dave: Well, and they're kind of probably incentivized to get the cost or the efficiency of those ovens to, like, somebody put some time into it, I'm sure.

Michelle: Yeah. I'd be quite interested to know how it compares. I'll probably never know.

Dave: Well, if you told me running a website is one pizza oven, that'd be great. Yeah.

Somebody was saying a joke on Twitter or Mastodon. Mastodon has jokes, everybody. I feel like people don't know that [laughter] but it does. Every three days or so, one joke shows up.

[Laughter]

Michelle: Harsh!

Dave: Oh, buddy. Yeah. Anyway, it's fine. Bluesky stole the chaos gem from Twitter, and so they can have it (as far as I'm concerned).

Somebody was saying we should (for all this AI and crypto, which you don't want to talk about -- we'll not talk about, but it's part of the joke) -- they said we should have a metric like how many renderings of the Bee Movie was one search query with AI - or whatever. How many Bee Movies could have been rendered in this time?

Chris: Yeah. Hopefully, it's not one.

Dave: I thought that was really good. Wouldn't that be wild? I would love a metric like that, like how many trees, how many pizza ovens was this website or this query or this anything.

Chris: Yeah.

Michelle: Yeah.

Chris: The charges of the smartphone feel like a metric in that vein that's like, "Oh, very relatable and, like, wow." You know?

Dave: Yeah.

Chris: But yeah, you could nail it with... Even a joke metric can be effective.

Dave: Yeah. I mean I don't know what it takes to render a Bee Movie, but it sounds like a lot.

Chris: Yeah. Yeah.

Dave: A lot of Seinfeld go into that.

00:36:03

Chris: All right, so that's what... You get points because it probably can figure out your host, maybe, Dave. Then your host is either efficient or not. The choices you made on the site probably get factored into that score. Who knows all the things.

Are there some fun things we can do to circle this back to front-end Web design and develop kind of stuff? I think of things like, oh, soon we'll have more support for scroll-driven animations in CSS. How exciting is that? That means less JavaScript, and thus we get less electricity usage, for example.

Michelle: Yeah, for sure. This is what I love about all of the new CSS features that are coming out -- one of the things that I love -- because, yeah, it does mean that we hopefully need less JavaScript for that certain stuff. Yeah, for sure, like scroll, drip, and animations, and that has pseudo selector and all that stuff is good. Well, for CSS but also hopefully good for Web sustainability as well. I mean, I hope it is anyway because I still see, every year, the JavaScript usage on websites is going up and up and up.

Chris: Yeah, it goes up and up. Mm-hmm. It's nice when they go together, right? If you work on Web performance and you make your website much faster, isn't that another way to say faster is more efficient? Isn't it?

Michelle: For sure. That's a huge overlap. If you're optimizing for performance, you're probably optimizing for sustainability as well.

Chris: Right. Not to bring a terrible counterpoint, but I remember this anecdote from the history of YouTube performance where there was this ironic one where they made the YouTube video page way, way more efficient.

Dave: Better. Yeah.

Chris: It was great. But then their time to load the page, their metrics went way up. It started to take longer to load the page, but they realized that because they made it so much more efficient that more people in the world could use it all. All of a sudden, it was capable of being loaded on lower-power smartphones and stuff, and a lot more people were visiting and using YouTube because of the good job that they did. But in the end, it probably burned more electricity in the end.

00:38:29

Michelle: Yeah. This is the thing. It's also one element is, I guess, what are you building for. You can make the most perfectly optimized website in the world. But if your website is for a car company and you want people to buy more SUVs, then it's probably not that sustainable, right?

[Laughter]

Chris: Sorry. Yeah, that's a bummer. You're like, "We made the most efficient website in the world for setting tires on fire."

Michelle: Yeah.

[Laughter]

Dave: Dave's toxic waste emporium.

Chris: Yeah.

[Laughter]

Michelle: Yeah, going back to the YouTube videos as well, they're a huge performance drain, but they're also terrible for sustainability. It loads 900 kilobytes of JavaScript and the user doesn't even watch the video half the time.

Dave: Yeah. Zach Letherman did an audit on that recently - or something - and it's like 2 megs to put it on a page, an embed.

Michelle: Yeah. Yeah.

Chris: Yeah. That's if you don't even go to YouTube at all. Just the embed.

Dave: Didn't even watch the video.

Michelle: That's if you didn't even click on the video, yeah.

Dave: I'm like....

Michelle: I always use Paul Irish's YouTube Lite Embed plugin.

Chris: It's the best, yeah.

Michelle: Yeah, because I'm sure you know....

Chris: Especially because it doesn't affect anything at all.

Michelle: Yeah.

Chris: It's still a thumbnail of a video with the same UI on it, and you click it to watch the video. So, the experience is literally the same.

Michelle: Yeah.

Chris: You're like, "Why wouldn't you use this? Why don't they do this?"

Michelle: Because the page loads that much faster.

Chris: It's funny that you're like, "He works at Google, too. You can just ask him if it's cool."

[Laughter]

Dave: Yeah. Walk over there, Paul. Just walk over.

[Laughter]

Michelle: But also, can you imagine the impact if Google decided to prioritize sustainability, and if they said, "Okay, actually, we're going to make the code of our YouTube embeds so much more efficient"? It would impact--

Chris: Oh, it'd be massive.

Michelle: Not every website in the world, but a lot of websites because people just embed videos all the time.

Dave: Oh, I'm sure that would just drop the carbon footprint immensely if they just shaved 500 kilobytes off of 2 megs.

00:40:47

Chris: Oh, I read a thing about the WordPress codebase. This was so tiny because I think they've upped the version of PHP that is required to run - or something. And now, in the syntax of PHP, you can reliably use left square bracket, right square bracket, to say an array, whereas in the history of the WordPress codebase, it used capital array, the word in parentheses - or something. So, you can see the difference in characters is about five characters difference.

If we change that across the entire codebase, there's something like - I don't know - tens of thousands of instances of it. How big of a deal is that? But they answered how big of a deal that is because it's downloaded so, so, so many of times that it had some very much larger impact than you would think it would have. And that's just a couple of characters of data, not megabytes per page load.

It probably would be one of the bigger changes. If YouTube made the call to just do the same thing that the YouTube Lite component does, oh, my God. We'd get like a free rainforest or something.

Michelle: [Laughter] Yeah.

Dave: How many trees is there? How many trees are they doing? Yeah.

Michelle: Yeah, I sort of accosted somebody (who once worked at Google) about this a couple of years ago when it was only like 800 kilobytes instead of a megabyte. He was like, "Yeah, they could totally make that code more efficient. They could totally do that."

Dave: You know what gets me? You know what grinds my gears?

Chris: [Laughter]

Dave: I just got fucking 80 years old. Anyway. Whatever.

[Laughter]

Dave: I just turned into an 80-year-old man. They're hiring geniuses from Stanford, you know, code and test blah-blah-blah, and they can't make a fast website. What the hell? [Laughter] How do you get that many sort of people in the room and they're just like, "Yeah, well, it's a few gigs over the limit but whatever"? Cool. Everyone high-fives.

00:43:04

Chris: That's what you want to know. What is it? I want to know. Is it negligence only? Or is it, "Actually, we load up a bunch of JavaScript because we need to report back information about what's happening on that website because that's how we fuel future decisions that we make on YouTube. If we didn't load that JavaScript, we wouldn't have that information to make those decisions. Thus--" Not that it's a good answer, but it's an answer. It always bugs my brain when I just have no idea why.

Michelle: Yeah. Is it collecting data on you already at that point before you click a video? I don't know.

Chris: I don't know if it is. Just the fact that it's loading stuff means that it's showing up in logs and stuff and it has some level of data. But I don't know. Yeah, I don't know. I doubt the analytics is 2 megabytes of JavaScript, but it's probably in there somewhere, a little bit of it.

Michelle: Yeah, I don't know. The cynic in me kind of says that they're not prioritizing this because it's kind of the tech disease of it's always got to be the new feature. We want to give the users something else to get more money out of them or get more ad revenue.

Dave: Yeah.

Michelle: We don't care about optimizing stuff and looking after our own code.

Dave: Yeah.

Chris: Yeah, like the benefit is low.

Michelle: Yeah.

Chris: They're like, "Oh, sure. We'd get a rainforest, but is that all?"

Michelle: Yeah.

Chris: Where is the business benefit?

Michelle: Where's the money?

Chris: Yeah. [Laughter]

Dave: Yeah. I read an article about retargeting--

Chris: Yeah.

Dave: --like ad retargeting where, if you looked at a mattress, you're going to see mattresses for the rest of your fricken' life. You know? I just was like, how can we let that euphemism happen? We don't just call it following you around on the Web. You know? We said, "Yeah, retargeting. That sounds cool. That sounds elegant, way more elegant than stalking." You know?

Michelle: Yeah. I actually didn't know it was called that. But yeah, it makes sense.

Dave: Retargeting.

00:45:09

Michelle: That is super weird. My project for this year is to disable cookies on every website I visit, which is going well so far.

Chris: Really?!

Michelle: But yeah, it's interesting how difficult some websites make that. I have an article in the back of my brain which is an analysis of all the different cookie banners because I'm getting to experience a lot of them.

Dave: Oh, I would love to see that article.

Michelle: Yeah. But some of them, you have to go through ten steps of clicking before you can disable the cookies and see the content. But years ago, I just always assumed you had to accept the cookies. Otherwise, you won't get to see all the content that you want.

Dave: Right.

Michelle: Then I actually realized it makes no difference whatsoever to you. It's just people making the money.

Dave: Yeah, well, it's always like, "Necessary only." It's like, "What's necessary?" I don't know. I've made websites for 30 years and needed a cookie once for one ID code or something.

Michelle: Yeah. I think necessary is maybe a login type.

Dave: Login state, yeah.

Michelle: Authentication. I don't know.

Dave: I guess you're the now poster child of Web sustainability.

[Laughter]

Dave: What are you doing to embody that or do that or make your sites or sites you work on? What are you doing to better the Web?

00:46:43

Michelle: Just to go right back to the beginning, I guess I started thinking about this stuff a bit more a couple of years ago. A few years ago, I saw a fantastic talk by Hannah Smith, who works for the Green Web Foundation. She talked about all these things like optimizing your site, Web sustainability, and that was the first time I'd ever heard about this or even thought about the environmental impact of my website.

Time went on, and I thought, "Okay, well, I'm doing good things on my website. I'm trying to have an optimized website. That's all I can do." Right?

Then a couple of years ago, I saw another talk by Tom Greenwood, who actually build the website Carbon Calculator. And while I was watching that talk, there was quite a lot of overlap about how to make you website more sustainable. While I was watching it, I kind of found myself getting quite angry actually that all the responsibility was on me as a developer to try and make my website. Obviously, it's important. But this was around the time that I was trying to optimize websites at work that had these massive, one-megabyte YouTube embeds on them.

It made me think, "Well, actually, I can optimize my site. But more people need to be responsible for this, not just the individual Web developers trying their best in their little corner of the Web over here."

On the way back from that conference, I thought, "Okay, so why am I angry about this? Am I justified in my anger?" I bought Tom Greenwood's book and read it on the train on the way home because I was like, "I need to actually get some more detail on this and figure out am I right to be angry or am I right thinking there's not much I can do as this one Web developer over here?"

I kind of realized, first of all, that we have more power than we perhaps realize because the products we're building are not just used by us. It's not just putting your recycling out or turning your lights off. The products we're building are used by potentially millions of people. So, you're having an impact on lots of other people as well, like more so than if they went around turning all their lights off and all that sort of thing.

Then I kind of realized, "Well, actually, one of the most powerful tools we have at our disposal is our voice." This only works if more people know about this and more people get involved, and we put pressure on big companies to do things. I'm picking on Google and YouTube. They can be picked on. They're a great big company. They've got loads of money. They don't care.

Chris: Yeah. You're punching up there. It's cool.

Michelle: Yeah.

Chris: Yeah.

00:49:56

Michelle: They don't care if I'm picking on them. But we need to put pressure on companies to take more action. And we need to do this at a collective level. It works better and we can have much greater impact when we work together.

That's when I started writing about Web sustainability. I think, Chris, you gave me an opportunity to write for CSS-Tricks, and that was right after I'd been to this conference and started researching all this stuff. I was like, but you know I'm lucky I have a platform with my own blog. I can reach a certain amount of people. But you know what has an even bigger platform? CSS-Tricks.

Chris: Hmm...

Michelle: So, I decided to write that article for you. And that sparked--

Chris: Yeah. That was a couple of years ago.

Michelle: Yeah.

Chris: One of our end of year things.

Michelle: And it sparked a whole lot of discussion and back and forth, and it kind of inspired me to write more articles. So, that's something I really focus on is actually bringing this information to a wider audience. I mean I'm certainly... You say I'm the poster child for Web sustainability. I'm absolutely not the expert here. There are far more clever people working on this stuff than I am.

Dave: No, sorry. You're not going to change my mind.

Michelle: [Laughter] But I have a voice. I have a platform. So, I think this is an important thing to bring to a wider audience. And we've all got to use the skills we have, right? We can only affect what we know. We're Web developers. We can work on our area. Other people can focus on their own areas, too. Hopefully, we will join up those areas.

But, yeah, I think absolutely being more aware of this stuff, building more mindfully is important, not just chucking all of the JavaScript in just because we can. But also, we can get involved with communities, like climateaction.tech community and the Web Sustainability Community Group to actually kind of standardize this stuff.

00:52:12

Chris: Yeah. You've mentioned Gerry, too. We've had Gerry McGovern on the show a couple of times.

Michelle: Awesome.

Chris: He's pretty into this world as well.

Michelle: Yeah, for sure. He is one of the experts. He really knows his stuff.

Dave: I saw a site. I can't find it. But it was in the context of enshittification, which is the word of the year.

Michelle: Yeah.

Dave: But it was just going through all the big sites and just how they're megs and megs and megs and megs.

Chris: Hmm...

Dave: Huge. And there's some argument, like, you're going to be on Facebook for a while. It's going to take... You know... Stay there. [Laughter] You're going to be there for a bit. Preload some stuff.

But it was just interesting. It's just interesting when you take a step back and think about what we're doing and all the crap we're putting, sending, uploading to our computers and then sending to other people's computers. It's so much. It's excess, right? It's just excess. And so, how do we stop or what do we need to do to get there? It's a good question to think about.

Michelle: Yeah, for sure. Yeah, I'm not sure that's one I can answer in a very complete way anyway. But yeah, I think it's building more mindfully is important. Being conscious of what we're putting into the world.

Chris: Knowing is half the battle kind of thing, right?

Michelle: Yeah. For sure. Just being aware of this stuff. I think so much of this is also big companies collecting data and wanting more and more.

We can also be kind of conspicuous consumers as well. We can choose what we consume. And I don't want to be like, "We all have to deprive ourselves of any joy," [laughter] because that's certainly not going to sell it to anyone.

Chris: It came up to me knowing that you talk about this a lot, but it's not like, overnight, you decided that, like, "I'm only going to ship black and white websites with no Web fonts and no images." The answer isn't to strip your Web pages to absolutely nothing. Right?

Michelle: Yeah. For sure.

Chris: You could maybe overdo it there. There's still room for fun in the world.

Michelle: That's it. I think having fun on your website is a much better use of resources than having a bunch of ads on your website.

Dave: Yeah. Yeah.

Michelle: I think it's about making choices and tradeoffs, really.

Dave: Hmm... Very cool. Yeah. Well, this is all a lot to think about. Thank you so much for coming on the show. And thank you for wearing that whole Captain Planet cosplay. That was really unexpected.

[Laughter]

Dave: I wasn't expecting that. Maybe that's just what you wear every day but thank you so much. But I guess, for people who aren't following you, your incredible blog, and giving you money, how can they do that?

Michelle: Well, I don't know how you can give me money.

Dave: We talked about that at the top of the show. Yeah.

Michelle: Even if you write me an email, I'll probably just think it's spam.

[Laughter]

Michelle: You can visit my blog, which is css-irl.info. A really catchy URL there.

Dave: Hyphen. Good power move.

Michelle: Yeah, that's kind of the main place to find me these days. I am on Mastodon, [email protected]. I'm pretty sure there's a link on my blog.

Chris: Yeah.

Michelle: Yeah, those are the main places to find me.

Dave: Awesome. Well, thank you so much for coming on and talking about this. Yeah, we really appreciate it.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Mastodon as well. We're at front-end.social. Then join us in the D-d-d-d-discord, patreon.com/shoptalkshow because that's where the party is at. Chris, do you got anything else you'd like to say?

Chris: Hmm... [speaking in a whisper] ShopTalkShow.com.