Wie man nachhaltige WordPress-Websites erstellt: 10 praktische Tipps

Nachhaltigkeit ist leicht gesagt, aber schwieriger zu quantifizieren.

Aber wenn es um Websites geht, haben wir jetzt Werkzeuge, die das beweisen.

Wir haben kürzlich einen Carbon-Test für WP Umbrella durchgeführt und festgestellt, dass unsere Website sauberer ist als 78 % aller Webseiten weltweit. Das ist gut, aber wir wissen, dass es noch besser sein kann.

Also haben wir uns damit beschäftigt, was es braucht, um nachhaltige WordPress-Websites zu erstellen. Dieser Blog ist ein direktes Ergebnis dieses Prozesses: ein praktischer Blick auf eine umweltfreundlichere Webentwicklung und wie Sie sie auf Ihre eigenen Projekte anwenden können.

Wie Sie den Carbon Footprint Ihrer Website messen

Der erste Schritt zum Aufbau einer nachhaltigeren WordPress-Website beginnt mit der Ermittlung der Ausgangssituation: Wie viel Kohlendioxid emittiert Ihre Website derzeit pro Seitenaufruf, und woher kommt dieser Fußabdruck?

Es gibt einige Tools, die wir für den Anfang empfehlen. Das sind der Website Carbon Calculator und Digital Beacon. Sie geben Ihnen einen Score für Ihre Website und eine detaillierte Aufschlüsselung der Ursachen für diese Emissionen. Digital Beacon analysiert auch den Beitrag von Bildern, Schriftarten, Skripten, Stylesheets und Videos.

Zahlen, auf die man verweisen kann, machen es einfacher, Nachhaltigkeit zu handeln und Kunden oder Kollegen zu erklären. Sie machen aus vagen Ideen klare Messgrößen.

10 Wege zum Aufbau nachhaltiger WordPress-Websites

1. Nutzen Sie grünes Hosting, das mit erneuerbaren Energien betrieben wird

Ganz gleich, wie effizient Ihr Code ist, die Energie, die Ihre Website mit Energie versorgt, ist wichtig. Daher ist grünes Hosting ein guter Ausgangspunkt für jede nachhaltige Website. Nutzen Sie die Green Web Foundation, die anzeigt, ob das Rechenzentrum Ihres Hosters mit erneuerbarer Energie betrieben wird.

Denken Sie daran, dass nicht alle Hoster ihre eigenen Rechenzentren betreiben. Wenn Ihr Anbieter also nicht aufgeführt ist, bedeutet das nicht unbedingt, dass er nicht umweltfreundlich ist. Aber es lohnt sich, bei ihnen nachzufragen. Und wenn Sie verwaltete WordPress-Hosts vergleichen, prüfen Sie, ob sie mit der Google Cloud Platform zusammenarbeiten, die ihren Energieverbrauch zu 100 % aus erneuerbaren Energien deckt.

Es macht einen Unterschied, wo Ihre Website untergebracht ist. Ein Wechsel des Hosting-Anbieters allein wird eine ineffiziente Website nicht beheben, aber er ist ein sinnvoller Ausgangspunkt.

2. Legen Sie ein CO₂-Budget für jede Seite fest

So wie Sie ein Budget für die Leistung oder die Ladezeit festlegen, gibt Ihnen ein Kohlenstoffbudget einen klaren Rahmen, innerhalb dessen Sie bauen können. Außerdem bietet es einen gemeinsamen Bezugspunkt für Design- und Entwicklungsentscheidungen.

Ein Richtwert, den wir als nützlich empfunden haben, ist, dass 1 Gramm CO2 oder weniger pro Seitenaufruf ein vernünftiges Ziel ist. Verwenden Sie die oben erwähnten Tools, um den CO2-Fußabdruck Ihrer Seite zu schätzen und die Bereiche zu erkennen, die verbessert werden müssen, z. B. übergroße Bilder, umfangreiche Skripte oder Stylesheets.

Diese Daten machen Diskussionen einfacher. Möchten Sie sechs weitere Bilder hinzufügen? Prüfen Sie, wie sich das auf den Kohlenstoffhaushalt auswirkt. Möchten Sie ein Video in die Kopfzeile einbetten? Schauen Sie, wie viel Spielraum Sie noch haben. Ein Budget macht diese Entscheidungen zu einem Gespräch, nicht zu einer Vermutung.

3. Bilder optimieren

Bilder sind fast immer das wichtigste Element auf einer Seite und eines der am einfachsten zu behebenden Probleme. Im Folgenden finden Sie einen Arbeitsablauf, mit dem Sie Bilder optimieren können:

• Beginnen Sie mit der Komprimierung: Verwenden Sie ein Tool wie Squoosh, um die niedrigste akzeptable Qualitätseinstellung zu finden. Wenn Sie bei 70 % keinen Unterschied feststellen können, ist das wahrscheinlich der richtige Zeitpunkt, um aufzuhören.
• Wählen Sie das richtige Format: JPEG für Fotos, SVG für Icons, WebP wo immer möglich. Ihr Theme oder Plugin kann den Formatwechsel oft automatisch vornehmen.
• Verwenden Sie responsive Bild-Tags: WordPress verfügt über eine eingebaute Unterstützung, also verwenden Sie sie wahrscheinlich schon.
• Aktivieren Sie "Lazy Loading": Die meisten modernen Themes tun dies standardmäßig, aber es ist gut, dies zu überprüfen.

Verwenden Sie schließlich ein Plugin zur Bildoptimierung, um die Komprimierung beim Hochladen zu automatisieren. Achten Sie darauf, wie Ihr Thema mit Miniaturansichten umgeht, da einige Themen große Versionen erzeugen, die größer sind als Ihr Originalbild. Ein gutes Plugin wird auch diese komprimieren.

Die meisten Entwickler wissen, wie man Bilder optimiert, aber nur wenige tun es konsequent. Legen Sie eine Regel fest, automatisieren Sie sie, und behandeln Sie sie wie einen Grundstein.

4. Strategisch mit Video umgehen

Videos können eine Website aufwerten, aber sie sind auch eines der kohlenstoffintensivsten Elemente, die Sie hinzufügen können. Vor allem, wenn es hochauflösend ist, automatisch abgespielt wird oder als Hintergrundelement ohne klaren Zweck verwendet wird.

Wenn Sie Videos einbetten, wählen Sie bewusst Formate und Auflösungen, die der Art und Weise, wie sie betrachtet werden, entsprechen. Ein Besucher, der sich ein Video auf seinem Handy anschaut, braucht zum Beispiel keine 4K-Auflösung und keinen Surround-Sound.

Wenn möglich, lassen Sie die Nutzer entscheiden, wann ein Video abgespielt werden soll, anstatt es automatisch abspielen zu lassen. Die automatische Wiedergabe verbraucht Energie, bevor der Nutzer überhaupt entschieden hat, ob es sich lohnt, das Video anzusehen, und Hintergrundvideos werden ohnehin oft ignoriert.

Eine der besten Maßnahmen ist die Komprimierung des Videos vor dem Hochladen. Tools wie HandBrake machen das ganz einfach. Durch die Anpassung von Bitrate und Auflösung ist es oft möglich, die Dateigröße eines Videos um 80-90 % zu reduzieren, ohne dass es einen visuellen Unterschied gibt. 

Mit Bedacht eingesetzt, kann Video immer noch einen Platz im nachhaltigen Design haben, aber nur, wenn es einem Zweck dient und nicht nur Platz füllt.

5. Skripte und Schriftarten von Drittanbietern reduzieren

Schriftarten und Skripte von Drittanbietern bleiben oft unbemerkt und erhalten nicht immer die gleiche Aufmerksamkeit wie Bilder oder Videos. Sie können jedoch eine Website unnötig belasten und sich in ähnlicher Weise auf Leistung und Emissionen auswirken, insbesondere wenn sie aus externen Quellen stammen oder in ineffizienten Formaten geladen werden.

Einer der häufigsten Schuldigen ist die Überfrachtung einer Website mit Schriftschnitten und -varianten. Viele Entwickler fügen ganze Schriftfamilien ein, obwohl eigentlich nur ein normaler und ein fetter Schriftschnitt verwendet werden. Noch schlimmer ist, dass einige ältere Seitenerstellungsprogramme immer noch auf Formate wie TTF zurückgreifen, die nicht so stark komprimiert sind wie WOFF2.

Die sauberere Alternative ist einfach: Laden Sie nur, was Sie brauchen. Das kann bedeuten, dass Sie die Schriftgröße einschränken, zu WOFF2 wechseln oder nach Möglichkeit Systemschriften verwenden. Systemschriftarten erfordern keine externen HTTP-Anfragen und werden auf älteren Geräten oder langsamen Netzwerken schneller dargestellt.

Skripte von Drittanbietern sind ein weiterer zu beachtender Bereich. Jedes Cookie-Banner, jeder Tracking-Pixel und jedes eingebettete Widget bringt zusätzliche JavaScript- und Netzwerkaufrufe mit sich. Versuchen Sie, diese ganz zu vermeiden, indem Sie Tracking, Cookie-Popups und Analysetools entfernen, die von den Nutzern verlangen, ihre Privatsphäre gegen Bequemlichkeit einzutauschen.

Wenn Sie nicht so weit gehen wollen, ist das auch in Ordnung. Überprüfen Sie jedoch den Stapel von Tools, den Sie laden, und fragen Sie sich, ob jedes einzelne noch notwendig ist. Wenn eine Funktion nicht entscheidend ist - oder wenn es eine leichtere Alternative gibt -, sollten Sie sie streichen.

Eine saubere Typografie und ein Design, das die Privatsphäre respektiert, sind nicht nur besser für den Benutzer, sondern bedeuten auch weniger Anfragen, weniger JavaScript und insgesamt eine nachhaltigere WordPress-Website.

6. Caching aktivieren und redundante Anfragen reduzieren

Dies ist eine der niedrig hängenden Früchte mit großer Wirkung, insbesondere für WordPress-Websites mit hohem Besucheraufkommen. Das Caching reduziert die Notwendigkeit, denselben Inhalt für jeden Nutzer neu zu generieren.

Anstatt bei jedem Besuch Anfragen an den Server zu senden, können zwischengespeicherte Versionen der Seiten, Skripte und Stylesheets Ihrer Website im Browser des Benutzers, auf dem Server oder am Rand (über ein CDN) gespeichert werden. Das Ergebnis sind weniger Serveraufrufe, schnellere Ladezeiten und ein geringerer Energieverbrauch.

Eine gute Zwischenspeicherung verbessert auch die Benutzerfreundlichkeit, da die Seite schneller geladen wird und der Browser die bereits vorhandenen Inhalte nicht erneut herunterladen muss. Dies ist in mobilen Netzen nützlich, wo Latenz und Bandbreite begrenzter sind.

Wenn Sie mehrere Kunden-Websites verwalten, sollte Caching Teil Ihres Standard-Stacks sein. Unabhängig davon, ob Sie Caching auf Serverebene, ein Plugin oder integrierte CDN-Funktionen verwenden, ist das Ziel dasselbe: die wiederholte Verarbeitung zu reduzieren, wo immer dies möglich ist.

7. Test unter realen Bedingungen

Eine Website, die auf dem Laptop eines Entwicklers perfekt geladen wird, sagt noch nicht alles aus. Nachhaltige Websites müssen auch für Menschen mit langsamen Verbindungen, älteren Telefonen und begrenzten Datenmengen gut funktionieren, denn diese Bedingungen sind weiter verbreitet, als wir zugeben möchten.

Es lohnt sich also, zu testen, wie sich Ihre Website außerhalb idealer Umgebungen verhält. Die Simulation einer 3G-Verbindung, die Verwendung eines Geräts mit niedriger Auflösung oder das Ausschalten von WLAN und die ausschließliche Nutzung mobiler Daten können Leistungslücken aufdecken, die in den Labormessungen nicht auftauchen.

Diese Art von Tests hilft dabei, unnötige Skripte, nicht komprimierte Medien, übergroße Schriftarten oder Layoutverschiebungen aufzudecken, die die Nutzbarkeit der Seite verzögern. Wenn eine Website auch in weniger idealen Situationen schnell und sauber geladen wird, ist das nicht nur besser für die Barrierefreiheit oder SEO, sondern auch energieeffizienter.

8. Aufräumen, was Sie nicht benutzen

Eine Website wird langsam aufgebläht - ein ungenutztes Plugin hier, ein paar übrig gebliebene Mediendateien dort, ein paar Entwürfe, die nie veröffentlicht wurden. Aber mit der Zeit wird das alles immer schwerer, komplexer und belastet den Server unnötig.

Eine nachhaltige Website ist eine schlanke Website. Das bedeutet nicht, dass Sie alles auf das absolute Minimum reduzieren müssen. Sie müssen nur das entfernen, was keinen Mehrwert mehr bringt. Es lohnt sich, regelmäßige Audits einzuplanen, um zu prüfen:

• Nicht verwendete Plugins und Themes
• Alte Revisionen von Beiträgen
• Verwaiste Mediendateien
• Spam-Kommentare und defekte Links
• Verlassene Tags oder Kategorien

Durch die Bereinigung werden die Größe der Datenbank und die Anzahl der Abfragen reduziert und die Verwaltungsarbeit vereinfacht. Bei Installationen mit hohem Datenverkehr oder mehreren Websites kann es sogar die Größe des Backups verringern und die Bereitstellung beschleunigen.

Auch wenn es keine Schlagzeilen machen wird, ist diese Art des Frühjahrsputzes eine der einfachsten Möglichkeiten, die Serverbelastung zu reduzieren und Ihre WordPress-Website zukunftsfähig zu machen.

9. Verbesserung der Navigation und Verringerung der Klickmüdigkeit

Je länger jemand braucht, um das Gewünschte zu finden, desto mehr Energie verbraucht Ihre Website, und desto wahrscheinlicher ist es, dass er ganz aufgibt. Jeder zusätzliche Klick, jede Weiterleitung und jeder erneute Ladevorgang beansprucht Ressourcen sowohl auf dem Server als auch auf dem Gerät des Nutzers. Das klingt unbedeutend, aber bei Tausenden von Besuchern summiert es sich.

Eine übersichtliche Navigation, eine klare Hierarchie und ein logischer Seitenfluss helfen den Nutzern, in weniger Schritten zum Ziel zu gelangen. Sticky Header, interne Links und fokussierte Landing Pages reduzieren die Notwendigkeit, mehrere Seiten neu zu laden, nur um eine Aufgabe zu erledigen.

Und es gibt noch einen weiteren Vorteil: Schnellere Wege durch Ihre Website bedeuten bessere Konversionsraten und weniger Irrwege und Frustration für die Nutzer. Wenn die Nutzer mit 2 Klicks statt mit 6 Klicks zum gewünschten Ziel gelangen, ist das ein Gewinn für alle.

10. Bauen für Langlebigkeit

Es ist einfach, an Nachhaltigkeit in Form von Kilobyte und Kohlenstoff zu denken, aber es geht auch darum, wie lange Ihre Website funktional, wartbar und relevant bleibt. Jede Neuerstellung ist mit Kosten verbunden. Zeit, Energie, Hosting-Ressourcen und menschliche Aufmerksamkeit werden verschwendet, wenn eine Website zu schnell über sich hinauswächst oder nach der nächsten Aktualisierung nicht mehr funktioniert.

Aus diesem Grund ist langfristiges Denken eine der am meisten übersehenen Formen der Nachhaltigkeit. Wählen Sie Tools und Plugins, die aktiv gewartet werden, schreiben Sie sauberen, dokumentierten Code, damit jemand anderes (oder Sie selbst) später damit arbeiten können, und entwerfen Sie ein flexibles Design, damit sich der Inhalt und das Layout weiterentwickeln können, ohne dass ein komplettes Redesign erforderlich ist.

Eine Website, die 5 Jahre lang mit kleineren Aktualisierungen auskommt, ist immer nachhaltiger als eine, die alle 18 Monate überarbeitet werden muss. Ein sauberer Code, weniger Überarbeitungen und klügere Entscheidungen bedeuten später weniger Emissionen und weniger Burnout bei den Entwicklern.

Beispiele aus der Praxis für nachhaltige WordPress-Websites

Um eine Vorstellung davon zu bekommen, wie eine kohlenstoffarme Website aussieht, sehen Sie hier, wie einige bekannte Websites im Website Carbon Calculator abschneiden:

1. Wikipedia.org

• Geschätzte CO₂ pro Seitenaufruf: 0.02g
• Sauberer als 98 % der getesteten Websites

2. Plattform für Wirkungsmanagement.org

• Geschätzte CO₂ pro Seitenaufruf: 0.09g
• Sauberer als 92 % der getesteten Websites

3. WholegrainDigital.com

• Geschätzter CO₂-Ausstoß pro Seitenansicht: 0.08g
• Sauberer als 93 % der getesteten Websites

Schlussfolgerung

Geschwindigkeit ist für uns nicht mehr verhandelbar. Es ist an der Zeit, die Nachhaltigkeit genauso zu behandeln. 

Jetzt gibt es Instrumente zur Messung der Emissionen, Praktiken zu ihrer Reduzierung und Beispiele aus der Praxis, die beweisen, dass es funktioniert.

Einige der Änderungen sind technischer Natur, wie die Komprimierung von Bildern oder die Streichung nicht benötigter Skripte. Andere sind struktureller Natur, wie die Festlegung eines Kohlenstoffbudgets zu Beginn eines Projekts. Aber nichts davon erfordert massive Abstriche. In den meisten Fällen erhalten Sie am Ende eine schnellere, einfachere und besser zu wartende Website.

Wenn Sie WordPress-Websites für Kunden erstellen, gehört Nachhaltigkeit zu einer verantwortungsbewussten Entwicklung dazu. Und je früher wir das tun, desto besser wird das Web sein.