Nachhaltige Websites erstellen

Das muss keine zusätzliche Last sein. Es kann vielmehr ein Anlass sein, anders über Barrierefreiheit, persönliche Daten und faire Geschäftsmodelle nachzudenken. Für die meisten bleibt der ökologische Fußabdruck der digitalen Welt abstrakt. Im sauberen Büro ist das schwer vorstellbar, aber das Internet ist eine ziemlich schmutzige Angelegenheit.

Laut einer Studie von GreenIT.fr setzt sich der jährliche Fußabdruck der digitalen Welt so zusammen:

• 6.800 TWh an Primärenergie

• 1.400 Mio. t Treibhausgase

• 7,8 Mio. m³ Frischwasser

• 22 Mio. t Antimon-Äquivalent, ein Maß für den Verbrauch nicht erneuerbarer Rohstoffe

Gemessen am Fußabdruck der gesamten Menschheit ergeben sich daraus diese Anteile:

• 4,2 % des Primärenergieverbrauchs

• 3,8 % der Treibhausgasemissionen

• 0,2 % des Wasserverbrauchs

Der CO₂-Ausstoß des Webs entsteht größtenteils durch den Stromverbrauch.

Im Alltag brauchen und verbrauchen wir immer mehr Daten, deshalb steigt der Stromverbrauch des Internets rasch an. Man sieht ihn nicht, und doch hinterlässt er einen enormen CO₂-Fußabdruck.

Daran lässt sich etwas ändern. Ich habe mich deshalb gefragt, wie Design und Webentwicklung das Web energieeffizienter machen können. Meine Antwort ist eine praktische Liste der wichtigsten Schritte, mit denen Sie Energieverschwendung vermeiden und Ihre Websites so sparsam wie möglich machen. Fast alles davon verbessert zugleich die Leistung und die Nutzererfahrung.

Was verbraucht Strom? Auf mobilen Geräten geht der größte Teil der Energie an wenige Hauptkomponenten:

• CPU (Hauptprozessor)

• GPU (Grafikprozessor)

• Netzwerke (WLAN- und Mobilfunk-Chips)

• Bildschirm

Das System passt die Leistung von CPU und GPU an die aktuellen Aufgaben an. Dafür schaltet es einzelne Komponenten ein oder aus und ändert ihre Taktfrequenz. Zu diesen Aufgaben gehört auch das Rendern von Websites, mit denen Nutzer*innen im Browser arbeiten, und von anderen Anwendungen, die Webinhalte anzeigen.

Grob gesagt gilt: Je mehr Leistung die Chips bringen müssen, desto geringer ist ihre Energieeffizienz. Die Hardware kann kurzzeitig auf hohe Leistung gehen, was allerdings viel Strom kostet. Danach wechselt sie schnell wieder in einen sparsameren Zustand.

Energieeffizienz von Websites klingt nach einem rein technischen Thema. Sie lässt sich aber schon verbessern, bevor die Website entsteht, denn Design und Inhalt haben großen Einfluss darauf. Über die folgenden Bereiche lohnt es sich nachzudenken.

Suchmaschinenoptimierung (SEO) scheint auf den ersten Blick nichts mit der Effizienz von Websites zu tun zu haben. In der Praxis hängen beide Ziele aber eng zusammen. Wer eine Website für Suchmaschinen optimiert, hilft Menschen, die gewünschten Informationen schnell und einfach zu finden.

Gelingt das, suchen Menschen kürzer im Netz und besuchen weniger Seiten, die nicht zu ihrem Anliegen passen. Das spart Energie, und die Energie, die trotzdem verbraucht wird, kommt den Nutzer*innen wirklich zugute.

Wie SEO beeinflussen auch Texte die Effizienz einer Website. Sie bestimmen mit, wie lange Menschen auf einer Seite bleiben. Manchmal ist eine lange Verweildauer gewollt, etwa wenn Leser*innen in die Inhalte eintauchen sollen.

Anders ist es, wenn sich Nutzer*innen durch Inhalte wühlen müssen, die ihnen wenig oder nichts bringen. Klare, knappe Texte sparen diese Zeit und damit auch Energie.

Webfonts können Websites optisch aufwerten, verlängern aber die Ladezeit. Eine einzelne Schriftdatei kann bis zu 250 Kilobyte groß sein, und ein weiterer Schriftschnitt, etwa „Bold“, kann noch einmal 250 KB dazubringen.

Um die Last durch eigene Webfonts zu verringern, können Designer*innen diese Möglichkeiten prüfen:

• Nutzen Sie nach Möglichkeit Systemschriften. Sie sind nicht immer so hübsch, aber Schriften wie Arial und Times New Roman sind auf dem Endgerät schon vorhanden. Es muss also keine einzige Schriftdatei geladen werden.

• Verwenden Sie weniger Schriftvarianten. Wenn Sie eigene Webfonts einsetzen möchten, gehen Sie sparsam mit der Zahl der Schriften und Schnitte um.

Im Kern geht es bei guter User Experience (UX) darum, Reibung auf dem Weg durch eine Website zu verringern. Menschen sollen finden, was sie suchen, und ihre Aufgaben möglichst ohne Umwege erledigen. Das macht das Web für alle einfacher und angenehmer, und zugleich sinkt die Energie, die beim Navigieren verschwendet wird. Wer lange braucht, um eine Seite zu entschlüsseln, verbraucht auf ihr mehr Energie. Eine gute Nutzerführung verkürzt diese „Entschlüsselungszeit“ und senkt damit den Verbrauch.

Auf den meisten Websites machen Bilder den größten Teil der übertragenen Daten aus. Je mehr Bilder und je größer die Dateien, desto mehr Daten fließen und desto mehr Energie wird verbraucht. Unabhängig von jeder technischen Optimierung sollten Redakteur*innen genau überlegen, welche Bilder sie einsetzen:

• Bringt das Bild den Nutzer*innen wirklich etwas?

• Vermittelt es nützliche Informationen?

• Hätte ein kleineres Bild die gleiche Wirkung?

• Lassen sich Bilder einsparen, die Nutzer*innen gar nicht sehen, etwa in Karussells?

• Erreicht eine Vektorgrafik oder sogar ein CSS-Stil den gleichen Effekt wie ein Foto?

Wer sich diese Fragen stellt und Bilder so sparsam wie möglich einsetzt, ohne die Benutzerfreundlichkeit zu beeinträchtigen, hält den Energieverbrauch niedrig.

Videos sind seltener als Bilder, werden im Web aber immer beliebter. Sie sind die mit Abstand daten- und rechenintensivste Form von Inhalten. Wie bei Bildern gilt: Fragen Sie sich, ob ein Video wirklich nötig ist. Wenn ja, prüfen Sie, wie Sie die gestreamte Datenmenge verringern können, etwa indem Sie auf die automatische Wiedergabe verzichten und Videos kurz halten.

Eine Seite mit Video kann ein bis zwei Größenordnungen mehr wiegen als eine Seite ohne. Sie belastet außerdem die CPU auf dem Endgerät deutlich stärker und verbraucht damit erheblich mehr Energie.

Dunkle Websites gehörten vor vielen Jahren zu den ersten verbreiteten Techniken, um Energie zu sparen. Mit den LCD-Bildschirmen verschwanden sie wieder, denn anders als Röhrenbildschirme (CRT) haben LCDs eine dauerhafte Hintergrundbeleuchtung. Sie verbrauchen gleich viel Energie, egal welche Farbe zu sehen ist.

Erst mit OLED-Bildschirmen, die jedes Pixel einzeln beleuchten, sparen dunkle Farben auf Endgeräten wieder Energie. Für Browser gibt es viele Erweiterungen, die einen „Dark Mode“ ermöglichen, also die hellen Farben einer Webseite in dunkle umkehren. In vielen Systemeinstellungen ist der Dark Mode heute Standard.

Setzen Sie bewegte Inhalte wie animierte Bilder und automatisch startende Videos sparsam ein. Vermeiden Sie Lade-Spinner als GIF und CSS-Animationen, die ständig neu gezeichnet werden, selbst wenn sie gar nicht zu sehen sind.

Entwickler*innen haben großen Einfluss auf die Energieeffizienz der Websites, die sie bauen und pflegen. Manche Entscheidungen liegen bei Designer*innen und Redakteur*innen. In einigen Bereichen haben Entwickler*innen aber die volle Kontrolle, und in anderen können sie die Inhalte und Designs, die sie bekommen, noch optimieren.

Solange Nutzer*innen mit der Seite arbeiten, darf sie Energie verbrauchen. Schließlich wollen sie, dass die Seite schnell lädt und sofort auf Berührungen reagiert. Oft senken die Optimierungen, die die Zeit bis zum ersten Bild und bis zur ersten Interaktion verkürzen, zugleich den Stromverbrauch. Vorsicht ist dagegen geboten, wenn die Seite nach dem ersten Laden weiter Ressourcen nachlädt und Skripte ausführt. Ziel ist, so schnell wie möglich in den Leerlauf zurückzukehren. Allgemein gilt: Je weniger JavaScript läuft, desto sparsamer ist die Seite. Denn jedes Skript kommt zu der Arbeit hinzu, die der Browser für Layout und Darstellung ohnehin schon geleistet hat.

Nach dem Laden treiben Interaktionen wie Scrollen und Tippen die Leistung der Hardware hoch, vor allem die von CPU und GPU. Das ist sinnvoll. Achten Sie aber darauf, dass die Hardware in den Leerlauf zurückkehrt, sobald Nutzer*innen aufhören. Bleiben Sie außerdem auf den „schnellen Pfaden“ des Browsers. Normales Scrollen etwa ist viel sparsamer als ein eigenes, in JavaScript gebautes.

Das versteht sich fast von selbst: Aufgeräumter, knapper Code ist gut. Halten Sie ihn sauber und einfach, vermeiden Sie doppelten Code und schreiben Sie effiziente Abfragen.

Das gilt für Ihren eigenen Code ebenso wie für den Code, den Sie einbinden. Wenn Sie Frameworks und Bibliotheken verwenden, passen Sie sie so an, dass sie die benötigte Funktion effizient liefern. Schießen Sie nicht mit Kanonen auf Spatzen.

Wenn Sie ein CMS wie WordPress nutzen, verzichten Sie auf Plugins, die Sie nicht brauchen und die das System aufblähen. Wählen Sie solche, die den Server wenig belasten und das Frontend schlank halten.

JavaScript (JS) wirkt sich auf zwei Arten auf die Effizienz einer Website aus: Es erhöht das Dateigewicht der Seite, und es erhöht die Rechenarbeit auf dem Gerät der Nutzer*innen. Der zweite Punkt wiegt bei JS viel schwerer als bei anderen Dateiarten.

Funktionen in JS laufen auf dem Computer oder Telefon der Nutzer*innen. Dort erhöhen sie die CPU-Last und damit den Energieverbrauch des Geräts. Hören Sie den Lüfter Ihres Laptops surren? Das ist verschwendete Energie.

Suchen Sie nach Wegen, Interaktionen, Funktionen und Animationen im Frontend mit sparsameren Techniken wie CSS umzusetzen, oder setzen Sie JS zumindest effizient ein. Besonders ins Gewicht fallen Tracking- und Werbeskripte. Sie bringen Nutzer*innen selten etwas, fügen aber viele Daten hinzu, belasten die CPU erheblich, verlangsamen Websites und können die Privatsphäre verletzen.

Wie oben beschrieben, verursachen Bilder einen großen Teil des Datenverkehrs. Welche Bilder auf eine Seite kommen, entscheiden Designer*innen und Redakteur*innen. Daneben gibt es technische Entscheidungen, die die Dateigröße stark beeinflussen:

• Komprimierung Verwenden Sie ein Werkzeug wie TinyPNG oder ShortPixel, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren.

• Dateiformat Wählen Sie für jedes Bild das effizienteste Format, zum Beispiel WebP statt JPEG.

• Bildgröße Liefern Sie Bilder gleich in der richtigen Größe aus, statt sie per CSS zu skalieren.

Mit diesen Schritten werden Bilddateien deutlich kleiner. Das senkt den Energieverbrauch und verkürzt die Ladezeit, ohne spürbare Nachteile für die Nutzer*innen.

Auch Schriftdateien lassen sich technisch verkleinern. Probieren Sie diese Techniken aus:

• Nutzen Sie moderne Webfont-Formate wie WOFF und WOFF2. Sie komprimieren stärker als die Formate TTF, OTF und SVG.

• Reduzieren Sie die Schriften auf die Zeichen, die die Website tatsächlich braucht.

AMP wurde entwickelt, damit Inhalte auf mobilen Geräten schneller laden. Es entfernt unnötigen Code und Ballast und liefert eine minimalistische Fassung der ursprünglichen Seite aus. Ist eine Website schon von Haus aus effizient, bringt das wenig. Ist sie dagegen nicht so schlank, wie sie sein sollte, kann AMP ein nützliches Werkzeug sein: Mobile Nutzer*innen bekommen schnell eine leichtere, energieeffizientere Fassung.

Früher hat Google AMP-Inhalte in der mobilen Suche bevorzugt und mit einem Blitzsymbol markiert. Seit 2021 ist beides vorbei, schnelle Seiten werden auch ohne AMP gleich behandelt. Dazu kommen Nachteile: Ihre Inhalte werden womöglich über eine Google-Domain ausgeliefert, und AMP entfernt vielleicht Dinge, die Ihnen wichtig sind. Eine Seite, die von Haus aus schlank ist, bleibt deshalb der bessere Weg.

Websites mit CMS fragen eine Datenbank ab und erzeugen Seiten dynamisch. Vereinfacht gesagt muss der Server bei jedem Seitenaufruf ermitteln, welche Informationen er an die Nutzer*innen zurückschickt, und das kostet Energie. Eine Abhilfe ist Server-Caching. In manchen Fällen ist es aber sinnvoll, ganz auf die Datenbank zu verzichten und eine statische Website zu betreiben.

Dafür können Sie die Seiten direkt in HTML, CSS und JS schreiben. Oder Sie wandeln Ihre CMS-Website in statische Dateien um, mit einem Generator für statische Seiten oder über einen darauf spezialisierten Hoster.

Mit Progressive-Web-App-Technologie können Websites Funktionen nutzen, die es sonst nur in nativen Apps gibt. Eine Kernfunktion einer PWA ist, Dateien auf dem Gerät der Nutzer*innen zwischenzuspeichern. Bei wiederholten Besuchen liegen Inhalte und Ressourcen dann schon vor und müssen nicht neu geladen werden. Das kann die übertragene Datenmenge erheblich senken, besonders auf mobilen Geräten, wo die Datenübertragung mehr Energie kostet als über Kabel. Zugleich verbessern sich Ladezeit und Nutzererfahrung, ohne echte Nachteile.

Damit der Akku möglichst lange hält, sollte die Hardware wenig Zeit in Zuständen mit hohem Energieverbrauch verbringen und so oft wie möglich in den Leerlauf zurückkehren.

Webentwickler*innen sollten dabei drei Zustände im Blick haben:

• Nutzer*innen interagieren aktiv mit dem Inhalt.

• Die Seite ist im Vordergrund, aber niemand interagiert mit ihr.

• Die Seite ist nicht im Vordergrund.

Auch ohne Interaktion sollte die Seite so wenig Strom wie möglich verbrauchen.

Zum Beispiel:

Setzen Sie möglichst wenige Timer ein, damit die CPU nur aufwacht, wenn es nötig ist. Bündeln Sie zeitgesteuerte Aufgaben in wenigen Timern, die selten auslösen. Viele unkoordinierte Timer wecken die CPU häufig und verbrauchen mehr als wenige gebündelte.

Eine Seite, die im Hintergrund weiterarbeitet, reagiert außerdem langsamer auf Eingaben. Weniger Hintergrundaktivität verbessert also die Reaktionsfähigkeit und die Akkulaufzeit.

Websites verbrauchen viel Energie im Rechenzentrum und bei der Übertragung der Daten dorthin und zurück. Die Wahl des Webhostings hat deshalb großen Einfluss auf Energieeffizienz und Geschwindigkeit. Auf diese Punkte kommt es vor allem an.

Bei Websites mit einem CMS wie WordPress oder Drupal wird jede Seite bei jedem Besuch neu erzeugt. Das ist sehr ineffizient, denn jeder einzelne Aufruf beschäftigt den Server und erhöht seinen Energieverbrauch.

Caching-Techniken wie Varnish erzeugen vorab statische Fassungen jeder Seite. So sinkt die Serverlast bei den meisten Besuchen deutlich: Der Server verbraucht erheblich weniger Energie, und die Seiten laden spürbar schneller.

Die Energieeffizienz von Rechenzentren wird meist mit einer Kennzahl namens Power Usage Effectiveness (PUE) bewertet. Der PUE-Wert ergibt sich, wenn man die gesamte Energie, die ins Rechenzentrum fließt, durch die Energie teilt, die die Computer darin verbrauchen. So wird sichtbar, wie viel Energie für andere Zwecke wie die Kühlung verloren geht.

Der typische PUE-Wert für ein Rechenzentrum liegt bei etwa 1,67. Von 1,67 Watt, die ins Rechenzentrum fließen, kommt also nur 1 Watt bei den Rechnern an. Hocheffiziente Rechenzentren erreichen Werte bis hinunter zu 1,11.

Ein großer Teil der Energie des Internets fließt in die Übertragung von Daten durch die Telekommunikationsnetze. Je weiter die Daten reisen, desto mehr Energie verbrauchen sie unterwegs. Ein Rechenzentrum nahe Ihrer Zielgruppe senkt deshalb den Energieverbrauch.

Ein Beispiel: Ein Hoster mit Sitz in den USA bietet vielleicht ein günstiges Paket an. Lebt Ihr Publikum aber in Großbritannien oder Deutschland, wird Energie für die Übertragung über den Atlantik verschwendet. Der längere Weg kann die Seiten außerdem langsamer machen.

Steht die Website in einem Rechenzentrum nahe Ihrer Hauptzielgruppe, ist das gut für die Nutzererfahrung und für die Umwelt.

Ist das Publikum über die ganze Welt verteilt, wird es schwieriger. Dann helfen Content-Delivery-Netzwerke (CDNs). Sie liefern Dateien wie Bilder aus einem weltweiten Netz von Rechenzentren aus.

So kommen die größten Dateien meist von einem CDN-Standort in der Region der Nutzer*innen, und die Daten legen bei jedem Seitenaufruf einen kürzeren Weg zurück. Das verbessert die Energieeffizienz und die Ladezeit.

Auch wer unnötige Bots blockiert, kann den Energieverbrauch senken. Jeder Abruf durch einen Bot kostet Rechenleistung und Bandbreite, ohne dass ein Mensch etwas davon hat.

Neuere PHP-Versionen sind schneller und verbrauchen zugleich weniger Serverressourcen, also auch weniger Energie.

Den Energieverbrauch einer Website genau zu messen, ist schwer, manchmal unmöglich. Trotzdem lässt sich viel tun, um Verschwendung zu vermeiden und die Effizienz zu steigern. Die meisten Maßnahmen sind einfach. Sie verlangen vor allem Aufmerksamkeit für Details und Sorgfalt in Design, Inhalt, Entwicklung und Hosting.

Das Gute daran: Jeder Schritt in diese Richtung, ob bessere SEO, bessere Ladezeiten oder bessere Nutzererfahrung, nützt den Nutzer*innen auch auf anderen Ebenen. Eine effizientere Website ist eine bessere Website.