Web Almanac 2024: Is the Web Sustainable?

Hello, everyone. My name is Burak. Today I will be talking about the web sustainable question. Before that, let me give you a small introduction about myself. I'm Turkish. I moved to Germany, to Berlin, four years ago. I work in a company called Iberal. I'm quite in love with cold weather, so Berlin is a great match for me. You can see me stupidly jumping in a place called Admirabüke. It's generally freezing in the winter times. It's a lovely place. I recommend to go there, but maybe not jump because it's not safe sometimes.

Today I will be talking about Web Almanac. Web Almanac is a report that I've been voluntarily working for for the last year. We've been checking and doing some data analysis on nearly 17 million web pages. And we are creating some report about sustainability of web, JavaScript analysis, privacy, like a lot of chapters about it. It's like a Spotify wrapped. If you need an example, when you get your Spotify wrapped, you are getting the best artist, the genre that you really like. It's like a report like this, but in tech terms and for developers mainly. But today I will be talking about the sustainability chapter because the whole report is actually huge. And I was volunteering for sustainability chapter and the page weight chapter. I was an author and data analyst for those chapters.

Today we will be checking is the web sustainable question. But before that, I wanted to do a shout out to the team that I worked with because it was a great teamwork and we got the best chapter award of this year, which is really cool. So let's dig in. Before digging in, I need to give you some introduction to my slides. There will be generally two charts next to each other. One will be from 2024 data, latest release. And the other one is from 2022 data. We don't have 2023 release.

So the previous one will be 2022 and we will compare those two years to each other. In each chart, generally there will be a percentile at the bottom. 19th percentile represents the most of the web, nearly 17 million web pages that were tested. I will be mainly focusing on the 19th percentile, which symbolizes the average of the internet, but I will occasionally mention the 10th percentile as well.

In 2024, each web page loads an average of eight megabytes of data, exceeding the recommended limit of 500 kilobytes per page. This is a significant difference compared to the one-megabyte maximum. Despite the high data load, there has been a slight improvement since 2022 when the average page weight was nine megabytes, showing a decrease to eight megabytes in two years.

Examining unused CSS, in 2024, 225 kilobytes of CSS were shipped but not utilized, indicating a potential waste of resources. The number may seem small, but when multiplied across numerous web pages, it becomes concerning. Similarly, unused JavaScript poses a challenge, with 907 kilobytes being shipped, close to the recommended maximum of one megabyte. This data waste can accumulate significantly with repeated clicks. The percentage of desktop pages using green hosting decreased from 13% in 2022 to 12% in 2024, suggesting a concerning trend of underutilizing sustainable hosting practices.

So unused CSS, you can see that in 2024, 225 kilobytes of CSS was being shipped, and it was not being used, which is not a huge number. But if you multiply this with thousands, let's say, if you have a web pages getting thousands or millions, maybe, then it multiplies a lot, and it goes to a very concerning number. In 2022, we had 221 kilobytes. So we did even increase by four kilobytes. It's not a huge increase, but we would expect this to go lower actually.

Let's check unused JavaScript. So unused JavaScript is a bit depressive if you ask me, because we are shipping 907 kilobytes of unused JavaScript, which is actually super close to the maximum that we recommend, which is one megabyte. And this is way too concerning if you ask me. So if you multiply this with thousand clicks or millions of clicks to your web page, this is creating a huge data waste. And in 2022, it was 645. So personally, I would think that this would decrease, but it got increased nearly 300 kilobytes, which is quite concerning.

Okay, we have some unused code that we are shipping. We are using some data for nothing. We are wasting some resources, but maybe we are using green hosting, right? And then we are balancing some stuff out. But unfortunately not. In 2024, the desktop pages, 12% of them were using green hosting. And in 2022, it was 13%. So it got even lower by 1%. As my personal comment, this can be happening because of the AI, because after the AI, all of those hosting companies which had the green hosting goals kind of got out of the route because they needed to keep some resources for AI. And this kind of created some problems in terms of sustainability for us in the web.

Image weight. So we said that we are shipping eight megabytes of data, and more than half of it is actually image weight. So in average, a page is loading 4.4 megabytes of image weight, which is actually huge. And it's creating a huge data transfer that we need to optimize.

Image format. So here, for the first time, we are seeing some good results. If you ask me, on the left chapter, you are seeing change from 2024 to 2022. And we have two really good formats, AWIF and WebP. AWIF increased by 386%, but this is a bit misleading because AWIF was being used by 0.3% in 2022, and it just increased to 1.4%.

Image optimization. So lazy loading. Lazy loading is very easy. You just add one attribute, and then you load your image lazily. But only just a bit above 30% of the images are using this attribute, which is a quite low hanging fruit, actually. And then responsive image types. Only 32% of the images are using source set with sizes. Source set with size is basically if you have an image, and if you have both desktop and mobile view, if you ship a high resolution to the desktop view, you don't need to ship this high resolution to the mobile because mobile view is small.

Lazy loading is very easy. You just add one attribute, and then you load your image lazily. But only just a bit above 30% of the images are using this attribute, which is a quite low hanging fruit, actually.

Responsive image types. Only 32% of the images are using source set with sizes. Source set with size is basically if you have an image, and if you have both desktop and mobile view, if you ship a high resolution to the desktop view, you don't need to ship this high resolution to mobile because mobile view is small. You can show a lower resolution, but if you don't use source set with sizes, you are basically shipping the same image with the same size, and you're wasting a lot of data transfer because you don't need that high resolution. And only just 32% of the images are using this one.

Text compression. So text compression is the easiest thing to do, if you ask me, after the image lazy image trick that you can do. 53% of the files are not being compressed while we're transferring that one, and it's a very easy fix. It's basically, right now, for example, we are shipping a phone to our grandma. We bought a phone to our grandma. We will ship it to her. We are grabbing a huge box, putting a very tiny phone inside of it, and we are shipping this box with full of air, which is actually huge waste. You could just compress it, and you can send a small box, which would be way easier and which would consume less energy.

Caching has been a long-standing practice in web development, with only 25% of web pages currently not utilizing caching. While this percentage may not seem alarming, there is room for improvement to enhance sustainability and reduce page weight. Image optimizations play a crucial role in this aspect, with AVF and WebP being highly efficient image formats. It's essential to consider all users, including those on Internet Explorer, by providing fallback options for supported formats and optimizing images for mobile devices.

Text compression is another simple yet effective method to reduce file sizes. By implementing gzip or other compression techniques, files can be compressed for efficient data transmission. The importance of considering various optimization strategies, such as lazy loading and source set for mobile web, cannot be overstated. These approaches not only improve user experience but also contribute to reducing unnecessary data transfer and enhancing web page performance.

In conclusion, optimizing caching, image formats, and text compression are fundamental steps to improve web sustainability. By addressing these optimization techniques, web developers can enhance the efficiency and user experience of their web pages while considering the diverse user base across different browsers and devices.

But according to our research, right now, 25% is strictly not using caching. Okay, I gave lots of negativity. I'm sorry for that. Now I will give some solutions to fix those stuff and increase the sustainability of your web page and decrease your page weight, hopefully.

Image optimizations. So AVF and WebP are the most optimized image formats that you can use. In the charts below, you can see that they are not being supported by Internet Explorer. I don't say that, ignore Internet Explorer users. Just use it and we don't care about them. No, this will create some accessibility issues. Those people also have the right to use the internet. Maybe there are some old people who are using it.

Maybe some people like Internet Explorer. We cannot judge. So those people also can use it. But basically, you can use the picture tag to fall back to JPEG or PNG when you're using AVF or WebP, which is quite an easy solution, if you ask me. And then you can use lazy loading and you can use source set to optimize your mobile web to ship lower resolution images so that you don't transfer that much data.

Text compression. It's very easy. You can just use gzip or other options to compress your files. And when you compress your files, you will be transferring less data, which will be increasing your sustainability of the page quite in a good way.

Page weight. I know this is not a very low hanging fruit. Sorry for that. I said low hanging fruit, but this is not something new also. It's so common that you can just create some smaller chunks and you can load those smaller chunks whenever they are needed. You don't need to load everything at the beginning. You don't need to consume that much of energy.

Green hosting. This is a very complicated issue. Because green hosting, it's so hard to define a hosting service to be green. It changes according to your country, it changes according to the place that your consumers are using your website. It has lots of parameters. But still, if you're curious about it, you can check the bullet point three to see the available options for yourself.

If you want to learn about more green hosting, how it works, you can go to the link on the right bottom of the slide and you can learn more about it. It's a good improvement. You can change the green hosting. It might cost a bit more, but then your webpage will be more sustainable.

Caching. So caching is not something I don't need to give too many solutions to that one. But there is one underdog solution to this one. If your page is strictly using non-cache policy, which can be understandable, and which is sometimes needed, but still, in some cases, you can still use e-tech, which is an underdog option to cache some data.

It might cost a bit more, but then your webpage will be more sustainable.

Caching. So caching is not something I don't need to give too many solutions to that one. But there is one underdog solution to this one. If your page is strictly using non-cache policy, which can be understandable, and which is sometimes needed, but still, in some cases, you can still use e-tech, which is an underdog option to cache some data. So there will be a hash on the server. There will be a hash on your device. And if those hashes are matching, the server is not going to give you the file again. You're not going to transfer in data. But if these hashes are not equal to each other, then it means that the file on the server side is changed and then you will fetch it. So you will be fetching the data only when it's necessary. So you can do such optimizations to reduce your data transfer.

Last two informations. Emissions of the website. So at the end of the day, in average, websites are producing 1.47 grams of carbon dioxide. And actually, it was 1.29 grams in 2022, which got increased. We would expect this to decrease because we are advancing every technology, making things more optimized, but still, our emission is increasing and increasing. We should be starting to focus on the sustainability of our web pages also.

Last funny data. So I gave really bad statistics all the time. I kind of maybe judged you. I didn't want to. I'm sorry. But I also need to give some statistics about us. To make this web almanac, we consume some carbon emission also. This is equal to manufacturing 323 smartphones. Which is not huge, if you ask me, but it's also not small. Maybe we can improve it. Maybe you can join us. You can have some ideas and you can decrease it. We are always open to people. And lastly, this is the end of my talk. We need lots of contributors. We need lots of volunteers. You can be the lead of the chapter, editor of chapter, author, or data analyst. We need all kinds of people to help us. If you like the project, please join us. Please volunteer with us. And thank you for watching.