Conf42 JavaScript 2022 - Online

Digital ecology - Can you mitigate the carbon footprint of websites?

Video size:

Abstract

Did you know that more than 250 000 websites are published every day? The majority uses too heavy fonts, too large/unnecessary images or utilises redundant libraries. These and other factors generate the carbon footprint. Actually, one view of an average website emits 4.6 g CO2 which sums up to 553 kg CO2 annually. Unfortunately, current solutions optimise only already existing websites.

ec0lint is a tool for frontend developers that mitigates the carbon footprint of websites. It shows tips advising how to create a more climate-friendly code. Thanks to code optimization ec0lint can help in reducing CO2 emissions per one view from 4.6 g to ~0.2 g saving 529 kg CO2 (-96%!) annually.

In the keynote, we want to share our knowledge about digital ecology with the audience, tips and tricks on how to mitigate digital footprint and information about the tool we created.

Our website (active from the official release day 07.06.22): ec0lint.com An article with tips written by me: https://www.linkedin.com/pulse/change-your-online-habits-mitigate-climate-crisis-katarzyna-wojdalska/ An article about digital ecology written by me: https://www.linkedin.com/pulse/have-you-ever-wondered-how-much-carbon-emissions-your-wojdalska/ Our GitHub: https://github.com/ec0lint/ec0lint

Summary

  • Digital ecology is a field of study about the interdependence of digital systems like the Internet and the natural environment. Everything we do online and what we do offline with our devices generates carbon footprint. What can we do about it? Simple techniques that you can be using in your daily life.
  • Every day 250,000 new web pages are being published. Each of them generates 1.8 grams of co2, what sums up to 216 annually. What can we do to create more sustainable websites? Using plain JavaScript or lighter libraries.
  • Eclint proposes possible code improvements to mitigate the carbon footprint of websites and makes them basically more sustainable. We hope to reduce with eclint the emissions even by 88%. And as this is an open source tool, it's completely free to use.

Transcript

This transcript was autogenerated. To make changes, submit a PR.
Jamaica real time feedback into the behavior of your distributed systems and observing changes, exceptions. Errors in real time allows you to not only experiment with confidence, but respond instantly to get things working again. Code hi. Today I'm going to talk about digital ecology and how to mitigate the carbon footprint of websites. Let's begin. What is digital ecology? It is a field of study about the interdependence of digital systems like the Internet and the natural environment. So, long story short, everything we do online and what we do offline with our devices generates carbon footprint. But to be clear, digital ecology is not about taking a step back. It's not stopping people from using the Internet. It's all about introducing more sustainable, greener habits and routines. You might wonder now, how does the Internet emit co2? It starts with data collection. So with servers, with data centers and the cloud. And if we think about the cloud, we might think about something white, light, bright or in the sky. But the truth is that storing data in the cloud means storing data in these large facilities called the data centers, which have to be powered up and cooled down 24 hours, seven days per week. For example, storing 100gb of data in a data center emits 0.2 fonts of co2 per year. And this is 700,000 times more than if you would be storing this data on your hard drive. Another fact is that data centers are responsible for 1% of world's electricity consumption. Next, data transferring via the infrastructure, via the telecom infrastructure. So power lines and everything here has to be powered up as well. And last but not least, end devices. So, for example, charging smartphones, the energy that is needed for that overtook the energy that is needed for charging laptops and pcs in 2020. And producing and charging smartphones is actually responsible for 1% of all global emissions. Pretty impressive. And I'm not even mentioning these natural resources that are needed for manufacturing our smartphones. So is it important? It quite is. The ICT industry stands for 4% of all greenhouse gases. And if we go back to the cloud by 2025, we predict that in the cloud we're going to be storing 100 zetabytes, which will be emitting 200 billion tones of co2 per year. What can we do about it? These are some simple techniques that you can be using in your daily life. So let's start with emails. By 2023, the predictions are that every day there's going to be 347,000,000,000 emails sent out every day. And sending one email results in existing 4 grams of co2. Another factor is that storing emails emits 19 grams of co2. So deleting emails or just sending them less really makes some sense. And one average user stores 10,000 emails on a mailbox. So deleting emails, unsubscribing to spam, and using alternative messaging tools like slack or the old sums is really important. And if we think about the size of emails, you can, for example, try to remove an image from your footer to decrease these size and thus emit less co2. When it comes to browsing, there are some alternative to Google. So to our most favorite search engine. So for example, there are search engines like Ecosia or Lilo, which are more eco friendly, let's say. And there is also the DuckDuckgo, which is much more ethical. Another factor is closing tabs, because if they still remain open, they still have a connection with the servers. If you remember the address, write it directly in the tab. Think about marking some of your favorite pages by adding bookmarks and briefing the keywords that you use. It's also important to erase from time to time your old media on social media platforms. And when it comes to devices, changing smartphones or computers left often is very good for the environment. So imagine that, for example, replacing every 6th year instead of every fourth year, your computer emits 190 kilos of co2 less. So this is quite a large change. It's also about deleting mobile apps that you don't use, about disabling mobile notifications. And for example, you can try also unplugging your router for the night. Let's go now to the main topic of today's speech. So, websites, did you know that every day 250,000 new web pages are being published and each of them generates 1.8 grams of co2, what sums up to 216 annually. And this assumes that a web page is being visited 1200 times monthly and this number, so 216 less this much as for driving almost 1000 gasoline car. So how much co2 does your website produce? Have you ever wondered that? To check it out, you can use this popular tool online called the website carbon Calculator. It is very clear about how to calculate the carbon emissions. It's very transparent, so I can strongly recommend it. And here it's enough to just copy paste your URL here and click the calculate button. So how to calculate the co2 emissions of these website? First we have to consider the data transfer of an average visit. So according to carbon calculator, the data transfer of the first visit stands only for 25% of all visits. And the data transfer of the returning visits stands for 75% and it is equal these energy of the website multiplied by 2% because already some data was cached before. So during the first visit then we have to consider the energy of the website, which is equal to the website size multiplied by the end user traffic, and the end user traffic here is equal to almost 1. Last but not least, the emissions of zero to per one visit. So this is equal to the data transfer of an average visit multiplied by the energy emissions. And the energy emissions vary from country to country. So what this web page is using and what we are using in the tool is 442 grams/kw hour. So this is the global average of energy emissions. So to sum it up, the emissions of co2 per one visit are equal 75% multiplied by the website size, plus 25% multiplied by 2% multiplied by the websites. And this is multiplied then by the end user trapping and by the energy emissions. So what can we do to create more sustainable websites? First, let's think about the programming language. I assume that you are all coding your websites in either JavaScript or typeScript. And here, as you can see on the graph, JavaScript is a little bit better than typescript and much much better than for example Ruby, Python or of course the worst. But of course if we talk about websites, it's much better to use JavaScript or typescript than platforms like Wix or WordPress. Because then we have more control over the code. We can more easily remove some largeunnecessary parts and implement any changes. When it comes to libraries. Here you can see some of the most popular ones with their emissions. So for example, you can rethink if all of the libraries that you're adding are really needed. Because for example for load you could maybe try using just plain JavaScript, or you could use the already built in fetch instead of adding some largeunnecessary libraries when it comes to calls to external APIs, think about reducing the number of calls. So basically rethinking the logic of your call about caching data both on the frontend and on the back end side. And as I already mentioned, just using plain JavaScript or lighter libraries. When it comes to resources, there are three most important factors that you have to consider. So images, videos and fonts. When it comes to images, it's best to save them in SVG or Webpy. Webpy is a very highly compressed format and SVG is a vector format. So all of them, the file sizes of images saved in these formats are much less than if these would be saved in for example pNg. So here you can see like 95% of a difference. And here you can see again a table with the corresponding co2 emissions based on the file format for this image shown on the left side. When it comes to videos, a sibling format is Webm. So it's also a highly compressed format which I strongly recommend. And when it comes to fonts, it's of course better to use the system fonts than these hosted online. And if we think about the formats then the most popular format is TTF, but it's also the less sustainable one, so it's better to use wof two. And here you can see that by just changing these font format we can get up to -70% of co2 reductions. And of course a user will not see the difference. So all these changes will not influence the quality of your website. Talking about colors, it's really good if you could enable a dark mode of your website. And here you can see what is the energy efficiency of different colors on all emits screens hosting so every time you pick a hosting provider, take a look at the power user usage effectiveness. So Poe of the data center that your hosting provider is using, the lower the number the better. Think also about the policy of your hosting provider because some of them are using for example green employee behavior policies, they are planning to plant trees and so on and so forth. So they are doing much more than just using some less power user effective data centers. And it's of course good to use a hosting provider that uses renewable energy. And if you don't know where to look for a green existing provider, I recommend to open the green web foundation website and take a look at some options there. Last but not least, user data collection. So it's about tracking users, it's about personalized ads and collecting the data. And here is an example of USA Today which was a web page, which still is a web page, but after the EU introduced these GDPR policy, it started to run faster. So actually it was loading 91% faster, so it became these much lighter. And why should we be doing all this? So first of course we can mitigate the carbon footprint and thus we can also save electrical energy. This results also in shorter loading time, which is really essential for uses. And for example, here's a statistic that 53% of users can be lost if a website loads longer than in 3 seconds. And with shorter loading time we can improve SEO as well. So you don't have to remember all these techniques by heart. But if you want to please read this presentation once more. You can also read a book called sustainable web design. I can strongly recommend this one. It's written by Tom Greenwood. But together with my team I developed a tool called eclint. Eclint is Alvinter. It works very similar like Athlint, but what it does, it proposes possible code improvements to mitigate the carbon footprint of websites and makes them basically more sustainable. And it contains of two elements. So eclint and this is more or less like s eclint and eclint style which can be compared to for example, stylint. Hope that you know these tools and eclint style is for CSS and CSS like languages. And underneath here you can see an example of how you can be using eclint, what kind of command it was and what change did it implement. This is the list of features that we want to implement by the end of the year. And them ones marked in blue are the ones that we already implemented and the violet ones are the ones that we are still working on. And what we hope to achieve is that we can reduce with eclint the emissions even by 88%. So according to our calculations, we hope this would be doable after comparing some heavy websites to the lighter ones. And for example, so I mentioned in the beginning that every day 250,000 new websites are being published. So assuming that they would be visited 10,000 times a monthly, this would emits 54 million annually. And this is equal to driving 220,000,000 gasoline can by reducing this number by 88%, suddenly we get 26 million kilometer only. So how to get started with Eclint? First of course you have to have node installed. Then you have to install eclint, eclint style and eclint style with the recommended config. Then you have to initialize the project with the recommended config and you have to run it. So run eclint and eclint style. We are still working on IdE. So soon it is going to be even much easier to start using Eclint. And as this is an open source tool, it's completely free to use. And if you think that this project sounds interesting to you, we strongly recommend you to just text us and start collaborating. Here is the list of references and this is me Katajana. I'm the co founder and CEO of eclint. Feel free to reach out to me on LinkedIn or just text us by using the website. By using the email you can also check our LinkedIn profile and if you like what we are doing, please leave us a store on GitHub. Thank you so much for your attention.
...

Katarzyna Wojdalska

Co-founder @ ec0lint

Katarzyna Wojdalska's LinkedIn account



Join the community!

Learn for free, join the best tech learning community for a price of a pumpkin latte.

Annual
Monthly
Newsletter
$ 0 /mo

Event notifications, weekly newsletter

Delayed access to all content

Immediate access to Keynotes & Panels

Community
$ 8.34 /mo

Immediate access to all content

Courses, quizes & certificates

Community chats

Join the community (7 day free trial)