24 Tipps für nachhaltige Webanwendungen
Können wir mit einem anderen Ansatz in der Webentwicklung das Internet umweltfreundlicher gestalten? Hier bekommt ihr nicht nur Antworten sondern konkrete Tipps.
Wäre das Internet ein Land, würde es Platz 6 der Liste der Länder mit dem größten CO₂-Ausstoß belegen.
Können wir mit einem anderen Ansatz in der Webentwicklung das Internet umweltfreundlicher gestalten?
Das haben wir uns gefragt und wir haben recherchiert, gelesen, designt, programmiert, getestet und wieder alles von vorn... Und wir haben Antworten gefunden und wollen diese mit euch teilen: Ihr findet sie in den folgenden 24 Tipps für ein energieeffizientes Web.
#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.
#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.
#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.
#4 Optimale User Experience (UX)
#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.
#6 Tools für effizientes Arbeiten im Backend
#7 Technisch optimale Bilder
#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.
#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.
#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.
#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 ;)
#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.
#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.
#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.
#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.
#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?
#17 Mit Reizen geizen
#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.
#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.
#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 kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
Also schaut doch mal nach, wie der Hoster eures Vertrauens diesbezüglich aufgestellt ist.
#21 Safari Web Inspector CPU Timeline
#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 ;)
#23 Solar Powered Website
#24 Unser Werkzeug für nachhaltige Webprojekte
Eine energieeffizientere Webseite ist also im Grunde genommen immer auch eine bessere Webseite.
Think big. Act now.
Jetzt energiesparende Webseite erstellen mit dem kostenlosen 0.1 Contao Theme
Ähnliche Beiträge
Zurzeit sind keine Nachrichten vorhanden.
*******************
Liebe Leser,
Menschen sind nicht ausschließlich Frauen, Männer, weiblich, männlich, divers – Menschen können vielfältiger sein! Wir möchten euch ALLE als Menschen ansprechen, egal von welchem Geschlecht oder welcher Kultur. Sprachlich ist es schwierig, euch alle „richtig“ anzusprechen. Daher verwenden wir – auch für eine bessere Lesbarkeit – bei Personenbezeichnungen meist die männliche Form, wie Dienstleister oder Partner. Aber eins ist uns wichtig: Keiner soll sich ausgeschlossen fühlen.
Zudem sind wir Verfechter des DU #gernperdu und gestalten so unsere tägliche Kommunikation etwas lockerer und persönlicher. Auch hier gilt: Wir bringen allen die gleiche Wertschätzung entgegen.
*******************