Talk transcription
Izzi Smith:
Hello, everyone. What an amazing experience it is to be standing on an actual stage today. This is so weird, but wonderful. Yeah, I'm talking about a topic that is very, very close to my heart and probably close to all of your hearts as well. Website sustainability, how can we take action for our own websites and how can we evaluate the impact that we already have? Just to introduce myself very quickly, I'm an SEO & UX Advisor at Ryte, but I'm not talking about SEO or UX specifically today, but maybe just a key point about me is that I often make memes and bad jokes, so you might see a few of those today. And if you want to tweet at me or get in touch, just find me at izzyonfire.
Now, we generally tend to think of the internet and digital content as being inherently green. There are terms out there like the cloud and the net, and it makes it feel so invisible and so intangible to us. For example, we read the news online, we don't really buy newspapers anymore. We prefer to get our spam via email and not in the post. And for those of you who like me, who like sending memes, we do that online. We don't just print it out. That would be bizarre.
But the scary fact is, and this is the point that I'll be raising throughout the whole talk, is that the carbon footprint of our gadgets, the internet, and the supporting systems there account for around 3.7 of global greenhouse emissions. This figure sounds quite small, but it is very similar to that of the airline industry, which really makes it so shocking. How does the internet contribute to these carbon emissions? Well, it's usually around the energy consumed by the devices that users are using, but also all of the data that's been sent from host to networks, also energy consumed by the servers that your websites are hosted on contributes to a huge amount as well.
Those emissions are predicted to double by 2025. Actually this study was created before the Corona crisis happened, where we saw so many shifts to online work, to digital learning, to online communication so this figure is only set to increase by what was initially predicted. Already there was a study that over the pandemic, over the lockdown, greenhouse gas emissions actually decreased, but that was just a small blip and it's actually set to rise again fast over 2021.
The good news is there is a lot going on at the moment. There is an increase in electric cars, in many initiatives in borrowing of coal mining and so many reductions in unsustainable fuel. My notes aren't here so bear with. And also just 50 minutes away, 50 miles away, the COP26 is happening over in Glasgow. It's a very important weekend for all of us here, week/weekend. I'm on vacation so it's all a weekend at the moment.
And to support with that, we write pledge to help make 5% of all websites carbon neutral by 2023. It sounds like a small amount of websites, but it's a vast amount. Some websites are already taking place. Actually over there in the icons, you can see some large German agencies, so we are based in Germany. Some large agencies and companies are already joining this pledge and helping us and helping the environment in going more sustainable and carbon neutral. I'd like to take a look at the Organic Basics website. This is a clothing shop that has a carbon negative website and gives you some really hands on advice on how you can do the same.
Now our task is not to necessarily stop using devices or to stop creating websites or to stop delivering content this way. Our task is to ensure that every single visit is a more sustainable one, that as we increase visits to our content that is more relevant and the amount of carbon emissions is reduced for all of those. Because in a study done by Whole Grain Digital, who also has a website carbon calculator, they found that every single page view, sorry, there was 1.76 grams of carbon emissions. For an average website with 10,000 visits, that's 211 kilograms a year. In our study, it was a little bit less because in our carbon calculator, we're crawling the entire website, not just the homepage. The homepage could be generally a lot larger.
And all of us in the room have the power to improve this, whether you're a founder who can inspire your colleagues or I'd like to think of these initiatives as being stronger when they're more taken from a bottom up initiative. So product people incorporating these into their processes, marketers who are leading more eco-friendly campaigns and tech and engineering being the ones to implement such great optimizations into their work. And so that's why I'm here to help you all today.
I wasn't supposed to be floating in that. I know that Photoshop is really bad. So how do you ask? First of all, we're going to take a look at how can we know the impact of our website. We're going to use things like website carbon calculators, so existing algorithms and technology and auditing tools that can show us and help us achieve a better understanding of our domains impact. We're also going to research into relevant sources and buildup knowledge. I've already started that for you. You're welcome. And then it's about taking action. So making rapid decisions and commitments to our marketing design and engineering efforts that will reduce our website's digital carbon footprint. We're going to keep identifying quick ways of creating and maintaining more light weight, available and speedier websites. Sound good?
First of all, let's check how we can know the impact. One of our data scientists at Ryte who has a PhD in climate science, the wonderful Dr. Katharina Meraner, she is always using this quote that she told me like, don't say that I was the one who made this quote first, other cool people said it before me. It's very important. "We cannot manage things that we cannot measure." Which is why she worked together with climate partners to create an amazing website carbon emissions calculator.
And again, just to show you again how websites contribute to this. End devices sending data from hosts to the device via the network, and also energy consumed by the servers. Now in a study in 2015, this was set to rapidly grow over time. And imagine like, again, over the Corona lockdown phase, this is going to keep growing and growing. In the algorithm that she created, they're taking into account two main data sources. Ryte's big data as a cloud based crawling technology, we can uncover average behavior from our customer's database. And when the customer enters their Google analytics data, we have a better understanding of how many visitors are on the website, but also taking existing studies into consideration as well. So peer reviewed studies from well respected institutes, like the Eco Institute in Germany and the French think tank the Shift Project.
Just to show you some points here, if you're interested in learning more. I can't give you all of the details for this propriety algorithm, but it's based on user based metrics, network based metrics and the data center based information. Things like sessions, carbon intensity of data centers, file size of the projects, all of these can contribute to calculating your actual status of your website. And then when you find out things like your website per year creates 1,300 kilograms of carbon, that's 8,800 kilograms driven by your car, which is four driving trips from Edinburgh to Munich every year that your website could be generating. It really brings it home when you learn these things.
There's also another great website carbon calculator out there that it also showed recently. There you can just input one page, maybe your homepage to also get a good understanding. During these optimizations and incorporating these new sustainability KPIs into our work, we should really report on what improvements are taking place as well. And this is a very, very new topic so I don't think I've seen a talk on this before on website sustainability. So what I would suggest at the moment are some very early stage KPIs to take a look at are things like the results from the carbon calculator. The carbon emissions per page view, this could be a great KPI to incorporate and check in, but also things like average file sizes, which really need to be trimmed and cut down and reduced. And also if you're using Safari web tools, which I never do, I'm more of a Chrome dev tools person. They have this pretty interesting energy impact per page. So taking a look at that over time could be a great indicator.
Now we've reached a better understanding of our impact, we can take some actions. Generally, sustainable websites follow these key points here. The lean, efficient, reliable, and relevant. That's what they should always aim to be. Minimizing power consumption on the user's device, providing only the most necessary content and code, keeping all assets and file size to a minimum, and minimizing data transfers and network requests as well.
The beautiful thing is all of this contributes to a much better onsite experience for your users. It decreases page load times. It reduces user frustration and exit rates and it increases conversions. And I think these are also strong arguments for you to get these sustainability optimization shipped as well, creating websites that are search engine friendly, user friendly, and eco-friendly. Lovely. Today I'm going to go through in the next 15 minutes, the 13 ways that you can take action for your own website.
Some of them you can do today. Some of them might take a few sprints to get implemented. And also I go through quite a few, but I also want to take this as an opportunity to learn from you all and maybe you have ideas as well, maybe you've already been working on such projects and campaigns, and then can show me and tell me more about what you learned. I'd love to hear from you afterwards.
First of all, is switching to a green hosting provider. In terms of enemies to the climate, data centers are pretty high up there. Not only do they consume energy to keep their systems running, but they also need calling systems, backup generators and there's a lot going on there for your standard hosting. So relying a lot on the electric grid, which is, depending on where you live in the world, usually around 85% of it is non-renewable energy sources. And then also using diesel powered backup generators in case something goes wrong. That's the standard hosting, which most of us in the room will be using.
These days, green hosting a has become much more accessible, which relies on more renewable energy. And then for non-renewables, they're using a lot of carbon offsetting depending on the provider that you choose. So just to show you the quick comparison there. I think Google themselves are a pretty good role model in this respect because they've already achieved carbon neutral, but now for their data centers, they're really working on providing carbon free energy at all times around the world in all of their data centers. Having this kind of clear plan, which again, some of your businesses might already have, and I hope they do, in achieving carbon neutrality, carbon negative energy, sorry, you can always take inspiration from Google there, who of course have a lot of data centers around the world and already consume a lot of power. Green hosting doesn't need to be expensive either. You can check out this, the Green Web Foundation have a great list of all the hosting provider around the world that you can take a look at.
Next up is using a content delivery network is always a very important optimization in web performance security in many different topics. Normally you have the origin server that then the serves the information to the user, which can be quite slow depending on where they are in the world, because the information needs to transfer geographically from a longer location. But using a CDN server, the information is cached all over the world and then it can be served to a user in a much faster way. CDNs can speed this up, this data delivery, and they can therefore also reduce the amount of energy and power needed to transfer information to your users. Now, I always like looking at Cloudflare as well as a great inspiration for these topics because they're also fighting for a healthier web, a more green web. You can check out Cloudflare if you're looking for a CDN, but there are so many affordable and useful CDNs available.
Number three is all about compressing and minimizing files. Remember, we want to make sure that data transfer is speedy and reliable. So really reducing those file sizes is going to work wonders in terms of reducing your website's impact. This is from the HTTP archive. They did a study on page weight. Every single a year they do analyses in terms of what is the state of the web at the moment. And they found that compared to 2017, websites or web pages, sorry, and file sizes are 40% larger than they used to be. Not only are they increasing in volume, they're increasing in size. For many, many reasons, web pages are just getting bulkier and heavier, requiring much more energy to be transferred to the end device there. When we take a look at a usual website, I'm going to take Bloomberg for a very obvious reason that it is a news website filled with stuff like ads and dynamic content and cookies and tracking pixels and always wants me to accept push notifications. It really makes you want to sometimes just turn off JavaScript. It's much better. I love bag of chips.
All of this is going on and it's only increasing. And it's not the fact that JavaScript is evil, which some of my friends in SEO like to say. It is just implemented in not the best way usually. It can always be optimized, reduced and improved there. Because yeah, JavaScript files are getting heavier as well, a 45% increase in a JavaScript file, the average JavaScript file compared to 2017. And when we take a look at, oh, the GIF is working, at a website like BrewDog, I love BrewDog. They make amazing beer and their initiatives, a carbon negative for their brewing being carbon negative is amazing. But when you look at their website, they have some things to improve that I would love to help them with in exchange for free beer if you're sitting there.
If you take a look at this sort of waterfall diagram here, which is clinically loading, you can see all of those network requests, I think around 220 of them being fired, like all of these requests going on there that is completely necessary, it's taking up way too much power and usage for the end device on the browser as well.
When we're going to optimize JavaScript and CSS file sizes in order to get there removing unused file or code, locating the unused scripts that just can be cleaned out. There's multiple ways of this. Using Chrome Lighthouse where you can see on their lone Wolf gin page, they have eight megabytes of JavaScript and over 50% of it isn't even used. Why? I know. Shake my head.
You can also find this in Chrome dev tools under coverage, and you can then look, go one step further to find which individual rules and scripts just aren't being used. Now, of course, you do need a responsible developer with you at this time when you start cleaning out JavaScript files because they can optimize it without just removing all the cruft as well.
So just some quick tips here for you of optimizing JavaScript and CSS files, you can do something called bundling, which takes those, yeah, those scripts together and also cuts out the unnecessary that can then create critical JavaScript and critical CSS that is needed for the pages first render above the fold, so just really optimizing the JavaScript there, creating also rendering service side can really speed up the delivery and also optimizing fonts and limiting the use of third party fonts there. So just some really quick, and I don't want to say quick and easy, because it always depends on your current stack, but some quick ways of really optimizing those files.
Let's talk about images. Yes, images are also getting heavier, 20% larger than they were in 2017 and growing. Doing something like running a website crawl to just quickly locate what are those unnecessarily large image files that can be just compressed down. There are so many high quality modern compression tools that can retain quality while absolutely squishing the file down. So BrewDog again, love you, but why do you have a five megabyte image of beer on your blog post? Did you know that the 1985 Super Mario Bros game was only 40 kilobytes? That one image file is 125 Super Mario NES games. It's inexcusable. So optimizing image file sizes, again, always compress as a rule of thumb. I'm going to show you a really cool tool to do that next. And you can also utilize these next gen formats, AVIF and WebP, which have a much better compression for that file transfer there to really minimize the network transfer.
So Squoosh is very cool. You can upload an image if you do need to sort of convince designers who are maybe a little bit worried of sacrificing quality, you can use the slider to compare the before and after. So there is, I don't know if you see down there, the 97% reduction in file size and the image quality is exactly the same. Squoosh is a really cool app.
Some other tips as well as providing image dimensions to ensure that the browser doesn't need to process how large and what format the image needs to be on the page there, so really speeding up that delivery that also resolves any unexpected layout shifts on your page using an image CDN, again, very important. And lazy loading offscreen images because someone doesn't always scroll down the page to interact with below the fold. So lazy loading can just ensure that these images are only being transferred and loaded if a user directly interacts with it.
And the final point in here is also keeping image usage minimal. You don't always need to shove a blog article full of images, always again, keep it relevant. That is a really important point of website sustainability, which leads me quite nicely to the next point of cutting out unnecessary assets and files. Sometimes less is more. Here is a gift of Fire Box who thought it was necessary to, is the GIF working? The GIF is working... To include four GIFs on one above the fold screen. So the little shake up there for Christmas, you got these swiping carousel, you've got the motion that is moving. You got the GIFs below and all of these GIFs equal a heck load of file size that needs to be transferred. Is it necessary? I would say not. I know this is an ongoing battle internally, but sometimes less is more. So just checking again in the core vital report.
Also of course worth mentioning for you SEOs or performance optimizations specialists that these improvements can also improve your core vital scores. Jonah is talking a lot about this today at 12. Can't wait for that. And back to BrewDog who are integrating unnecessary images in the shape of this slider. Do you see where the slider is? No. It's hidden under these white boxes there. What were they thinking? And then it integrates these three other images. They're just so heavy. That one grapefruit there, I think it's a grapefruit, equals around three megabytes of data. Why? Love you BrewDog. Of course using your tools to also locate pages that are really heavy with images are simply not necessary, can either be cut out or lazy loaded or optimized, and also checking the same for JavaScript usage. Maybe they can be bundled or optimized or just removed forever. Cutting out irrelevant pages. That's important as well.
So again, just to remind you of the average file size of pages getting bigger and bigger. I come from the SEO scene where in a lot of cases people seem to enjoy building up their websites full of additional URLs. They find a new keyword, they build a page for it. Do they still remember what they did with the keywords they located five years ago? Who cares? It still exists, it's still there. So websites are getting larger and larger. Here's just an example of one of my customers there, that's their GSC. And their amount of pages they had is increasing by 45% year over year. So just some quick tips for you. All the SEOs will hopefully be pretty well versed in this topic. So fixing duplicate content cases, removing highly similar pages, resolving cannibalizations where you have two or more pages fighting for the same keyword is completely unnecessary to have and you can also perform much better by having one optimized page.
Just checking this duplicate content issue here from BrewDog, where they have cases all across the website, just completely empty pages where people are even bouncing back and then trying to locate the right content for them and it's therefore causing user frustration as well. I also like to take a look at pages that are receiving no traffic, like no clicks over the past six months or year because that's showing me it's not relevant anymore and I can kick it out for good. Just some more tips there for you in order to reduce the amount of pages on your website to really have a much more relevant and cleaner navigation around your website and just yeah, cut out the cruft as well. There are so many more to get through so I just did a little quick lightning round.
More ways of reducing your impact, reducing video and audio. Some of you that won't be an option, but providing transcriptions and then also providing the thumbnails as well for an image that only loads when someone interacts can be a great yeah, compromise there. Not autoplaying videos or audio, optimizing a website navigation so that a user can clearly find their destination. Updating mailing lists because I didn't even touch on this topic today, but newsletter marketing can be completely heavy on carbon consumption. Using a progressive web app. AMP, I didn't mention today, but this can also definitely speed up these pages in the data delivery. And creating a dark mode view, which also reduces the energy usage on the end device. Now my final point here today is about raising awareness. That's also something we can all do and take away from today because this topic is still a newish topic.
I'm also trying to change that. I want to bring more awareness to events like these and to awesome people like you. And again, all of us in this room have the power to improve this. We can all go back to our teams, to our events, to our friends and peers and colleagues and make it clear that this is an important topic. We can all do this in several ways. Displaying your badge, you can get a nice carbon neutral badge if you achieve this, to highlight to other website owners and to visitors that this is an important topic. Sharing your successes with people around you, with your peers, with me. I want to hear what works for you. Create awesome case studies. That's also a great way you can support. Here's my nice badge down below on the bottom, looking very fabulous and highlighting to others that this is an important topic. Contributing your ideas as well. Again, very crucial. I want to hear from developers, engineers, product people, all of you, marketers, what ideas do you have?
I also have a really nice checklist that I want to share with you all. I have eco-friendly stickers that I left for the hotel, but I'm going to bring them for you. And again, reducing and taking action and promoting more website sustainability is such an ongoing topic. I'm really excited to see how this develops over the next few years and yeah, I want to hear what works for you. And if that wasn't enough memes for you, I want to share that nobody is born cool, except of course, people who reduce their website carbon footprints.
Thank you so much. This was a pleasure and an honor. Get in touch with me and speak to you all soon. Thank you.