 Schön, dass ihr alle da seid, an einem Samstag doch nicht allzu spät, also doch relativ früh und mit uns über Klimabewusste Website sprechen möchtet. Unser Vortrag ist leider relativ zeitzeitlich. Wir werden danach wahrscheinlich keine großartige Diskussionsrunde machen können innerhalb der Zeit. Wir sind aber den ganzen Tag auch im Forum da, hier im ersten Stock. Da findet ihr uns auch. Also sprecht uns sehr, sehr gerne darauf an. Genau wie ihr gerade gehört habt, ist die Hanamagin, die treibt seit sieben Jahren im digitalen Raum ja unwesen, ist Web-Designerin und UX-Expertin, die Hanamag Gutes Essen und Gutes Stories und ihr Interesse für Nachhaltigkeit im Web ist seit vier Jahren quasi am Hochkochen und vor allem auch, was ist die Bedeutung von Websites und deren Klimaoptimierung eben fürs Klima? Genau und mit mir hier steht der Michael. Der Michael ist seit über 20 Jahren Coder und Entwickler für Websites. Der ist der Papa von zwei wunderbaren Töchtern und der liebt das Websites schnell, sicher und klimabewusst aufzusetzen und ist sehr aktiv in Klimaschutz und Lokalpolitik. Wir haben schon gehört, Cleaner Web ist die Organisation, von der wir kommen und mit der wir versuchen, dem Thema Klimabewusstsein im Web ein bisschen mehr Gewicht in der Öffentlichkeit zu geben und was da unser Ansatz ist, wurde schon kurz vorgegriffen, aber da kommen wir später noch mal ein bisschen mehr darauf zurück. Aber erst mal möchten wir euch die Problemstellung quasi noch mal ins Bewusstsein rufen, nämlich, dass das Internet extrem viel Strom verbraucht und somit für extrem viel CO2-Emissionen auf dem Planeten verantwortlich ist. Und ich denke mal, die Folie ist so ein bisschen Preaching to the choir, weil ich glaube, dass ihr euch alle mit dem Thema schon so ein kleines bisschen auseinandergesetzt habt, aber trotzdem ist es immer ganz gut, diese Größenordnung noch mal so ins Bewusstsein zu bringen, denn hier ein paar Fakten der Stromverbraucht des Internets ist in Deutschland so hoch, dass er durch erneuerbare Energien überhaupt nicht gedeckt werden könnte. Und je nachdem, welcher Quelle man braucht, ist dafür zwei bis vier Prozent der kompletten CO2-Emissionen des Planetens verantwortlich, dass es so viel Energie wie eine Industrienation hochentwickelt, das Land wie Japan, das ist hier noch mal schön aufgezeigt. Da sieht man, wenn das Internet ein Land wäre, wäre es quasi hier an der sechsten Stelle nach diesen Riesen-Nationen auf ziemlich derselben Höhe wie Japan. Also das Problem ist, wir müssen eigentlich Strom sparen und wir müssen das Internet klimabbewusster aufsetzen. Das Witzige an der Sache ist auch, dass diese ganzen Daten, die über das Internet übertragen werden und gespeichert werden, ganz oft einfach total unnütz sind. Das ist ein Zitat von dem sehr empfehlenswerten Buch World Wide Waste, wo der Autor darauf hinweist, dass sehr, sehr viele Daten, die im Internet gespeichert werden und für die einfach Platz benötigt wird, unter der Oberfläche schlummern und auf der dreißigsten Seite von Suchergebnissen irgendwo dahin darben, einfach überhaupt nicht benutzt werden und der sagt, dass sogar bis zu 90 Prozent aller Daten im Internet überhaupt nicht benutzt werden. Das sind alte Analyse-Daten, Archiv-Daten, niemand interessiert sich mehr für die, aber dennoch muss eben dieser Platz und diese Übertragung bereitgestellt werden und es fließt da Strom. Und das ist eben dann auch so ein bisschen dieser Disconnect, der in dem Bewusstsein schwer zu kitten ist. Erstens sieht man diese Daten nicht, sondern man hat einen sehr, sehr sauberen Arbeitsplatz, da gibt es keine Abgase, da wird nix abgeholzt, da entsteht kein Abfall, das ist alles sehr, sehr sauber. Und dass eben die Klimakrise auch von sowas kommt, das ist für den ungeschulden Blick überhaupt nicht leicht zu erkennen und überhaupt nicht leicht zu verstehen. Deshalb muss man hier einfach einen Bewusstsein schaffen, dass eben sowas auch von sowas kommt. Niemand interessiert es genau, einfach deshalb, weil es diesen Disconnect gibt, weil alles als sauber wahrgenommen wird und weil in den Köpfen der Öffentlichkeit auch dieses Fähren von digitalem und physischen komplett getrennt sind. Es kommt einem so vor, als gibt es hier überhaupt keine physische Welt, die dahinter steht, aber natürlich gibt es die, es gibt Hardware, es gibt Elektroschrott, es gibt Server und es gibt natürlich Kraftwerke, die diesen Strom erzeugen und diesen Disconnect eben zu schließen, dass es so ein bisschen unsere Aufgabe und sollte eigentlich die Aufgabe von allen sein, die darüber ein bisschen informiert sind. Also sprecht da gerne mit eurem Umfeld darüber, dass das so ein bisschen mehr in den Köpfen bewusster wird, dass es eben nicht so getrennt ist, wie man denkt. Ja, das bringt es zum Thema von heute und zu dem Thema, mit dem wir uns bei Cleaner Web generell beschäftigen, wie können wir dieses Thema mehr ins Bewusstsein bringen und wie können wir auch effektiv dafür sorgen, dass es weniger Emissionen durch das Internet gibt. Und unser Ansatz ist dabei, dass wir auf die Masse von Website-Betreibenden gehen und da versuchen Bewusstsein zu schaffen und einfach Websites zu optimieren, dass die weniger Daten verbrauchen und so weniger Belastung für die Umwelt dasteht. Websites betreffen natürlich nicht den kompletten digitalen Kosmos, in dem wir uns bewegen, so als Verbraucherinnen von digitalen Produkten, die betreffen vor allem die Rechenzentren, sieht man hier in Türkees für wie viel Ausstoß, die quasi verantwortlich zu machen sind, die betreffen indirekt, aber natürlich auch die Herstellung und die Nutzung von Devices. Und bei dieser Grafik sieht man total gut, dass die Herstellung immer extrem viel aufwendiger ist als die eigentliche Nutzung. Also hier und nochmal dahin weiß, wenn ihr was Second Hand kaufen könnt oder wenn ihr was doch noch nicht austauschen müsst, ist immer besser, bei älteren Geräten zu bleiben als neu zu produzieren. Soziale Netzwerke sind ein eigenes Thema. Klar haben die auch Websites, die man benutzt, aber das ist sehr speziell darauf werden wir heute jetzt nicht eingehen, sondern wirklich auf die Masse der so klassischen Website gehen. Klimabewurste Websites sind toll, weil sie bieten eine Win-Win-Win-Win-Situation an. Also ganz offensichtlich klar, weniger Emission, weniger Energie verbraucht, deshalb sind wir da, aber damit geht ein Her, dass die super Performance sind. Die Daten werden reduziert und optimiert, das heißt es wird weniger geladen, schneller geladen, der Code wird besser strukturiert, es ist frustreier. Das bedeutet, genau, es geht einfach schneller. Bei jahreahm deshalb, da werden wir später auch ein bisschen näher darauf eingehen, dass die klimabewurste Websites, die wirklich optimiert wurden, sind sehr klar strukturiert, die User finden sich schnell zu Recht, müssen nicht unnötige Klicks machen, um zum Ziel zu finden und sind deshalb einfach übersichtlicher und ein Gängiger. Sozial sind sie deshalb, weil eben durch diese performante Sache man keine hyperkrasse Breitbandverbindungen braucht, um eine simple Website aufzurufen, was ja sowieso eigentlich aber witzig ist, sondern es reicht einfach ein kleiner Datenvertrag, wo man dann auch wirklich in abgelegenen Regionen gut auf die Website kommt und sind auch deshalb sozial, weil man kein High-End-Produkt braucht, kein High-End-Divis, um eine Website aufzurufen. Ja, das ist unser Lobgesang an die klimabewursten Websites. Um das Ganze so ein bisschen klar zu machen, von welchen Einsparungsgrößen wir sprechen, gebe ich euch ein Beispiel von einer Seite, die wir angeschaut haben im letzten Herbst zum Wahlkampf, da haben wir uns die Parteiseiten der größten demokratischen Parteien angeschaut und hier als Beispiel mal die CDU genommen, die mit ihrer Website dort bei 300.000 Besuchern pro Tag schon in einem sehr aktiven Bereich steht und je öfter die Website aufgerufen wird, desto mehr Strom wird dann eben auch durch die Website erzeugt und verbraucht und das bedeutet eben wieder Emissionen, das heißt große Website, 300.000 User am Tag relativ viel und da sind wir zum Ergebnis gekommen, dass die Website ungefähr 6,5 Gramm CO2 pro Seitenaufruf verbraucht, das sind dann im Monat fast zwei Tonnen während dieses Wahlkampf ein 20 und das ist natürlich schon extrem viel, also das ist ja nur eine Website, auf die man vielleicht mal kurz schaut, um zu schauen, was aktuell ist und durch bewusste, wirklich minimale und gar nicht so spürbare Optimierungen hätte da auch locker die Hälfte eingespart werden können und wie kann man einsparen? Dazu möchten wir jetzt quasi die wirklichen ja Quick Wins sozusagen erklären, was kann man auf einer Website schnell verändern, damit die Klima bewusster wird. Der Michel erzählt euch so ein bisschen was zum technischen und ich werde dann auf mein Fachgebiet UX und Design gleich zu sprechen kommen. Super. Sollte ich Begriffe verwenden und sie schlecht erklären, also Begriffe verwenden die man nicht versteht oder sie schlecht erklären bitte einfach gleiche Handzeichen, damit man folgen kann. Ich fange bei den Videos an. Hintergrund ist, dass die Videos den größten Anteil stellen an der Datenmenge, die wir im Netz übertragen, also Videos, Live Streams, Videokonferenzen, ist untersucht worden. 2018 wurden darüber, also allein über Videos und deren Streaming 300 Millionen Tonnen CO2 produziert global und zur Einordnung, dass es so viel Stromverbrauch wie Spanien 2018 hatte, also das ganze Land Spanien mit allen Krankenhäusern, allen Privathaltenindustrie und so weiter. Da ist alles zusammen, also wir können ein ganzes modernes Land betreiben mit diesem Strom oder mit derselben Menge Videos schauen. Und ich habe nichts gegen Videos, da kommen wir auch heute noch zwei Wahl dazu. Warum die Datenmenge so relevant ist, ist einfach, dass nach den aktuellen Berechnungsschlüsseln, das ist noch nicht ganz fertig diskutiert, wie wir eigentlich exakt berechnen können, wie viel Klimabelastung eine bestimmte eben zum Beispiel Website hat und so weiter, aber wir haben Nährungswerte und darauf im Moment ist es aber relativ klar und das wird sich auch nicht ändern. Datenmenge ist höher, dann ist die Klimabelastung höher, weil die Übertragung nach allem, was wir bis jetzt wissen, so ungefähr das aufwendigste ist. Wir schauen uns bei CleanerWeb immer zwei Dinge an, wenn wir versuchen Bereiche zu optimieren. Wir schauen uns an, kann man es reduzieren bis hin zum Extrem des Wegwerfens oder kann man Alternativen finden, die weniger energieintensiv sind. Bei Videos ist das ganz einfach die eine Methode und die QuickWind sind es die einfachen Griffe, den Autoplay weglassen. Verschont die Leute damit. Kein Mensch will Autoplay-Videos, glaube ich zumindest. Wenn jemand ein Video sehen will, klickt er auf einem Play-Button, Heroes und so weiter, kann ich ein schönes Beispiel erzählen. Die CDU-Webseite, die wir gerade gesehen haben, als wir die Parteisite zum ersten Mal ganz kurz angeschaut haben, um zu entscheiden, ob wir überhaupt so einen Vergleich machen und drüber Bloggen und Pressearbeit machen, habe ich einmal kurz auf die Seiten geschaut, da habe ich die CDU-Seite aufgerufen, da war oben ein schöner schwarzer Hintergrund, ein schöner Schriftzug drauf, habe ich weiter gescrollt bis zum Ende der Seite und da habe ich in der Entwickler-Konsole gesehen, 32 Megabyte hat die Seite geladen. Es gibt übrigens ein günstigster Datentarif, den man in Deutschland haben kann, sind 100 Megabyte. Das heißt, ein Mensch, der eh schon benachteilt ist, wenn sich im Wahlkampf über die CDU informiert hat, hat die CDU innerhalb von ein paar Sekunden ein Drittel seines Datentarifes ihm weggenommen. Genau, ich habe dann geschaut, was war es? Ein Riesenvideo wird geladen, habe ich wieder hochgescrollt und dann lief plötzlich im Heder hinten im Hintergrund ein riesiges Video. Am Stichtag, wo wir dann die Seiten auch wirklich genauer auditiert haben, waren es nur noch 11 Megabyte das Video. Damit hat die Seite nur 13 Megabyte verglichen mit unserem damaligen Sieger, der FDP-Website, mit, ich habe im Kopf 750 kb und die sah auch schöner aus, hatte genauso viel Inhalt und so weiter. Es geht schon, wenn man will. Deswegen Autoplay am besten weglassen. Das andere ist, wenn mehrere Videos gelistet werden. Ich war vorgestern auf einer Seite, habe mir angeschaut, was empfehlen die, eine Seite über Nachhaltigkeit im Netz, was empfehlen die für Videovorträge und die haben alle Videovorträge, die Sie empfohlen haben, mit Playern eingebettet. Manche waren bei YouTube, manche waren bei Vamiro, manche waren bei Dailymotion und so weiter. Und allein diese Player haben zweieinhalb Megabyte Daten geladen, um als Player eingebettet zu sein, egal ob ich sie anklick oder nicht. Als auch hier, ich erzähle nachher noch eine andere Methode, die ist aber kein Quick Win, das ist nichts Einfaches. Wenn ihr eine Übersicht macht über 10 Videos, verlinkt die Videos auf dem Plattformen, wo sie sowieso sind und jeder kann sich anschauen, der sie anschauen möchte. Darf ich die Frage ans Ende schieben? Also, wärmen Vortrag werden Verständnisfragen super, ansonsten, genau. Adblocker ist aber immer gut. Nicht für die eingebetteten Videoplayer, aber genau prinzipiell ja, aus meiner Sicht. Das zweite, was ich mir anschauen möchte mit euch, sind Bilder aus dem ganz einfachen Grund, wenn keine Videos auf einer Website sind, dann ist meistens Bilder der größte Anteil der übertragenden Datenmenge. Und gleichzeitig ist das Potenzial extrem hoch, hier Datenmenge einzusparen, weil nämlich die meisten Bilder technisch gesehen schlecht eingebunden sind, auch wirklich den meisten Webseiten, die ich teste. Und ich mach jetzt doch schon seit einem halben Jahren viele Audits. Also schauen wir jetzt an, wie können wir Bilder reduzieren. Die Anzahl der Bilder ist ein anderes Thema, aber wir können Bilder allein schon in der Dimension kleiner machen. Muss das Bild 1.800 Pixel breiter haben, nur damit zwei Prozent der Use auf ihrem riesen Bildschirm so breit ansehen können? Oder reicht das, wenn es 900 Pixel breiter hat für alle als Beispiel? Dann gibt es Kompression, man kann Bilder kleiner rechnen, das kennen wahrscheinlich fast jede Person hier im Raum. Man kann Bilder kleiner rechnen, ohne dass es optisch ein merkbaren Unterschied gibt. Wenn man das Kompressionslevel nicht zu hoch zieht, da gibt es kostenlose Möglichkeiten wie Scrooge.app, das läuft im Browser oder zur Installation an einem Windows Rechner, zumindest Riot. Damit kann man super-simple seine Bilder deutlich reduzieren. Das sind oft 30-40 Prozent möglich. Lazy Load. Das bedeutet, eine Website ist ja relativ lang und nur den obersten Teil sehe ich in meinem Bildschirm, egal ob der Hochkant ist oder breit. Und ein Bild, das ganz weit unten ist, wird normalerweise auch schon geladen, egal ob ich im Menü sofort woanders hingehe oder nicht. Lazy Load ist die Idee, dass es erst geladen wird, wenn es kurz vor dem sichtbaren Bereich ist. Also wenn ich immer näher ran scroll, irgendwann wird es geladen. Früher hat es dazu JavaScript gebraucht und wäre kein Quickwin gewesen, weil nicht ganz so einfach. Jetzt ist ganz simpel, wer ein bisschen hart im Elkern erkennt, da ist ein Image mit einer Source. Also wo liegt das Bild? Und dahinter kann man einfach schreiben, Loading ist gleich lazy. Und dann, das können alle modernen Browser, wird das Bild erst geladen, wenn es gebraucht wird. Spart irrsinnig Datenmenge ein. Und SVG, das ist ein bestimmtes Bildformat, das ist eine Vektorgrafik, statt pixelbasierten Bildern wie PNG verwenden, speziell auch für Icons und eben auch SVG statt Iconschriftdaten. Kann man gerne im Detail diskutieren. Es gibt sicher Anwendungsfälle, wo es andersrum ist, aber in den allerallermeisten Verhältnissen SVG vorzuziehen. Ein wichtiger Teil ist das Hosting. Wo liegt die Website? Auch hier ohne näher ins Detail zu gehen. Schau dich an, ist der Hoster grün? Ist er nur grün? Also nur in Anfangsängern ist es auch nicht so schlecht, aber ist er nur grün, weil er sein CO2, die CO2-Werte, die er emittiert, kompensiert über Zertifikate oder bezieht er auch schon mal im ersten Schritt nur grünen Strom und kompensiert dann. Oder ist er sogar klimapositiv? Gibt es auch Hoster in Deutschland, die das machen. Die Nähe zur Userbase, das sind die CDNs, die oben stehen. CDN steht für Content Delivery Network. Zu Deutsch würde ich sagen Inhalts-Zustellungs-Netzwerk. Das heißt, das ist ein verteiltes Netz aus Rechnern und wenn du eine Website aufrufst, dann kriegst du die Daten dieser Website, die statischen, vom dir nähesten Server, weil die Übertragungsstrecke, die physische, tatsächlich sehr viel ausmacht für den Stromverbrauch. Deswegen sind CDNs fast immer zu empfehlen. Wenn man eine kleine Side-App mit 100 Besuchern im Monat nicht, aber ab ein paar Tausend Besuchern im Monat lohnt sich das jetzt aus Klimasicht. Es gibt Drittanbieter. Drittanbieter bin ich sicher Seitenbetreiberin und nicht Dual-Seiten-Nutzerin, sondern der Drittanbieter ist jemand Drittes, der bekannteste dürfte Google Analytics sein. Ein Dienster auf jeder zweiten Website zu finden ist und in vielerlei Punkten gegen die DSGVO verstößt. Wahrscheinlich bei 99 Prozent der Organisationen, die es einsetzen. Genau. Es gibt eine Website, die sich mit diesen Drittanbietern, Third Parties im Englischen, thirdpartyweb.today, die das erfasst für viele, viele, viele Seiten und die misst, welche Dienste werden auf all diesen Seiten geladen und welchen Impact haben die insgesamt? Und dann sieht man schon die Namen Kentmann, Google Maps und YouTube und so weiter. Wie sagt man, haben einfach riesige Datenmengen, die zusätzlich geladen werden zu dem, was die Website eigentlich schon hat. Warum so Daten besonders interessant sind, ist, wenn man sie filtert, man kann hier verschiedene Ansichten filtern auf der Website. Wenn man jetzt schaut, die Average-Kost, also wie viel hat es durchschnittlich pro Website an Skripten und so weiter geladen. Für den Bereich Video, dann sehe ich, wenn ich ein YouTube-Player einbinde, erzeuge ich achtmal so viel Datenmenge, wie wenn ich ein Vermio-Player einbinde. Ohne, dass ich jetzt einen von beiden empfehlen möchte. Letzter Punkt für die erste Runde ist der Browsercash, auch ein ganz einfaches Setting. Statische Dateien werden ein Jahr oder ein endlich gecached. Alles andere ist völlig unnötig. Wenn ihr eine Datei ändern wollt, gebt ihr einen neuen Namen und schon wird sie neu geladen. Ein Browsercash ist im Prinzip ein Zwischenspeicher auf dem Endgerät. Das heißt, wenn der Browser zum ersten Mal ein Bild oder eine CSS oder JavaScript Datei lädt, dann speichert sie auf diesem Endgerät ab. Und wenn die das nächste Mal angefragt wird, lädt das sie einfach vom Gerät. Das macht die Seite nicht nur viel, viel schneller, sondern auch viel grüner. Und weil das der Browser nicht automatisch macht, sondern eine Aufforderung braucht, sollten wir die ihm geben und sollten ihm sagen, speichert es unendlich. Geht bei Engine X, bei anderen muss man Zeit angeben, dort bitte mindestens ein Jahr angeben. Und damit schauen wir uns ein paar Punkte in Design und UX an, bei den Quick Wins. Genau, danke. Ich wollte noch mal auf ein paar Punkte eingehen, die du auch schon gesagt hast, eigentlich Bilder und visuelles Material, aber aus Designsicht. Was kann man hier vielleicht einsparen? Und ich erinnere noch mal daran, dass wir quasi zwei Methoden haben. Einmal die Reduktion reduzieren oder weglassen oder Alternativen schaffen. Und aus Designperspektive kann man sich natürlich erst mal überlegen, okay, was ist denn überhaupt notwendig? Welche Bilder zum Beispiel, welche Fotos auf der Website bringen überhaupt wirklich einen Mehrwert? Oft sind es nämlich dann irgendwelche Hintergrundbilder, die ja so ein bisschen schöne Deko sind, aber eigentlich nicht wirklich einen Mehrwert haben. Sowas, würde ich sagen, geht klar in Richtung Reduktion. Lass das einfach weg. Das sind nämlich viele Daten, die da geladen werden, die oft gar nicht benutzt werden. Lieber dann ein Farbkonzept schaffen, was ansprechend ist oder vielleicht auch SVG-Grafiken einbinden, statt Fotos. Also einfach ja ein gutes Gesamtbild schaffen, ohne Hochglanz ist absolut möglich. Und da zeige ich euch auch gleich ein paar Beispiele, die ich ziemlich schick finde. Aber erst mal noch zu einer anderen Geschichte, nämlich Schriftarten. Schriftarten sind auch Daten, die auf einer Website liegen und die geladen werden. Je mehr Schriftarten eine Website benutzt, desto mehr Daten werden geladen. Ganz einfach. Man muss aber auch aus meiner Designsicht, finde ich, überhaupt nicht so viele Schriftarten haben. Also wenn man fünf unterschiedliche Schriftarten und Schnitte hat, ist es meines Erachtens zu viel, auch für die User. Sieht total unruhig aus. Also lieber reduzieren, zwei, drei Schriftsnitte benutzen von derselben Schriftart oder die Kühe wäre gar keine Schriftart zu benutzen, sondern das den Browser entscheiden zu lassen, also Systemfonds zu nutzen. Das heißt, ihr bindet überhaupt keinen Fond ein auf eurer Website, sondern das wird dann je nach Browser unterschiedlich ausgespielt, eben mit einer Systemschrift. Ja, ein paar Beispiele wollte ich euch zeigen. Nämlich hier, also inhaltlich, jetzt erst mal egal, aber das ist einfach ein schönes Beispiel, wo der das Hintergrundbild ist zwar relativ groß vom Format, aber hat nur zwei Farben, hohe Kontraste und hat deshalb eine relativ kleine Datengröße und es gibt einfach ein Farbkonzept, was ziemlich flashig aussieht, finde ich, und so kann man mit ziemlich wenig Datenübertragung trotzdem eine gute Story erzählen, trotzdem irgendwie ansprechend aussehen und eine Atmosphäre vermitteln, ja, die irgendwie catchy ist und das finde ich auch total wichtig, dass wir nicht davon sprechen, dass es so eine Art asketische Enthaltung sein soll im Internet und wie man damit umgeht, sondern wirklich mit den technischen Möglichkeiten, die es gibt und mit den Möglichkeiten im Design, die bekannt sind, was Cooles zu schaffen, was trotzdem inspiriert und trotzdem schön ist. Also es geht überhaupt nicht darum, dass wir nur Schwarz-Weiß-Listen haben wollen jetzt im Web, sondern zum Beispiel auch so was, das kommt jetzt komplett ohne Fotos aus, das sind nur diese Font-Grafiken, die man total leicht mit eben SVG statt PNG oder was auch immer erstellen kann und sieht trotzdem geil aus. So spricht einen an und ja, ist einfach ein schönes Beispiel und als sehr positives Beispiel wollte ich auch hervorheben, dass die Bits und Bäume Website, die ihr ja wahrscheinlich auch alle mal angeklickt habt in den letzten Tagen mit System-Fonds arbeitet und keine eigenen Fonts eingebunden hat. Deshalb sieht das jetzt in dem Screenshot so aus, bei euch sah es vielleicht ein bisschen anders aus. Ja, das waren jetzt so die Quick Fixes, die man machen kann, wenn man eine Website anschaut und guckt, was kann man schnell weglassen oder ersetzen. Jetzt wollen wir aber noch ein paar Sachen zeigen, die so ein bisschen technisch mehr Finesse erfordern. Genau. Genau und wieder die gleiche Reihenfolge wie vor. Wir fangen bei den Videos an. Ich erhöhe jetzt ein bisschen die Geschwindigkeit. Man kann einen Player direkt einbinden, dann lädt er auch direkt oder man zeigt exakt an der Stelle, exakt in der Größe einfach ein Vorschaubild an. Das schaut aus wie ein YouTube-Player. Es hat den Button, wenn ich mit der Maus drüber fahre, wird er rot und so weiter. Gewohntes Verhalten, wenn ich draufklick, lädt erst tatsächlich der Player, hat dann Autoplay, wo ich vor gesagt habe, das machen wir nie, in dem Fall machen wir es, dann lädt der Player mit Autoplay, startet. Also der User hat genau das gewohnte Verhalten. Es dauert eine Viertelsekunde länger, bis das Video startet, nachdem er auf Play drückt, aber in den 98 Prozent der Fällen, wo die Seite aufgerufen wird und der User, das Video nicht aufruft, spare ich immens viel Daten ein. Das zweite ist, man kann bei den Playern der großen Video-Plattform zumindest, kann man Standardauflösungen vorgeben, macht niemand, soweit ich gesehen habe in den Webseiten, die ich auditiert habe. Man kann im YouTube über den, die so genannte Player API Anweisungen geben und bei Vermeo ist es ganz simpel, einfach in der URL kann ich anhängen, in welcher Auflösung ich es haben will und dann wird die als Diffort übermittelt. Also Green by Diffort ist so eine Idee, die man immer mitdenken könnte, dass man sagt, hey, das Video soll einfach sehr ökologisch laden und wer will, kann dann eh unten auf Settings klicken und auf 4K HD hochdrehen, was seine Augen eh nicht erkennen, Unterschied auf einem kleinen Display. Aber es geht ja nicht der Gegenfreiheit abzuschaffen. Bilder werden vorher schon einfachen Maßnahmen bei Bildern ein bisschen komplexer ist, moderne Bildformate zu verwenden wie WP oder AWIF und die korrekt einzubinden über ein Picture Element mit einem Sizes-Attribut und wir schauen sie uns einfach an, weil die Worte alleine nicht viel helfen. Es sieht so aus, wie wenn hier dreimal dasselbe Bild ist, es ist aber das gleiche, inhaltlich und technisch sind sie unterschiedlich. Es sind drei verschiedene Formate, wir haben JPEG-Bild, ein WP-Bild und ganz rechts ein AWIF. Sie sind immer gleich groß, optisch ist kein Unterschied zu erkennen, ich habe die auch mir sehr genau angeschaut bevor ich den Screenshot gemacht habe, sind auch im Browser dargestellt und wenn ich die Größe anschaue, habe ich beim JPEG 45 KB, die WP ist schon ein Viertel kleiner und AWIF ist nur die Hälfte vom JPEG-Bild. Das gleiche kann ich mit verschiedenen Bildern machen, im Fall von dem Wahl rechts unten, kann ich 54 Prozent Datenmenge einsparen, vergleichen mit JPEG, wenn ich AWIF verwende und ich habe optisch keinen Unterschied zu sehen. Warum verwenden wir nicht dann immer AWIF, wenn es so toll ist, weil es das neueste Format ist, dementsprechend noch nicht alle Browser können. Leider gibt es die User, die Updates nicht machen, warum auch immer. Es gibt genug User, die Updates nicht machen, dementsprechend selbst bei Browsern, die es heute können, die noch Innovation verwenden, die es nicht können. Deswegen hat man sich was einfallen lassen. Normalerweise bindet man ein Bild auf diese Weise ein oder ähnlich, das ist so wie das, was wir vorgesehen haben, wir lassen es verzögert laden, wir geben eine Höhe und eine Breite ab und sagen, rennen das im Hintergrund, also du kannst den Resterseite ruhig anzeigen, bevor du das Bild verarbeitet hast, bedeutet das Decoding. Und das kann ich jetzt in ein Picture-Take setzen. Wenn ein alter Browser das sieht, dann sagt der Picture, kenne ich nicht, Source kenne ich nicht, Image kenne ich und lädt einfach das Bild so, wie wenn wir nur das Bild angegeben hätten. Moderne Browser schauen sich der Reihe nach die Quellen an, sagen, ah das erste wären AWIF, kenne ich nicht, ah das zweit ist ein WP, das kenne ich. Und dann zieht er im Source Set, es gibt so drei verschiedenen Größen dieses Bild, wir haben es einmal 200, einmal mit 400, einmal mit 600-Pixel Breite und im Size-Attribut sagen wir ihm, bei welchem Bildschirm größer, also bist du welcher Bildschirm größer, lädst du dieses Bild bitte mit welcher Breite mein Bild ja manchmal in halbem Bildschirm braucht. Das alles weiß der Browser nicht, während er die Bilder lädt, deswegen müssen wir es ihm sagen. Und nur in der Kombination mit einem Size-Attribut kann ich vernünftig dafür sorgen, dass Bilder immer in der kleinsten möglichen Größe geladen werden. Und wenn man hier Bilder vergleicht, ein JPEG mit 600-Pixel mit einem AWIF mit 200-Pixel, dann bin ich in dem Bereich von 90, 95% Datenreduktion. JavaScript und CSS, ganz kurz nur erwähnt, sind häufig viel zu groß, es werden ganze JavaScript-Bibliotheken geladen, JQuery wird auf ganz vielen Seiten geladen in der großen Version, es gibt eine kleine, aber in den meisten Seiten, wo es eingesetzt wird, wird in der großen Version geladen mit über 50 Funktionen und dann wird auf der Seite eine Funktion verwendet. Das heißt, der Großteil dieser Daten Übertragung ist im Prinzip von vornherein für die Müllton und man weiß es schon, während man es entwickelt. Das heißt, ganz früh im Prozess könnte man das schon verhindern. Ein anderes Beispiel sind Skripte von einem Kontaktformular, das einfach auf jeder Seite geladen wird und wer mal einen Blog betrieben hat, weiß, dass das Kontaktformular fast nie aufgerufen wird. Das heißt, dieses Skript vom Kontaktformular wird ganz häufig mit übertragen, obwohl es Formular selbst nur auf einer Unterseite eingebunden ist. Auch das passiert häufiger, als man denkt. Und auf solche Dinge kann man achten. Das andere ist Minification. Wer Entwicklerin oder Entwickler weiß, wie das ausschaut, er wird einfach aus einer umfangreichen Dateine kleinere gemacht, die aber quasi technisch den gleichen Inhalt hat. Minification, Minifizierung. Und natürlich kann man manche Dinge einfach weglassen. Heute kann CSS viel, viel, viel mehr als die meisten mitbekommen haben und deswegen brauche ich kein Shavascript, um bestimmte Effekte oder Funktionalitäten abzubilden. Bereiche, die aufgehen und zugehen und so weiter. Brauche ich überhaupt kein Shavascript mehr. Server optimieren überspringe ich jetzt aufgrund der Zeit im Prinzip ordentliches Server-Caching reinmachen, dass die Seite gleich geladet wird und nicht als dynamisch gebaut werden muss und Kompression bitte auf Brotli umstellen, wer noch Zip verwendet oder gar keine hat. Und dann ist der Server schon mal deutlich Energiespannter eingestellt und über Brotli auch die Übertrage nochmal 20, 30 Prozent kleiner. Und dann kann man in der Mittelsysteme hinterfragen. In der Mittelsysteme stehen einfach zwischen dem, was ich bauen wollte an Inhalten und zeigen wollte und dem, was der User bekommt. Also das ist zum Beispiel ein Content Management System wie Typ 3 oder WordPress oder Drupal oder statische Website-Bilder. Und wenn ich jetzt eine Seite habe, die nur drei Änderungen im Jahr hat oder mehr Änderungen aber keine dynamischen Funktionalitäten braucht oder nur 1, 2, 3, weil dann kann ich sie auch über Serverless Funktionen abdecken. Also in ganz vielen Fällen kann man einfach in Frage stellen, ob ein CMS das richtige System ist. Also ein klassisches CMS, wenn ich es jetzt mal, weil über den Jamstack haben wir heute die Möglichkeit, das genauso mit statischen Seiten abzudecken. Und die statische Seite ist tendenziell viel kleiner am Server, viel, viel weniger auffahren. Kann ich reinen im CDN hosten und so weiter. Dazu gerne in vier Augengesprächen mehr. Wir sind da oben, wenn es wen interessiert. Ich gebe noch mal einen Dich ab, Hannah, wir haben noch fünf Minuten. Ja, danke, oh ja, dann mache ich auch schnell und ich kann mich nur anschließen. Also kommt gerne vorbei. Wir haben oben die Website Carbon Clinic aufgebaut. Für euch, da könnt ihr mit eurer Website vorbeikommen, also uns die URL geben und dann checken wir eure Website, ob die energisch barnd ist oder ob die ein Dreckschleuder ist. Ja, zu UX und Design nur nochmal kurz angemerkt. Man könnte, wenn man jetzt größere strukturelle Änderungen vornehmen möchte, im Design in Dart Mode andenken. Der ist bei modernen Bildschirmen zumindest um ein vielfaches Strom sparen. Da als hellere Websites kommt echt auf den Screen an. Ist nicht bei allen so, aber der Trend ist, dass das schon was bewirkt. Und naja, man kann Bildkonzepte einfach noch weiter erarbeiten und bearbeiten, um Bilder weiter einzusparen. Zum Beispiel hier wurde davon abgelassen, die Website über die komplette Seite laufen zu lassen, über die Breite, sondern wurde begrenzt. Und das kann man einfach gut machen. Wenn ihr ein gutes Grid habt für eure Website, wäre das gut, wenn ihr das daraufhin anpasst, dass es eine maximale Breite gibt. Und hier ist ein Beispiel von einem Online-Shop. Da kann man in der Übersicht noch gar keine Produktfotos sehen, sondern nur, wenn man draufklickt, das lädt also nur eine wirklich sehr minimale Datei. Und nur, wenn man wirklich Interesse hat am Produkt, wird das dann wirklich gezeigt. Aber das ist natürlich was, das braucht ein gutes Konzept. Also, es kann man nicht einfach so schnell austauschen. Genau. Und jetzt wollten wir kurz erklären, was wir mit Cleaner Web machen und versuchen. Genau. Wir haben Cleaner Web gestartet. Am Anfang sollte es eine Aufmerksamkeitskampagne werden. Da man es überlegt, was könnte man machen? Und obwohl wir Siegel selber kritisch sehen, glauben wir doch, dass Siegel, wenn sie richtig gemacht sind, Aufmerksamkeit schaffen. Weil wenn der Zugang niederschwellig ist, das heißt, nicht ein teures Audit mit manueller Prüfung und so weiter, sondern wenn wir schaffen, technisch automatisiert, Webseiten zu prüfen, dann kann dieses Siegel relativ zügig auf vielen Webseiten auftauchen. Wir empfehlen als Cleaner Web, dieses Siegel zu verbinden mit einer Klimaschutzerklärung, wie eine Datenschutzerklärung. Wir empfehlen auch, das im Futter genau daneben anzuordnen. So dass einfach mehr und mehr User auf ganz normalen Webseiten über dieses Thema stolpern. So gleichzeitig laufend Tipps geben, wie deine Website, wenn du das Siegel hast, weit optimiert werden kannst. Auch, weil sich das Siegel laufend weiterentwickelt und dafür, genau, weil es technische Neuerungen gibt, weil wir die Metriken eventuell überarbeiten. Wir starten gerade eine Zusammenarbeit mit Green Coding Berlin. Da gab es ein erstes Gespräch mit der Ihrem Tool, die sind auch auf der Konferenz, werden wir unsere Metriken durchprüfen. Und ziemlich sicher wird sich dadurch unser Scoring ändern. Und wichtig ist uns, dass das ganze Thema eben nicht nur uns bewusst sein hebt, sondern die Websites auch tatsächlich grüner macht. Und im Schnitt haben wir 40 bis 50 Prozent CO2-Einsparung pro Website, die durch das Auto gegangen sind und nachgebessert haben. Wie funktioniert es? Erzähl ich jedem der Möchte oben und fürs Gerne vor mit euren Websites, die wir dann auch gemeinsam optimieren können. Und das Scoring ist einfach aufgeteilt in verschiedene Bereiche. Die Bereiche sind zueinander gewichtet. Jeder Bereich besteht aus mehreren Metriken, die geprüft werden, die wiederum zueinander gewichtet sind. Und all das wird sich immer wieder verändern. Und dadurch wird es zu einem laufenden Weiterentwicklung auch der Websites kommen. Jeder Bereich hat ein Bonus Malus-System. Das heißt, wenn du eine Sache besonders gut machst, kannst du bei einer anderen ein bisschen schludrig sein und kommst insgesamt noch auf die 100 Punkte für den Bereich. Jeder Bereich kann 100 Punkte maximal haben. Dann werden sie gewichtet, zumiert. Dann kannst du wiederum maximal 100 Punkte haben. Ab 70 kriegst du das Gütesiegel schaffen, also ziemlich exakt die Hälfte aller Seiten im ersten Anlauf. Ja, das ist der Abschluss. Genau, nur ganz kurz. Sozusagen unsere Vision, die hinter unserem ganzen Projekt steht, ist natürlich das genau das, was wir jetzt erzählt haben, so eine Art Standard wird. Also, dass bestimmte Mindeststandards eingehalten werden. Und das ist sicherlich keine Utopie, sondern das ist eine sehr gratuelle, bewusste Veränderung, die man als Wandel für die Umwelt, aber eben auch für den Menschen anstoßen kann. Und wir denken, dass das zu diesen Punkten folgen würde, führen würde, nämlich, dass Websites einfach ein bisschen effektiver sind, auch für die menschliche Psyche, sozusagen. Dass das Internet schneller wird, weniger frusttet. Und dass das eben auch zu einer gewissen Inklusion führt, die sozialen Faktoren, die ich vorhin schon erwähnt habe, durch eine schnelle, effiziente Website. Und was uns auch ganz wichtig ist, ist, dass wir möchten, dass das ganze gesetzlich verankert wird. Dass es einen gesetzlichen Standard gibt, dass zum Beispiel Autoplay nicht mehr möglich sein kann, dass bestimmte Sachen einfach nicht mehr gemacht werden dürfen, weil sie unnötig sind und die Umwelt einfach zu stark belasten. Genau. Vielen Dank für die Aufweksamkeit. Ich hoffe, ihr habt das gedennt und kommt wirklich sehr gerne vorbei. Matthias, sie braucht das Mikrofon. Super, danke schön. Danke euch beiden. Ich muss leider den Rausschmeißer spielen, weil mir ganz klar gesagt würde, ich muss das hier immer ganz streng und böse beenden. Ihr seid wohl noch mal genau, damit wir es noch mal sagen können. Einfach die Treppe hoch, zweiter Tisch rechts. Okay, Treppe hoch, zweiter Tür rechts. Dann vielen Dank und ich wünsche euch noch viel Spaß bei den Bitz und Bäumen 2022. Danke euch.