 Warum unser Web nachhaltiger werden muss und wie wir das anstellen. Und eurer Referent ist der Niklas. Er gibt euch einen kurzen Einstieg ins Thema Klimawandel und welche Beziehungen zum Netz da bestehen und wie die sich ergeben. Ein großer Applaus bitte für Niklas. Dankeschön. Danke. Danke, dass ich hier sein kann. So, heute reden wir über das Planet-Friendly Web. Welche Effekte hat das Internet auf der Welt? Und wie können wir sie ändern und wie können wir sie minimieren? Aber bevor wir beginnen, müssen wir über dieses Bild von Professor Julia Steinberger. Mit dieser Illustration hat sie versucht, 4-8-Jährige zu erklären, was Klima-Veränderung wirklich bedeutet, was Greenhouse-Gasses wirklich tun. Und es war wirklich interessant für mich, wie leicht es sein kann. So, im Prinzip ist es so, dass wir eine Atmosphäre um unsere Erde haben, und das macht es sicher, dass unsere Erde nicht durch den Sonnenblatt geblieben ist, sondern dass es auch warm ist. Aber die mehr Greenhouse-Gasses wir ermitteln, die mehr Fälle wir um unsere Erde rappen. Und die mehr Fälle, die wir innen können und die weniger, die wir ausgehen können. So, dass unsere Erde schwerer ist. Das bedeutet, dass als unsere Erde schwerer ist, das Wasser-Zirkel wird ändern. Auch mehr Wasser wird ein Teil der Atmosphäre sein. Das Problem ist, dass es so etwas wie diese gibt. Die Studierungen haben gezeigt, dass die Klima-Veränderung nicht nur die Zahl der Klima-Katastrophen, wie die Hurricanes, sondern auch die Intensität dieser Katastrophen erhöht. Also, eine warmer Atmosphäre und mehr Wasser in der Atmosphäre, die Hurricanes werden schlimmer. Also, wir fühlen das, z.B. mit Hurricane Dorian in den USA, in Amerika. So, Schööpfer, wer hat das vorhin gesehen? Diese sind die Klima-Streifen. Oh, ein paar Leute, das ist schön. Für die, die das vorhin nicht gesehen haben, ist das die Visualisation der letzten 100 Jahre. Was Sie sehen, sind 100 Streifen. Jede Streifen repräsentiert ein Jahr und hat die gewöhnliche Temperatur in diesem Jahr. Die größte Red der Streifen ist die wärmeren, die das Jahr war, die gewöhnliche. Und man kann genauer sehen, dass das die Klima-Streifen-Version für Deutschland ist. Man sieht, dass die letzten 100 Jahre und die letzte Quartum, die gewöhnliche Temperatur, hat sehr viel gesammelt. Also, wenn wir über die Klima-Streifen reden, wir reden nicht nur über die Philippinen, sondern auch über andere Länder, die weit weg sind. Aber wir sind auch von dieser Stelle geimpft. Also, talk to the forest keepers, they are already noticing the effects in their everyday life. Und wir in our everyday life, or most of us, they are aware of this. They try to act sustainably by, for example, purchasing organic products. They are not buying coal energy. They might ship parcels climate-neutrally. So these are things that we do actively in our everyday life because the environment is important to us, but not in our professional life. So this most often doesn't go beyond, please think of the environment before printing this email. Most of you have probably seen this before in some email from some company. For many, this is the only connection between environmental protection and their professional life. Who of you has seen this on a website before? Show of hands. So, less hands here. We can see text like, I've seen previously quite often, but this here is not so common. A radical example of a website that does it differently is the low-tech magazine. I don't know who of you knows this, but you can see this yellow area here. The yellow area shows how much battery the server has left. The server is only powered through solar energy collected at some balcony in Barcelona. There's a little respiratory pie there with a solar panel attached to it. And if the sun is not shining for a duration that's too long, then this will be reflected here on the website in the photo. You can see some uptime statistics. Two weeks are left if the battery is depleting. For example, if the sun isn't shining enough or too many people are reaching out to load this website. We often talk about flying less because flights are very harmful to the environment. There's 830 million tons of carbon dioxide caused by the flight industry globally. But the thing we talk and think about less is the internet, which emits roughly the same amount of carbon dioxide. It's sad that until 2020 the internet is going to emit twice as much as flights. But we never talk about this. We never talk about changing our streaming behavior. We never talk about if we really, really need that website with the big pictures, but we mostly talk about flights. And this is what I'm trying to change with my talk today, because we need to keep in mind that the internet is made up of data. Data is essentially electrical impulses and those need energy. And energy production causes greenhouse gases and carbon dioxide specifically. This is a very simple formula we need to keep in mind when we code websites or develop digital products. Data as energy is carbon dioxide. I think most of you are aware of how the internet works. But not so long ago, when advertising was printing flyers or magazines were printed, this was a difference. Back then we had the printing process which used resources once. Then we had to distribute that and transport paper, etc. Then it doesn't matter how many people read this newspaper or how long it stays in our cupboard, it doesn't use any additional resources. It's different with digital products. Digital products use the most energy when they're being used intensively. For example, because packets are being sent to the DNS server, to the web server and then they're getting sent back. All this uses energy and the more people use a product, the more energy is used and is needed. What we need more of is cool people who think about making our products more sustainable. We often have people who really, really think hard about how the economic sustainability. We also have people who are concerned with the search engine rank of the page. We have people thinking about at best the accessibility of the page but which we don't have today. Our professional people who are concerned with the sustainability of a site or how it might be designed more energy efficiently. Which features might need less energy than others? We need more of this. In the next 30 minutes you're going to get a crash course about this professional. I've distributed this talk into three parts. The first part is about energy, which energy is used to run my page. Then there's about the resources I send and then finally we're about the responsibility towards our users. Before we start with that, let me introduce myself. I'm from Schwerin and I'm very concerned with the influence of technology on the environment and on people and the positive impact that can be made here. Let's start with energy. Energy is the most simple topic. Facebook started very early by switching their data centers to renewable energy. Facebook, Google, Rockspace and Salesforce joined them but there's still products and companies who refuse that or aren't very transparent like that. Twitter doesn't publish any transparency reports which energy they use to run the data centers. It is estimated that the energy they use is 5% renewable and we need to change that. It's rather easy to see if a site uses renewable energy or not. There's the Green Web Foundation. If you call up a website, you see this screen. You can enter the domain there and then you get results on whether they use renewable energy or not. Also, if you run a website yourself, then you can access a registry of green hosters. So if you realize your hoster doesn't use renewable energy, you can see who to switch to who uses renewable energies and move your website. If you've done that. Then you've already achieved a lot. So now we talk about the resources. Which resources do I send over the wire? So there's a really cool tool which helps us estimate how far I've already come. It's called Caribbean Calculator. So I've done this for Wikipedia here. So you can just enter a domain and then you get a little report. So Wikipedia emits about 0.22 grams of CO2 per visit. They use sustainable energy. That's nice. And then if you enter the correct number of page views, then you get a calculation of how much CO2 is really being used up or created by this website. And you get some comparison values. The issue that we have is that we have faster and faster bandwidth. So we don't really have to care anymore about the size of a website. This graph shows how the average size of a website has changed over the years. Right now we are at 3.5 megabytes as the size of an average website. 2011, this looked much different. So if we look at the yellow area here, that's the HTML part of the website. That's the stuff that is actually relevant because it's the content. And that part is actually getting smaller instead of larger. So we have less content on our website. We want to say less, but our website is getting bigger. And that's because we're using more and more images, even more high resolution pictures, more videos. And that's really not necessary because we don't have anything additional to say. Why should we increase the size of our website? A different aspect of this is advertisement. This is a graphic created by the New York Times. And it shows in yellow which part of the size of a website is actually advertisement on news website. And which part is the content, that's the blue part. And you can see the absolute mismatch. But first you have to load 15 megabytes of tracking scripts and all that sort of stuff before I can actually see the content that is only 4 megabytes in size. So there is definitely potential to optimize this. The large advertisement corporations like Apple, Google and Co. They are trying to change this a little, but at the moment there is just a huge mismatch. So not only is it important because of privacy and security to use ad blockers, but also from an ecological perspective. This is an example. It's webspeed.net and you can enter a URL and see how much energy I could save with an ad blocker, how many requests to just be able to evaluate how much is using an ad blocker really worth. Then there is also this nice tool for all of you who are programming websites themselves. This is really interesting. It's called the performance budget calculator. Is any of you using during the creation of websites a performance budget? One to three hands are shown nice. So this is about defining that my website will load on an adge network within five seconds for example. So that's my budget that I have that I can translate to resources. So if I enter my goal here and the type of connection and then how much time it should take to load this website, then I get an approximation of how much data I can put on my website, how much space I have for HML, CSS, etc. And the advantage is that I have to really think about what I should put on my website and what I should not put on it. And this is really cool if you define this goal and then the customer wishes for a new feature and then you can talk to the customer about it and you can then say we can do this but then we will miss our performance budget or we have to remove something else. So then you have a concrete measurement with this tool to work with. So I have an example here that I brought with me. Two years ago I was using a large German publisher with four letters as an example but they didn't find it so cool and they asked me nicely to please stop using them as an example. So now I am using Wikipedia So I did some napkin math So there are of course many more aspects but I just wanted to show you the dimension of what we are talking about here if we change something. So I looked at the front page of Wikipedia so what is loading each time I look at Wikipedia and that's of course the logo. The logo, I downloaded this on my computer and I checked the size 45 Kilobytes doesn't sound so large sounds small and then I checked this image with ImageOptim it's a free tool for Mac but there's also others and it compressed the image for me losslessly and you can see here a saving of 56.5% that you could achieve to end up with about 20 Kilobytes Wikipedia has 170 million page views per month multiplied by the saving 25 KB and would remove some caching then you end up with 4300 Gigabytes of traffic that you could potentially save with this According to the Federal Environmental Office we need about 5.000 Watt hours of energy to send a Gigabyte of data if I put this into my calculation then I end up with 15.000 Watt hours of energy that I could save with this measures that's about 10 single households of energy usage so pretty big numbers we're talking about here that's about 7 tons of CO2 emissions that we could save each month with this measure so how much is 7 tons actually with 7 tons of CO2 budget you could fly from Hamburg to London 16 times return so that's really a large amount of CO2 that we're saving by compressing this logo which only takes about 2 minutes but this is of course not the only thing you could do Videos are a huge part of the global data transmissions about 60% of the worldwide data transmissions are video so video on demand is 34% 13% alone are just Netflix that's a big number Pornography with 27% is a big topic as well so maybe you can think about that this evening to keep this in mind there is a nice tool also made by the GreenWebFoundation co-developed by Chris Adams everybody of you probably knows Lighthouse if you're into web development to test your website on different parameters and what this foundation has developed is called Greenhouse and additionally to the other factors that Google is looking at anyway we also now calculate a sustainability score so that you can automatically test your website on sustainability but also Apple has now a feature in its Safari Browser they added a feature that allows you to check the energy consumption of a website visit to calculate this or to measure this but not only what happens on the page is important for the sustainability but also which language I use to program my website so for example if I look at the left column here C has the least has the best energy efficiency 2 years ago Python has one of the highest so this is also something to keep in mind when you're programming apps and what is the goal of that app and which language you should use I'm a huge fan of text only websites for example here you see NPR the National Public Radio from the States they have a text only website but also CNN for example has one and I thought to myself I don't earn my money creating websites with the best design but I should try also doing this with my own website and that's what I did I used only HTML and I really want to give this to you as a homework assignment please try to reduce things and if you if it is not noticeable then you can explain what is going on for example I did this I put my website looks broken to you read why so that people can understand why my website looks like this and then also link to my old website which had a very complex design but this of course saves a lot of bandwidth just to create some attention that is not only professional when it has an amazing design but also when it is sustainable CNN by the way they didn't start the text only website for ecological reasons but when Hurricane Irma hit New Orleans and the mobile network was pretty much down so they launched this site because it was the only source of information that people still had and could access so it's there's also this aspect now I have the green user experience checklist from Man Overboard which summarizes what you can do reduce images, optimize videos you could also deactivate auto play, use less difference funds etc I think you all know how to save data one thing I want to send you home with is that the best designed decision so if you are agreeing about whether a thing is necessary or not maybe just decide not to now last part of my talk, responsibility towards the user it's important to ensure that the user can avoid most unnecessary clicks I've heard that there are people who use SEO to get to their sites even if they don't have the information people look for so people come to their sites don't find the information and look for a new source so this is unnecessary data traffic we don't need this a clear navigational structure and clear communication helps a lot and the content should be accessible to everyone the problem is that idealistic arguments in communication with the customer, they don't help much this is why we need a business case for this the business case comes from Amazon and the Stanford University they conducted a study and found out that Amazon made more money with every second loading time they cut in their site it's a very concrete business case on why you should optimize your page but you can also win new users as we can see with CNN Lite we improve user experience sites load faster we spare the data volume of our users we can save money in hosting especially with big sites there's a huge impact and it also has an impact for search engines so what now everybody who feels obliged to web standards should keep this in mind in their future work the W3C has laid this down in the ethical web principles that the web should be a sustainable platform also there's a great community climateaction.tech it's a slack community there's also a community for you there's impact makers I can really recommend them really recommend to join them there's also Tim Frick thanks for some advice we'll see you in the next video thank you bye thank you thank you thank you go planet everybody do what you can and also if you're training new people professionally academically that you put this subject on the agenda because this is very very underrepresented here take it with you pass it on to your trainees, to your students and put it on the curriculum thank you for your attention and you're going to find all the resources and my sites under this link and now I'll take questions this is your applause thank you Niklas, thank you so much I didn't know that it is relevant which programming language you use learn something new again so we have some time for questions if you have a question if you have any questions just go to one of them and I will hopefully see you so let's start with micro number one thank you so much so what about more complex algorithms to compress data and then transfer them and then decompress them so what's more efficient is a smaller file size but more computational power so I cannot really answer that because you would have to calculate this on a case by case basis so on a general basis I cannot answer that I'm sorry thank you but maybe that's an idea that somebody could look at number two please hello my question is in the middle there was a rough approximation per request that so was about this and that CO2 so the difference between static websites and PHP scripts and all of that with database and so on was at the back end level that all fell under the table is there perhaps some more detailed view of this a comparison between static websites and for example WordPress I can definitely put some resources for that to the link collection behind the link that you can see here you're definitely right that in this calculation this definitely fell under the table I really wanted to break this down as much as possible just to give a rough approximation thank you number four please there is also somebody hello thank you for the talk my question in my company if you're not so important for example as a working student then it's really difficult to get these topics escalated to the important people what are some best practices that you could do to get this through the different levels of hierarchy in my company sorry I didn't really understand so once again so if you're not so important at this company and you want to make this topic known what are some ways to get this known and actually establish this at your company that's a good question so get on the nerves of these people that is probably the most efficient I mean you can probably also just calculate a lot of things on your concrete product so for example look at it and say so if we do this and that this will be the result we had one customer where they're running a large cinema franchise and now we reduced the resolution of the trailers and that allowed us to decrease the hosting cost significantly for example what you would have to calculate on a concrete basis what could I do and then just forward this calculation to the responsible and otherwise just try to get as many colleagues as possible on your side and you don't always have to start at the very top you don't have to start at the CEO or the department leader but you can also just in your everyday work try to realize that for example and if they're not agreeing then maybe you can escalate it to the next level and see what they think about it so that at some point it might become part of the workflow and definitely try to get colleagues on board so start small and then fight until the top so that's a job for company forensics number 5 and number 2 and then we also have internet questions so now first number 5 please thank you at our enterprise the issue is that we often deal with companies who often don't take into account the jump off rates a little bit louder please I don't was nothing hurt everything's okay so the question that I am asking is do you have other tips how to make large corporations aware that this is actually important well that really depends on your company that you're talking about there are some large corporations that that do their own Buckhams so that they can potentially put that topic into place I can't really say it's always difficult as a large company to just go to the highest level of hierarchy and say oh yeah I have an idea here I want to talk to you about this so then you just have to see one of the possibilities at your company and how you could proceed with this and if anything else I'm always a big friend of just starting fighting until you succeed so if you have concrete examples which you can bring forward then it's often easier to convince the leadership of the company to actually pull through this so the young man at number two please thank you for waiting thank you for the talk regarding the ad blockers I have a question so there are some publishers like Spiegel online or the standard of Austrian which say if you are using an ad blocker then you cannot view our website is there a strategy against this or a good argument against this so my strategy for this is to pay for content that I consume a lot so I understand that the publishers want to earn money with the content and they should journalism it costs money that's no question and the websites that I often look at that I consume a lot for those I pay simply and besides there's only the strategy of disabling the ad blocker for this particular page thank you one and a half minutes maybe one more question from the internet dear signal angel yeah you talked about the blue angel and that you are part of this can you talk a bit more about that and what are the criteria you said you are involved with this so I was involved with this in different expert rounds we met at the federal office for environment and different universities were also involved and together we worked on this we discussed criticized and changed and general this is just a certification that you can apply for as a software product and right now that's only applicable for native software that you saw on your computer so apps or other things are not relevant as of now but they're working on this the principle behind this is that either you succeed in all the criteria or if you don't you just don't get the blue angel so an example for this is that as energy efficient as possible and that your software runs on old hardware so that you can use them for longer and maybe that you can give a guarantee that a guarantee that hardware from the last 5-10 years is compatible for example so it's a very long catalog and who's interested can go to my address and then I can also perhaps send you this in advance great so thank you so much maybe a small or a large round of applause