Green Web Adventskalender

'Mathias Arzberger'
Mathias Arzberger

Zu Türchen #1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #22, #23, #24

 

Wäre das Internet ein Land, würde es Platz 6 der Liste der Länder mit dem größten CO₂-Ausstoß belegen.

Unser ökologischer Fuß­abdruck wird längst nicht mehr nur von unseren Ernährungsgewohnheiten, der täglichen Verkehrsmittelwahl oder dem individuellen Wassersparverhalten bestimmt.
Nein - auch unsere Bespaßung durch Katzenvideos, der tägliche Austausch per Whatsapp oder Netflix Binge-Watching spielt hier zunehmend eine Rolle. Denn die Rechenleistung, Kühlung und Stromversorgung von Tausenden Servern, die uns Online-Inhalte weltweit jederzeit verfügbar machen, kosten täglich Unmengen an Energie.
 
Den einzelnen Nutzer einfach aufzurufen weniger zu surfen, zu streamen oder zu chatten scheint hier wenig erfolgverspechend. Wir beschäftigten uns also mit Möglichkeiten der Ursachenbekämpfung und der Frage wie auch Agenturen, Designer und Entwickler im digitalen Raum nachhaltig handeln können.
 
Können wir mit einem anderen Ansatz in der Webentwicklung das Internet umweltfreundlicher gestalten?
 
Unser pdir X-MAS Kalender gibt euch Antworten: Jeden Tag ein neuer Tipp für nachhaltige Webanwendungen.
 

#24 Unser Geschenk für nachhaltige Webprojekte

Die vergangenen Wochen haben uns gezeigt, dass die Energieverschwendung online durchaus ein Thema ist, mit welchem sich auch die Branche beschäftigen sollte. Der Energieverbrauch von Webseiten kann für uns zwar nur schwer oder sogar manchmal unmöglich genau zu messen sein, aber es gibt dennoch viele Dinge, die wir tun können, um Energieverschwendung zu vermeiden und Effizienz zu verbessern. Die meisten der dafür notwenigen Aktiviäten sind nicht grundlegend schwierig oder besonders aufwendig - sie erfordern einfach Aufmerksamkeit auf gewisse Detaills und sorgfältige Überlegungen hinsichtlich Design, Inhaltserstellung, Entwicklung und Hosting.
 
Aber das Beste daran ist, dass fast alles, was wir tun können, um Webseiten energieeffizienter zu gestalten, wird sie auch auf andere Weise besser machen, sei es besseres SEO, bessere Performance oder bessere Benutzerfreundlichkeit.
 
Eine energieeffizientere Webseite ist also in vielen Hinsichten einfach auch eine bessere Webseite.
 
Dies haben wir uns zum Anlaß genommen und viele der von uns vorgestellten Tipps kurzerhand in die Praxis umgesetzt, um allen, die Interesse daran haben, engergieeffiziente Webseiten zu bauen, ein Werkzeug in die Hand zu geben:
Ein neues Contao-Theme - ein energiesparendes Theme, welches als leichtgewichtiger Ausgangspunkt eurer zuküftigen energieeffizienten Webprojekte dienen soll.
 
Alle Details hierzu und natürlich das (kostenlose) Theme selbst findet ihr ab Anfang nächsten Jahres hier: https://contao-themes.net/
 
Wir sind gespannt, ob wir damit tatsächlich ein bisschen Nachhaltigkeit in die digitale Welt bringen können und freuen uns auf zahlreiches Feedback und natürlich auch weitere Tipps zur Reduzierung des Energieverbrauchs von Webseiten, die wir gern mit aufnehmen... Lasst es uns wissen!
 
In diesem Sinne: Eine frohe und nachhaltige Weihnacht euch allen!

#23 Solar Powered Website

Für alle, denen ein Green Hoster nicht reicht und die die Energiebilanz ihrer Website selbst in die Hand nehmen wollen, haben wir hier einen ganz besonderen Tipp:
 
Betreibt eure Website selbst - und zwar mit 100% mit Sonnenenergie.
Dazu braucht ihr u.a. nur einen Einplatinencomputer, ein Solarpanel und/oder Akku und eine 100Mbit Internetleitung.
 
Kleiner Wermutstropfen: Die Webseite ist - je nach Wetterlage - nicht immer unterbrechungsfrei online, aber wenn eure Zielgruppe und deren Onlinegewohnheiten nicht dagegen sprechen - why not?
 
Wie kann also eine solche Low-Tech-Website aussehen? So hier: https://solar.lowtechmagazine.com/
Und wie funktionierts? Hier werden die technischen Hintergründe erklärt: https://homebrewserver.club/low-tech-website-howto.html
 
"This is a solar-powered website, which means it sometimes goes offline" ;)

#22 Leichter Code

Schlanker und effizienter Code ist nicht nur energiesparsam sondern eine grundsätzlich gute Sache, denn von sauberem und einfachem Code ohne Doppelungen und mit effizienten Abfragen profitieren Performance, Wartbarkeit und Umwelt gleichermaßen.

Bedenkt jedoch, dass dies nicht nur für den Code gilt, den ihr selbst verfasst, sondern auch für den Code, den ihr euch "ausleiht". Beim Verwenden von fremden Frameworks und Bibliotheken, sollte also stets darauf geachtet werden, dass diese so gut wie möglich auf die benötigten Funktionalitäten zugeschnitten sind, und keine tonnenschwere Eierlegendewollmilchsau eingebunden wird.

Ganz und gar nicht schwer und recht smart ist beispielsweise das CSS-Framework Spectre - dieses wiegt bei komprimierter Auslieferung lediglich 10kb. Läd man nur Module, die man auch wirklich braucht, lässt sich dies sogar noch weiter verringern.

So lässt sich mit Leichtigkeit Energie sparen ;)

#21 Safari Web Inspector CPU Timeline

Der Web Inspector in Safari enthält seit einiger Zeit ein nützliches Werkzeug zur Unteruchung der Engergieeffizienz von Webseiten: die CPU-Timeline. Mit dieser können Entwickler die CPU-Auslastung einer Seite messen, die Energieauswirkungen von Skripten etc. abschätzen und somit leichter die Ursachen ausmachen, die eventuell zu einer schlechten Energienutzung beitragen.
 
Dieser Artikel der WebKit-Entwickler von Apple bietet einen Einblick in das Tool: https://webkit.org/blog/8993/cpu-timeline-in-web-inspector/

#20 Green Hosting

Mit Green Hosting ist gemeint, dass der Hoster einer Website mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies zum Beispiel bei Biohost oder Mittwald möglich und auch all-inkl setzt auf Strom aus regenerativen Energien. Dies allein reicht sicher nicht aus, um das online entstandene CO₂ zu kompen­sieren, aber es sorgt zumindest für Schadensbegrenzung.

Also schaut doch mal nach, wie der Hoster eures Vertrauens diesbezüglich aufgestellt ist.

#19 CDNs verwenden

In Tipp #9 erklärten wir, dass es besonders energieeffizient ist, einen Hoster mit einem Rechenzentrum in der Nähe der Hauptzielgruppe zu wählen. Was aber, wenn die Zielgruppe über die ganze Welt verteilt ist?

Content-Delivery-Netzwerke (CDN's) bieten hierfür eine hervorragende Lösung, indem sie Assets, wie Bilddateien, aus einem Netzwerk von Rechenzentren auf der ganzen Welt ausliefern. Somit können die angefragten Daten meistens zu großen Teilen von einem CDN-Speicherort in der Nähe des Benutzers geladen werden, was die Entfernung, die die Daten bei jedem Laden einer Seite zurück legen müssen, deutlich verringert.

Dies verbessert erneut die Energieeffizienz und die Seitenladezeiten, also ein Puls an Performance & User Experience.

#18 Skip video

Videos sind mit Abstand die daten- und verarbeitungsintensivste Form von Inhalten - werden jedoch als Inhaltsformat im Web immer beliebter. Eine Website mit Videowiedergabe kann um ein Vielfaches größer sein als ohne Video und erzeugt zusätzlich eine viel höhere Belastung der CPU des Nutzers, was zu einem deutlich höheren Energieverbrauch führt.

Hinsichtlich der Energieeffizienz seiner Website sollte man also zu aller erst prüfen, ob Videos wirklich notwendig sind. Falls ja, überlegt euch wie die Menge der Streamingdaten reduziert werden kann: z.B. indem Videoinhalte so kurz wie möglich gehalten werden und die automatische Wiedergabe deaktiviert wird.

skip video - save energy.

#17 Mit Reizen geizen

Webfonts sind toll, weil sie Webseiten schöner & individueller machen können - sie wirken sich jedoch leider oft negativ auf die Dateigröße der Website aus. Eine einzelne Schriftdatei kann bis zu 250kb groß sein - und das pro Schriftstil. Wer also gern light, fett, kursiv und Kapitälchen verwendet landet schnell bei 1MB Zusatzgewicht. Wer Daten, Ladezeiten und Energie sparen will, sollte also die folgenden Optionen in Betracht ziehen:
 
Verwendet weniger. Versucht sparsam mit der Anzahl der Schriften und auch deren Schriftstilen umzugehen, weniger ist hier mehr.
 
Verwendet keine Webfonts. Verwendet Systemschriften. Und wir meinen hier nicht Arial und Times New Roman. Die Rede ist von Schriften, die Hausherren ihrer Betriebssysteme sind und für moderne, hochauflösende Bildschirme konzipiert sind. Apple, Google & Microsoft haben bei ihren Systemschriften San Francisco, Roboto & Segoe beeindruckende Arbeit geleistet und ihr befindet euch in guter Gesellschaft: GitHub, Booking.com, Medium - alle verwenden Systemschriften, alle performant und alle schön & wirkungsvoll auf ihre eigene Weise.
 
Dieser humorvolle Erfahrungsbericht von Booking zeigt, dass dies auch eigentlich ganz einfach zu implementieren ist - wenn man weiß wie... ;)

#16 Auf die PUE des Hosters achten

Die Energieeffizienz von Rechenzentren lässt sich mit einer Kennzahl namens Power Usage Efficiency, kurz PUE einstufen. Die PUE zeigt das Verhältnis von der Gesamtenergie, die in das Rechenzentrum gelangt, zu der Energie, die tatsächlich benötigt wird, um dessen Computer zu betreiben. Dies verdeutlicht dann die Menge an Energie, die für nicht-rechenbezogene Aktivitäten, wie Kühlung, verschwendet wird.

Die typische PUE für ein Rechenzentrum liegt bei etwa 1,67. Dies bedeutet, dass von 1,67 Watt, die in das Rechenzentrum fließen, nur 1 Watt für die Stromversorgung der Computersysteme verwendet wird. Je mehr sich der PUE-Wert also der Zahl 1 nähert, umso effizienter arbeitet das Rechenzentrum. Hochleistungsrechenzentren, wie die von Google betriebenen, können einen PUE-Wert von bis zu 1,11 aufweisen.

Kennt ihr die PUE des von eurem Hoster verwendeten Rechenzentrums?

#15 PWA (Progressive Web App)

Durch die progressive Web-App-Technologie können Webseiten Funktionen zu nutzen, die normalerweise nur in native Apps verfügbar sind. Beispielsweise das Zwischenspeichern von Dateien auf dem Endgerät des Nutzers, mit dem klaren Vorteil, dass Inhalte und Assets bei wiederholten Besuchen nicht jedes Mal neu geladen werden müssen. Dies kann die zu übertragende Datenmenge deutlich reduzieren, insbesondere auf mobilen Geräten, bei denen die Datenübertragung energieintensiver ist als bei drahtgebundenen Verbindungen.

Neben der Energieeinsparung werden zudem automatisch Ladezeiten und Benutzerfreundlichkeit optimiert und das ohne irgendwelche Nachteile.

#14 DARK Mode hilft

Dunkle Webseiten waren eine der ersten Techniken, die vor vielen Jahren zum Energiesparen auf Websites populär wurden.
Sie verschwanden jedoch mit dem Aufkommen von LCD-Bildschirmen, die durch eine permanente Hintergrundbeleuchtung gekennzeichnet sind und immer die gleiche Energie verbrauchen - unabhängig von der auf dem Bildschirm angezeigten Farbe.
Mit dem Aufkommen von OLED-Bildschirmen, die jedes Pixel einzeln beleuchten, ist die Verwendung dunklerer Farben jedoch wieder eine praktikable Technik, um den Energieverbrauch auf Endgeräten zu reduzieren.

Also nutzt den Dark Mode rege - z.B. den in unserem neusten Contao Theme NATURE mit Dark Mode.

#13 Die neuste PHP Version nutzen

Im Bezug auf Energieeffizienz sollte man auch über die Server-Technologien nachdenken, die letztendlich unsere Webseiten bereit stellen, denn hier lohnt es sich oft die effizientesten verfügbaren Versionen zu verwenden.

Beispielsweise PHP: Neuere Versionen von PHP sind meist nicht nur schneller, sondern verbrauchen auch weniger Serverressourcen und damit weniger Energie. Dies gilt sicher auch für PHP-Alternativen.

Zudem gehen beim Update einer Software auf die neuste Version mit der erlangten Performance-Steigerung meist auch sicherheitstechnische Vorteile einher.

#12 Server Caching nutzen

Bei CMS-basierten Webseiten, werden die durch den Nutzer aufgerufenen Seiten dynamisch generiert und dann ausgeliefert. Dies ist jedoch relativ ineffizient, da es für jeden einzelnen Seitenaufruf eine Serververarbeitung erfordert, was den Energieverbrauch des Webservers erhöht.

Das regelmäßige Aktualisieren deines CMS kann jedoch die Energieeffizienz durch immer bessere Cachingtechnologien optimieren, beispelsweise setzt Contao ab der Version 4.8  auf den Symfony HttpCache. Schneller ist nur der Varnish Cache.

Caching-Technologien wie Varnish erzeugen vorab statische Versionen jeder Seite, so dass der Energieverbrauch des Servers deutlich reduziert und die Ladezeiten der Seiten erheblich verkürzt werden. Die Einrichtung kann durchaus kompliziert sein, aber viele Hoster bieten diese Option mittlerweile als Zusatzservice an.

Die Energieeffizienz und Performance eurer Website kann durch Server-Caching also mit wenig Aufwand eurerseits enorm verbessert werden.

#11 Statische Seiten bauen ?!?

CMS-basierte Webseiten stellen Datenbank-Abfragen und generieren daraus dynamisch Seiten. Wenn also jemand versucht eine Seite zu laden, muss der Webserver jedes Mal erst nachschauen, welche Informationen er an den Benutzer zurücksenden soll bevor er sie senden kann. Und dafür verbraucht er mehr Energie. Eine Lösung sind Caching-Technologien (dazu später), aber in einigen Fällen ist es sogar möglich, einfach statische Webseiten ohne Datenbank auszuliefern. (Was beispielsweise bei einer sehr hohen zu erwartenden Seitenfrequentierung sinnvoll sein kann)

Also entweder ganz schlicht und einfach statische Dateien in HTML, CSS und JS schreiben oder einen Generator für statische Seiten verwenden, um CMS-basierte Websiten in statische Dateien zu konvertieren.

Die Arbeit kann sich also lohnen - be efficient, be static ;)

#10 Bots blocken

Das Blockieren von Bots kann den Energieverbrauch einer Website unter Umständen deutlich senken - je nachdem wie stark die Website üblicherweise von Bots frequentiert wird. Es wird vermutet, dass Bots oft bis zu 50% der Ressourcen, wie Rechenleistung und Bandbreite, verbrauchen können.

Hier steckt also evetuell ein deutliches Energieeinsparpotential.

#9 Nicht in die Ferne schweifen

Ein Großteil der vom Internet verbrauchten Energie entfällt auf die Datenübertragung über die Telekommunikationsnetze - und je weiter die Daten reisen müssen, desto mehr Energie verbrauchen sie auf ihrem Weg. Die Auswahl eines Rechenzentrums in der Nähe eurer Zielgruppe trägt daher direkt dazu bei, den Energieverbrauch zu senken.
Wenn ihr nun bespielsweise einen sehr günstigen US-Webhoster präferiert, sich eure Zielgruppe jedoch in Deutschland befindet, dann wird jedes Mal Energie dafür verschwendet, die Daten quer über den Atlantik zu schleifen. Darüber hinaus kann diese zusätzliche Entfernung auch zu einer Verlängerung der Seitenladezeiten führen.

Das Hosting einer Website in einem Rechenzentrum in der Nähe des Zielpublikums ist also optimal für die Benutzerfreundlichkeit und den Planeten.

#8 Accelerated Mobile Pages (AMP)

AMP wurde entwickelt, um das Laden von Inhalten auf mobilen Geräte zu beschleunigen, indem unnötiger Code und Dateigewicht entfernt werden und eine minimalistische Version der ursprünglichen Webseite bereitgestellt wird. Eine AMP Seite hilft natürlich nicht wirklich viel, wenn die Website von Anfang an effizient ist, aber falls die ursprüngliche Webseite eher etwas schwerfälliger daherkommt, kann AMP ein nützliches Werkzeug sein, um mobilen Benutzern eine leichtere und energieeffizientere Version zu liefern.
Es sei auch darauf hingewiesen, dass Google AMP-Inhalte in den mobilen Suchergebnissen priorisiert, insbesondere nachrichtenbezogene Themen.

Somit können AMP Seiten nicht nur die Energieefizienz und User Experience sondern auch die Sichtbarkeit eurer Inhalte erhöhen.

#7 Technisch Optimale Bilder

Wenn die Verwendung von Bildern auf einer Website auf Effizienz und Nützlichkeit geprüft wurde (siehe Tipp #1), können nun einige technische Entscheidungen dabei helfen, die Dateigröße der letztendlich verwendeten Bilder erheblich zu optimieren:
 
* Ladet Bilder in der richtigen Größe und skaliert sie nicht nur mit CSS ins richtige Format.
* Nutzt responsive Image Elemente wie picture, source und srcset, um für jedes Endgerät die passende Bildgröße auszuliefern.
* Verwendet Tools wie TinyPNG oder ShortPixel, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren.
* Verwendet für jedes Bild das effizienteste Dateiformat, z.B. WebP anstelle von JPEG.
 
Somit können Bilddateigrößen deutlich optimiert werden, was den Energieverbrauch reduziert und Ladezeiten verbessert, ohne die Benutzerfreundlichkeit der Webseite zu beeinträchtigen.

#6 Nikolausgeschenk: Effizientes Arbeiten im Backend

Die kontinuierliche Wartung, Betreuung und Pflege von Webseiten erfordert mal mehr und mal weniger komplexe und zeitintensive Online-Aktivitäten im Backend der Onlinepräsenz. Webseiten so effizient und zeitsparend wie möglich zu Pflegen spart also Online-Zeit und damit Energie.
Contao-Nutzern kann hier geholfen werden, denn heute haben wir für euch zwei Contao-Erweiterungen, die in diesem Zuammenhang durchaus als "ökologisch sinnvoll" betrachtet werden können:
 
-> *NEU* Contao Backend Helper - Erweiterung für effiziente Bulk-Verarbeitung
 
-> Sticky Backend Footer - Schnelleres Speichern mit sticky Buttons
 
Happy Nikolaus!

#5 Guter Text - gute Energie

Das Verfassen guter Texte hat durchaus Einfluss auf die Energie-Effizienz einer Website, da es die Dauer beeinflusst, die der Nutzer auf der Website verbringt.

Ok, manchmal wollen wir auch, dass unsere Zielgruppe möglichst viel Zeit auf unserer Website verbringt und sich in die Inhalte vertieft - was wir jedoch nicht wollen, ist, dass Nutzer ihre Zeit damit verschwenden, sich durch Inhalte zu kämpfen, die sie überhaupt nicht interssieren.

Somit kann klares und effizientes Copywriting dazu beitragen, Zeitverluste und damit einhergehende Energieverschwendung zu reduzieren.

#4 Optimale User Experience (UX)

Die User Experience geht einher mit der Erwartung, dass Erlebnisse einwandfrei funktionieren, dass der Nutzer in der Lage ist, die Dinge zu finden, die er finden will und zudem noch Freude bei der Anwendung hat.
 
Ein gutes UX-Design macht die Nutzung des Webs also einfacher und angenehmer für alle und reduziert vor allem die Menge an Energie, die beim Navigieren zu Seiten, die nicht dem richtigen Zweck dienen oder dem Drücken von Buttons, die die falsche Aktion auslösen, verschwendet wird.
 
Somit freuen sich der Nutzer, eure Conversation und die Umwelt zugleich. :)

#3 Energieverschwender Javascript

Hört ihr den Laptop Lüfter surren? Das ist Energie, die verschwendet wird.
Die Verwendung von Javascript erhöht einerseits die Dateigröße der Webseite und andererseits erfordert dessen Verarbeitung mehr Ressourcen auf dem Endgerät des Benutzers. Dies erhöht die CPU-Auslastung, was wiederum den Energieverbrauch des Geräts erhöht.

Ihr könntet euch also fragen, ob die gewünschte Interaktion, Funktionalität oder Animation vielleicht auch mit effizienteren Technologien, wie CSS, realisierbar wäre? Zudem sollte Javascript zumindest effizient und sinnvoll genutzt werden. Schaut man sich beispielsweise Tracking- und Werbe-Skripte an, die dem Nutzer selten einen Wert bieten, dafür aber die Websitegröße erhöhen, eine signifikante CPU-Auslastung verursachen, Websites verlangsamen und in Privatsphären eindringen, scheinen diese jenes Kriterium nicht zu erfüllen.

Untersuchen kann man Performanceeinbußen durch Ad-Skripte sehr gut mit Webtest.app

Also think twice, save energie & hardware.

#2 Energie sparen mit gutem SEO

Ja, gutes SEO hat durchaus eine energieeffiziente Wirkung und dass auch noch so ganz zufällig nebenbei:
Bei der Optimierung einer Website für Suchmaschinenrankings helfen wir Menschen, die gewünschten Informationen schnell und einfach zu finden. Erfolgreiches SEO führt also dazu, dass Menschen weniger Zeit damit verbringen, im Internet nach Informationen zu suchen und auch weniger Seiten besuchen, die ihren Bedürfnissen nicht entsprechen.

Es wird also in Summe weniger Energie verbraucht und die dennoch verbrauchte Energie lieferte dem Benutzer einen echten Mehrwert.

#1 Bilder mit Mehrwert

Eins ist klar: Je mehr Bilder eine Website verwendet und je größer diese Bilddateien sind, desto mehr Daten müssen übertragen werden und desto mehr Energie wird verbraucht. Bevor hier technische Optimierungen angewendet werden, um dies zu kompensieren, könnte man vielleicht auch mal genauer über die Verwendung von Bildern nachdenken und sich folgendes fragen:

* Bringt das Bild wirklich einen Mehrwert für den Benutzer?
* Vermittelt es nützliche Informationen?
* Könnte die gleiche Wirkung erzielt werden, wenn das Bild kleiner wäre?
* Können wir Bilder reduzieren, die für den Benutzer nicht sichtbar sind, z.B. in Slidern?
* Könnten wir den gleichen Effekt mit einer Vektorgrafik (oder sogar per CSS) anstelle eines Fotos erzielen?

Wenn ihr euch also diese Fragen stellt, wird es euch gelingen das Bildmaterial zu reduzieren, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
Und dies wird direkt dazu beitragen, den Online-Energieverbrauch zu senken.

Zurück