How to stop your website from destroying the planet

Morning. I’m Molly and I make websites, and here we go. That’s a cloud. It’s a cloud. Got that one at home. It’s a cloud. That’s The Cloud. It’s not fluffy. It doesn’t look like candy floss. You can’t waft your hand through it. It’s huge warehouses full of stacks of blinky light computers, that are really hot. Like your laptop when it sits on your lap.

They take loads and loads of energy to keep them all running. 24 hours a day. Loads of energy and a huge amount of water to keep them cool and not explode, I guess. So there’s hundreds of these all over the world, and that’s where all the stuff is. Your website, your, every photo you’ve ever taken of your lunch, all your emails, all the, everything in that Dropbox folder you forgot about

and they keep emailing you to say it’s full. It’s all there. And yeah so, you have a digital carbon footprint. Some of you probably know, but lots of people don’t know, and I have to be like a horrible grim Reaper saying, oh, here you go, something else to feel guilty about. Yeah, I know you were doing really well with your recycling, but.

Yeah, I’m going to use the word, the phrase carbon footprint a bit. But it is a bit of a problematic thing. It was invented by, I want to say, BP or shell, one of those guys, to kind of shift the blame on the individual as opposed to, you know, huge corporations and governments and bigger forces.

But and it’s also very hard to calculate because there’s so much that goes into it, primary, secondary, tertiary, impacts of every action or industry or thing that goes on. But you know what I mean when I say it, it’s just trying, and it’s very, be hard to calculate. It’s never going to be accurate, but as the best we can figure it out,

it’s a good, measure. And then if we’re using the same sort of methodology to calculate things, then we can compare once we’ve made changes, which I’ll come onto later. But how big of a problem is it? So again, really hard to calculate. And I think this might be even from a couple of years ago, so it’s hard to know, changing all the time.

But information technology, including all of the internet, everything online and, the sort of lifespan of the hardware is estimated around 1.8 to 3.9. It doesn’t seem that bad. One, that’s the smallest number. But the whole of the UK, turns out there was a smaller number. The whole of the UK is only 0.89. And that’s everything the UK does, not

the UK is computing and the industry that we sort of think of as one of the biggest polluters, the whole of aviation across the world is 2.5. And it’s probably just going to get bigger. I mean, it definitely is because, little sidebar because this is about your website, not AI, but AI is horrifically power hungry, training the LLMs.

Any prompt you do? I saw an estimate that it’s about 32 times the carbon footprint of a Google search. And the big tech companies, they’ve got plans to build new nuclear power stations just to power the AI that they want to make. So, you know, it’s really useful for lots of things, but maybe don’t keep using it to, like, write a poem with a swear word in or something

that’s not that helpful. You can write those yourself. There’s about a billion websites. So that means there’s billions upon billions of pages on the internet. And I don’t know if you’ve seen websites, loads of them are shit, I wish we could just delete them. And each individual page, the actual physical size of the file, because that’s what it is

it’s just like on your computer when you store a word document, the files of your website are stored on those hot computers in the warehouses, and it’s gone up. It’s more than doubled over the last ten years, I guess, because we’ve got more embedded videos and exciting things we can do on websites that we didn’t have in the 90s.

And everyone got very excited and piled them all on to make these amazing online experiences. But that takes a lot of energy to power.

So, presumably we want to do something about that and be helpful to the world. So where do we start? And you can’t know what to do about a problem until you know what the problem is. So I used to be a teacher. I’m going to say something you’d never say as a teacher, but get your phone out guys, go to website carbon.com.

Your laptop if you near it, and there you can put in the URL of your website, just the home page. Because it’s often the heaviest page on a website, depending and you will get a grade. It’s quite, there’s quite a lot of different, calculators for websites, but this one’s quite nice, it’s got really simple user interface with green and red.

If you don’t have a website of your own, I’m so sorry, you could try putting this one in, this is of the UN’s website about climate change. Just picked it randomly. Yeah. So if you press go, you’ll probably get a gray. Does anyone want to be brave and tell me what they’ve got?

I’ll tell you what, I’ll explain the grades, and then people might get a bit braver.

Because,

Ooh, that’s always a good sign. It’s taking too long to load this.

So if anyone’s a sort of recovering clever kid who is absolutely devo’d because they haven’t got an A, don’t worry, the, the grading system they’ve made sets the global average footprint as an F, so anything above an F means your footprint is smaller than the average across everything they’ve tested. So that is good. You’re doing better than most anything above an F.

Yeah. And then if it’s an F you’re at or worse than the average. So yeah, anywhere, anywhere here is fine. And now you know that anyone who’s got a D, good for you. That’s two up that’s two up.

Anyone else. Ooh look at these.

Yeah. You know you can go back later and check that page you’ve got that’s got eight videos on it.

So, not every website can get, or should be aiming to get to an A+ because there’s certain industries or things that need to be on websites that just you can get it down, but you’re just never going to get it that far. But generally what you can do is improve from where you are now.

And that’s what I was saying about the calculation. This is a kind of rough calculation that makes a lot of assumptions. But, you know, if you’ve, if it’s an E now, you might be able to get up to a C and that’s a really good, quite small improvement. So you’ll notice we’re literally talking about fractions of a gram, which really does feel like, what’s the point?

And yeah, you could just be like, well, that’s not worth my time. But my friend Tom, who’s a Cowork Crew host in London, Tom Garfield, I’m still in this analogy from him, which is if there was an earthquake and you rocked up with a dustpan and brush, that would be, you’d feel stupid, like, literally, what am I doing here?

I’m getting these three grains of dust up. But if we all turned up with a dustpan and brush, a couple of people got brooms. Someone’s even clubbed together and got one of those industrial Henrys that can do wet and dry. It would have a real impact. We could make a real dent in clearing up that disaster zone.

So, you know, it’s a bit like when you’re standing by your sink, washing out your recycling really diligently and thinking, you know, in the grand scheme of things, should I even bother? But if we all bother, it will have an impact. And then your choice is really to either make a tiny improvement or do no improvement.

So let’s choose the one that’s not just doing nothing. So if you want to improve that grade, the thing that will have the biggest impact is choosing the right host. So that is the company that’s actually holding onto your files for you in various different data centers and serving it up. So if you have built your site on Wix or Squarespace, you don’t have a choice.

They are the builder of your website and the host of your website. You can’t just pick it up and move it to a different host like you can if you’re on WordPress or a different CMS. So sorry about that. But there are other things you can do if you’re a Squarespace person. Because if you think about it, the exact same website, even if you’ve made no changes to what’s on there, if it’s being hosted by a data center that’s running off coal, if you move it somewhere where they’ve got their own solar farm powering the whole thing, it’s immediately, well, a billion times better, I guess.

Probably not. That’s not good maths. So if you’ve moved host or you can’t move host, the next thing to do is actually ideally at the beginning of the design process, you are kind of looking at your decisions you make with a sort of sustainability goggles on. Or you can do this while you’re sort of auditing your current website, which is go all Marie Kondo on it, you know, things in your website like your, you know, Cookie policy might not spark joy, but they have to be there.

But, just ask yourself, first of all, do I really need it? The thing with the lowest carbon footprint is a thing that doesn’t exist. I mean, a lot of websites, we could just delete them but maybe don’t do that to yours. So just making sure that things are really earning their place. Have I just put this photo here because it felt like there was a bit of a gap?

Is this a boring stock photo of two blokes shaking hands and like, is that actually driving sales for my business? Is that actually keeping people on my website? Probably not. So just be, and that will, you know, help you make your website better if there’s not clutter that doesn’t need to be there. And then the things that do on their place, it’s about, how can I actually make the file size of that element smaller?

And then it’s like storing it and serving it up to people efficiently, which is where we get in to the more techy bit that if that’s not your job, you’re not going to be able to do to your own website, but going through and seeing what actually needs to be there is definitely, you know, within your skill set. And then if you do want to get a little bit more into it and figuring out what’s going on, let’s play detective.

So if you go to digitalbeacon.co, so it’s another, calculator. It uses the same sort of, methodology and the grading system as Website Carbon. It just looks a little bit more like ooh what’s here, but, if you run your site through there. So this is actually the result from that UN web page about climate change, which has an absolutely huge, it’s an F, and it’s got an 11 megabyte page, which I’m like, what is on there?

I don’t I didn’t even read to the end of it, but yeah, that’s pretty mad. But you’ll get that at the top of the page. And if you scroll down, you get this page breakdown with loads of stuff that I mean, I don’t actually know what some of this is, but it can just give you a bit of a clue about what’s actually draining all the energy on this page.

So the main thing is, is you can see your images and all together how much, how many megabytes or ideally kilobytes that’s taking up. The font is a really interesting one. If your web is, anyone whose website is on Squarespace or uses Squarespace, just a couple, but it can help other people.

I’ve noticed this on Squarespace websites because you set all your styles in a special place where you’re like, I want the headers to be this font. Sometimes, if you haven’t gone through and set every single option that they offer you, there’s a few default ones in there. So actually every time your website loads, it’s loading some font for, even though if you’ve only got two beautiful, elegant fonts on your site every time the page loads, it’s actually loading the files for the fonts you’re not even using, because they’re still set in the back end of Squarespace.

So this is loading 14 font files. And again, it’s not, I, no one needs 14 fonts on their website. I guess unless it’s like a font website where they’re showing you different ones and like which ones you want to buy, which this is not. So that’s another little place where you might see, ooh something’s not quite, you know, a really easy thing,

I just need to change that setting in the styles thing and that will go away. Script is a lot of the code that actually makes your website happen, and this one’s really high on, on Squarespace websites, and it’s also like any, things that are happening on your website, like trigger this to happen, trigger that to happen,

that’s in there. So that’s not necessarily the one that you need to be fiddling with. Don’t know what all this stuff is. But, the other one that might come up is, is videos as well, separately. But, it’ll just tell you, are these images really, really huge. And have I got something switched on? I didn’t need to have switched on.

So the usual suspects that are making the web page really heavy is, videos, pictures, fonts and the actual just bulk of the code, like I said, videos are really big. And, particularly if you’ve got anything auto playing on your website, just turn that off, because most people don’t want a bloody video loading when they’re trying to look at something.

And if you’ve got one of those huge, like header videos at the top that’s playing, people normally load a website and then start scrolling. So you’ve put megabytes and megabytes of gubbins up and then people aren’t actually even watching it. Sorry. So videos is definitely one of those things where you’ve really got to be, is this actually working hard for the goal for my website?

And if your website is because you’re a video production agency, you’re going to have to have videos on there because watching those videos is going to make people buy from you, and then it’s a case of just making it more efficient. And you might have, you know, if you are selling a product and there’s a video of real people using their product that really drives sales, you kind of want that on your website.

Then you might think about saving weight elsewhere on your page. But if it’s just a video because you thought it looks fun, it’s probably not worth it.

So that, and there are ways to sort of serve it more efficiently, but we can’t go into that now. And then pictures is the other thing. Obviously, humans are visual creatures. You want to have pictures on your website. They do help to like make people identify with your project or your service or lovely pictures of your face so they want to work with you.

You know, it’s some websites work because their style is very, you know, graphic or font led and so you don’t need many pictures. But most websites, we do need them. So once you’ve gone through your, Marie Kondo process and got rid of all the shitty stock photography, the pictures that are left, I’m going to just quickly show you how, you can make them take up a bit less space.

So the first thing is getting them the right size. If on your website, it’s a nice picture of your face next to some text, sort of taking up half the screen, if the font, the actual file that you’ve uploaded is 4000 pixels wide because you got it straight off your brand photographer and whacked it on the website, no one is ever going to look at it that wide.

Maybe, even on the widest desktop, people don’t often have the window stretch to there. Maybe if they’ve rented a cinema and then they’re projecting your website up onto the screen, it’ll be more than 4000 pixels, but I’m not quite sure what the context for that would be, and I don’t know, maybe you’ve got different stuff going on if that’s happening in your life that you need to be focusing on.

So just getting it the right size sometimes is a bit of trial and error, because sometimes having it a little bit bigger than you need makes it look a bit crisper. So there is sometimes a bit of, let me shrink it to this, upload it, not quite right, that you need to do. But generally the size that it’s going to be on a nice big like that monitor there, a nice big designer-y computer on a desktop.

That’s the biggest it’s going to be. So it just doesn’t need to be any bigger. And you can shave loads of weight off just by having them the right size. And when you’ve got them the right size, you can compress them, which is a magic thing. Please don’t ask me how it happens, but you go to this website and there’s a nice panda, and you pop your file on there, and the panda gives you the file back, and it’s exactly the same, but it’s smaller.

I don’t know what the panda does, but go to the panda and do that, and then you can upload it to your website. And if you’ve got a WordPress website, there’s plugins like Smush is a one that I use and various other ones that then wrap up the little pandas file and whoosh it out into people’s computers in a way that takes up less energy than if you didn’t have that.

That’s the technical detail. So if you’ve got a Wix or a Squarespace website, you can kind of only do those two. But, those builders are always trying, because a lighter website is a faster website and people want fast websites, they are kind of working on their product all the time. So I think, you know, the Squarespace of today is a lot quicker and lighter, and they’re doing this compression and serving efficiently more than five years ago.

So behind the scenes they are doing things that will help you with this. So, again because we’re talking about these small gains, and it’s really invisible, a lot of people don’t know about carbon footprint. Then probably fewer care. And in terms of the bottom line and driving sort of customer behavior, it’s just not very visible. If a company completely changed their packaging to a nice brown paper, everyone can kind of, oh, them eco, I’m going to buy them.

But your website could actually look exactly the same it has always done, but have a third of the carbon footprint and people are like, okay, like it’s not necessarily that impactful in terms of like, look at us, we’re doing loads of eco stuff and that sort of PR kudos reasons for doing things. But luckily a more sustainable website is better for so many other things.

So, as I said, they’re faster and search engines like fast websites, users like fast websites. No one wants to be hanging around waiting for that beautiful header video to load that you’re not going to watch. So yeah, that’s the first win win. Yeah, part of that process of making sure everything’s working as efficiently as it can is also about your user journey.

If you’ve got a big, overstuffed menu and loads of stuff to click on and people don’t know where they’re going, that is bad for the user experience and your conversions and bad for the carbon footprint. If someone can get your website go, I get it. Get to where they want to be in three clicks instead of six clicks.

You’ve halved the footprint without doing anything fiddly with picture files and stuff. So yeah, another win win. Yeah, just cutting out crap you don’t need in your life as well as your website is good for the UX and conversions, again. Having the copy on your website is actually can be more sustainable. Again, if you’ve got loads of waffle, loads of stuff that people find confusing, they go into the wrong page,

they’re having to read through three pages of gubbins before they decide to buy, because you’re not getting to the point, that means more page loads. That means more energy. That is not being stuffed with the aforementioned stock photos is good for just not looking shit. And they can be more accessible, so it’s not a given. But if you’re going through this process and making your interface really clear, making it load efficiently, making it really easy to navigate, that can mean you’re in a really good position to be, that your website is navigable by, screen readers or people using keyboards or people who, you know, can’t deal with your website because

of the cognitive load, because it’s a mess. So you’re actually on your way to being more accessible, which is good for being inclusive, complying legally with not excluding people from accessing your product, for your bottom line because more people can look at your website, more people can buy and just not being a dick. And that’s it, so, that’s my website, A+ and that’s my LinkedIn.

And that QR code is to my newsletter, which is really short. So I send every single week, one’s just going out in a minute and two hours guys, that, something useful for your business about

websites or sustainability, or a bit more about accessibility as I’m learning more about that. And something else which might be, you know, a recipe, a bit of trivia, my bit of trivia that I didn’t know people didn’t know is Big Mo from EastEnders is Gary Oldman’s sister, and her stage name is Laila Morse, which is an anagram of Mia Sorella.

Because when Gary Oldman went out with Isabella Rossellini, that’s what she used to call her. And Isabella Rossellini is Ingrid Bergmans’s daughter. So there’s a link between classic Hollywood and EastEnders for you. If you like stuff like that, my average read time is 101 seconds, so if you’ve got 101 seconds every week to find out gold like that, get on board with the newsletter and if you have any other questions about everything, then you can come and find me this afternoon because I’m here eating cake.

Thank you.