You. Hi. Welcome to my talk today. My presentation will be a little less technical, but I hope you learn a lot from it. I will focus today on building a better web, the role of front end code and resource optimization. And why am I trying to raise this subject? The answer is simple, reducing carbon emissions. So let's start with this question. Do website contribute to global warming? Today? The Internet and digital systems are developing very rapidly. Digital ecology is trying to make the development of the Internet more sustainable and less aggressive towards the environment. So it's not about taking a step back, but making the Internet a better place in practice. Everything we do online and everything we do offline with our devices generates some amount of carbon footprint. So how does the Internet emit co2? Let's go through the journey of the data package on the Internet. This adventure of this data starts in some kind of data storage servers, data centers or the cloud. Everything that comes to us from the Internet and everything we send to the Internet must be stored somewhere. No arrays. As you know, most data is stored in the cloud. And what's the cloud? The name suggests it's something above our heads, white and light, and we just upload files there and then we can magically access them from any device and any place in the world. Unfortunately, the trough is brutal, and clouds are not just shadows in the sky, but they are actually huge, massive data centers that needed to be powered all the time. The cloud is storing more and more data, even if users don't necessarily want it. So any data must be transported from the cloud to your device. And that's done by the communication infrastructure that also needs to be continuously powered up. We'll take a closer look at this stage in the next section. The final step is the end devices. Our smartphones, laptops and tablets needed to be powered too, not to mention the resources that are needed to produce them. This is also in terms of digital ecology. A study done by Canadian University says that the energy used to charge smartphones has overtaken the energy used to charge pcs and laptops in 2020. The production and charging of smartphones alone is responsible for about 1% of all global emissions. It's important to extend the use time of smartphones so they can produce fewer of them. But does all of this have a real impact? Should we be so concerned? The answer is yes. The digital world has a significant impact on the climate change. As much as 4% of all greenhouses gases code from the ECT world the growth of the Internet is not holding back. And on the contrary, by 2025, 100 zetabytes of data will be stored in the cloud and generating 200 billion tons of co2 per year. So what can we do about this to live more sustainable digital life? Let's see some examples. First thing, emails. Guess how many of them are sent every day. In the next year it will be 345,000,000,000,000 emails each day. Sending just one generates on average like 4 grams of co2 and storing one email for a year. On average it's 19 grams of co2. And it's worth adding to this information. That average Internet user arrives at approximately 10,000 emails in their inbox. So if you don't necessarily need to send emails, it's worth using the other tools such as slack or internal communication tools, or archaic text messages. They are much lighter. Spam statistics shows that almost 50% of emails in 2020 were spam. Using an antispam has a positive impact on the environment. It's also worth paying attention to the size of the emails. If you want to add an attachment, it's better to compress the files or send a link to download the file by using retransfer or Google Drive, anything. It's also worth thinking about unnecessary extras such as footer, photo, company log, et cetera. This all increase the size of the email. Next thing, browsing ecological ecosia, Lilo or ethical duckduckduckgo are great browsers and definitely can replace the most popular ones. You can be a nontypical programmer and close your tabs. Most open sites maintain an open connection to the server and also generates a carbon footprint. If you know the address of a page by heart, type it directly into a browser brow bar. This saves the energy of the search engine. You also can make use of bookmarks and keywords. And last thing, but also important, try to delete your social media data from time to time. Okay, devices. So replacing a laptop every six years instead of standard four can save 190 emissions per person. You also can save some co2 by deleting mobile apps you don't use or disabling mobile notifications. And also you can try to disconnect from the Internet whenever your hectic lives allows you to do so. Finally, we come to the clue of the presentation. The websites. First fact. Did you know that every day 250,000 of web pages are published? And every page, every view of this page generates on average 1.8 grams of co2, what sums up to 216 annually. That's the same thing as driving 900 km by a gasoline car. And that's only just for one website. And question for you, do you or your company have a website? The better question who doesn't? Would you like to know how much co2 is emitted of this website? Emitted by your website? I will show you how to check this. The first website I would like to recommend you is the original website carbon calculator. You only need to enter the URL of the website and if it's okay with your website you can get a free batch that can be added into your project. And let's see if we have some other examples. Yes we do. The next one is green pixie. It works the same as original website calculator and the last one is echocurrider. It also works the same. And our little tradition on these talks and presentations I always check how much carbon footprint is generated by website that describes the conference I'm talking on. So how much carbon footprint is generated by conf. Fourty two website? Unfortunately it's deer than 94% of web pages that's ever tested in original website carbon calculator. And every view of this page generates almost 4 grams of co2. It's not great honestly. But the great thing is that this web page appears to be ranging on sustainable energy. In this website you can also see how many Co 2 grams equivalent is produced by a year, or how many bubbles, or how many trees you need to plant to get rid of this co2. Okay, from this point, let's go further. This is Tom Greenwood, the author of Sustainable web design book which describes techniques that make a website more sustainable. I will tell you about some of them in a moment. Before that, let's make a moment to talk about how co2 is called by a methodology presented in the Sustainable Web Design foundation. It's based on the data transport which is in the middle stage of the data transfer on the Internet. The other stages are very difficult to estimate so we only focus on this part. According to research conducted by SWD, 75% of people return to the site first visit means that all data must be downloaded and returning visit means that only 2% of data is cached. So energy emissions means how much co2 is produced per 1. It's vary for each country and the value is averaged by SWD. Okay, we can move to the part. When I talk about really specific practices on creating the websites more sustainable. First thing is language. Once the website was written from the scratch or developed using platforms like WordPress or Wix as then we don't have total control over the website and they are worse to maintain perfectly. If you are coding your website. From the scratch on the graph you can see that the best language is JS. A little worse might be typescript which is transpiration of js and the other languages like Python Perl are not very recommended to create green websites and from this point now I will assume that we are talking about sites written in JS. If you write in JS, it's already good, but it's important to follow popular standards as use well known frameworks such as react or angular or vue. This way there is a greater chance that our code will be reusable and the time spent debugging will be shorter. The heavy libraries most of the loadash functions or jquery can be replaced with Vangila JS code for HTTP clients used for queries built in fetch can meet our requirements perfectly and can save up to 0.2 grams of co2. First and foremost the number of queries rethinking whether the data all the data is needed optimizing of the data retrieved from the API server side or frontend caching instead of asking each time for some data, we can cache to the data locally and do you know what image format do you use the most? The best two are SFG and web. S 5G is a vector format. Web is invented by Google in 2010 and comparing web to PNG saves almost twelve times more data in our website. Honestly, if you really don't need to have videos on your page, just please don't give them. And if you really need to, please use web. It's a twin format of web saving up to 50% of space. Next links will be font formats. The best one is supported by all browsers, the system ones. The next are local fonts that are hosted on our server, not hosted online. And if you want to use local fonts, please use Wolf tool format. It's much better than ttf and can save up to 70% of space colors in OLED screens. Up to 50% of energy saving is when you have dark theme and it's definitely worth having the last thing hosting pew defines the hosting efficiency indicator and how much energy is used. And it's better to use hosts that are running on renewable energy and have some green behavior policy like planting trees or green employee. You can find all of them on the Green web Foundation and some examples are Sarava from Finland s four hosting from Lithuania, strata from Germany or crystal hosting from the UK. The next thing is user data collection or caching. Most sites collect user data to target advertisements. This account for a significant portion of the data transfer and it's not only the co2 thing, but it's also unethical. And there was an experiment. The USA Today website make a copy of themselves to meet the european GDPR policy and with this experiment they make 91% lighter and faster website without user data collection. So I think that's a change. Okay, so why are we do this? The first thing is of course carbon footprint mitigation, the second electrical energy savings and the third is shorter loading time. But did you know that 55% of users can be lost if a website loads longer than in 3 seconds? So the last thing is better SEO. So our website is higher in positioning of the search engines. So the last thing we can do about this is use some linter. If you're a JS developer, you probably use eclint. And good news, there is an eclint equivalent that tells you what you can do to make your website greener. It's open source and me and my team are working on to develop the store. Okay, this is our features. The blue ones are already ready to use in your projects and the purple one are not developed yet, but we are working on them. And does it really work or not? The whole sustainable thing? And our analysis shows that after implementing the techniques from the SWD, you can reduce page size up to 88%. And this is without any visible impact from the user. And our tool eclint can definitely help with this. So in summary, eclint prompts something similar to lighthouse but acts like eclint. Instead of fixing already existing pages, eclint suggests what can be changed already while writing the code. We are aware that our tool is only a drop in the ocean of needs, but ultimately we want just one click is enough to make our website eclint. This will be easier if you help us to develop the tool and share the project with your friends. If you think that what are we doing makes sense, please leave us a star on GitHub. These are all references I used to make this presentation and this is my profile. Thank you for joining my talk. Feel free to contact me on LinkedIn. You can use this QR code to see my file. I will be happy to answer all your questions. Again, thank you for your attention and have a nice conference.