Mein Website Relaunch: Nur noch 0,1g CO2/page view

Ich hab echt viel ausprobiert, neu gedacht und neu gebaut. Aber es hat sich gelohnt. Die Webseite liegt jetzt nur noch bei 0,1g CO2/page view und im Vergleich damit echt weit vorn. Auch wenn meine Freunde nur noch mit den Augen rollen, wenn ich sage: “Ich werde meine Website neu gestalten. Mal wieder.”. Aber hey. Über das immer wieder umbauen, hab ich so viel gelernt. So viel, was für mich und mit WordPress funktioniert. Also lass uns mal schauen was und wie.




Meine technische Basis

Hosting

Hosting auf erneuerbaren Energien macht einen riesen Unterschied zum Strom aus anderen Bezugsquellen. Mit Standard-Strom werden laut aktuellen Studien 475g CO2e/kWh emittiert und mit Strom aus erneuerbaren Ressourcen nur 33,4g CO2e/kWh (natürlich mit vielen vielen Abhängigkeiten).[1]

Wie grün ein Hoster ist, hängt von vielen Faktoren ab. Die wichtigsten Komponenten sind der Bezug von 100% (nachvollziehbarem, bestenfalls lokalem) Ökostrom und hohe Energieeffizienz.

Ich hab mich zunächst für Manitu entschieden. In der Auswahl waren außerdem Biohost, Raidboxes und greensta (*das ist keine Werbung und keine vollständige Liste von Empfehlungen) und ich beobachte den Markt weiter für mich selbst und natürlich auch für Empfehlungen. Mehr grüne Hoster und eine tiefere Erklärung zum Thema findest du unter anderem auch bei Utopia und im Green Web Foundation Verzeichnis.


WordPress und Theme

Da ich keine Webentwicklerin bin, fiel die Wahl auf ein CMS. Und zwar WordPress. Warum? Weil es für mich am einfachsten zu händeln ist und es viele gute Ressourcen zum CMS gibt. Ja, WordPress selbst fügt im Vergleich zur eigenen Programmierung der Webseite etwas Datengewicht hinzu. Aber ehrlich gesagt nicht so viel, wie ich immer dachte.

Zu dem CMS kommt noch das Theme. Dazu hab ich viel zu Themes, deren Performance, Weight und Requests recherchiert. Dabei heraus kam Neve, das für meinen Case am meisten gepasst hat und treuer Begleiter wurde. Andere leichtgewichtige Themes kannst du einfach im Web suchen, zum Beispiel in diesem Artikel zu The 14 fastest WordPress Themes.


Editor

Der Editor. Mein größtes Fragezeichen. Der Standard-Editor von WordPress war mir einfach zu wenig. Ich wollte mehr. Also hab ich erst mit Elementor gearbeitet, einem Editor, der ganz ok im Vergleich mit anderen abschneidet. Damit lag meine Seite schonmal bei 0,4g CO2/page view (gemessen mit Websitecarbon.com). Nicht schlecht, aber auch noch nicht super duper.

Elementor hat mir außerdem immer wieder Probleme bereitet. Es hat einfach nicht zwischen uns gefunkt. Also ging’s auf eine laaange Suche nach dem richtigen Tool. Was ist rausgekommen? Der WordPress Standard-Editor in Kombination mit GenerateBlocks.

Und weißt du was? Nur durch den Wechsel von Elementor auf GenerateBlocks fiel mein Website Carbon CO2 Score von 0,4g CO2/page view auf 0,1g CO2/page view. Jippieh Yeah!


Plugins

Um WordPress ein wenig zu optimieren, gibt es Tausende von Plugins, die helfen, das Seitengewicht zu reduzieren. Ich empfehle auf jeden Fall Plugins für das Caching, für die Komprimierung von CSS und JavaScript, für das Carbon-Tracking, für’s Lazy Loading und für die Bildoptimierung und -komprimierung.

Ansonsten versuche ich, die Anzahl der von mir installierten Plugins zu begrenzen, damit sie meine Seiten nicht verlangsamen und mit Kilobytes unnötig schwer machen. Meine liebsten Tools kannst du einfach in meiner Toolliste nachlesen.

Du wirst auch sonst keine datenhungrigen und cookiesetzenden Drittanbieter bei mir finden. Der einzige Cookie auf meiner Seite ist von meinem Sprachenswitch. Und mein Analytics-Tool ist WithCabin. Ein Tool, dass weder Cookies setzt, noch in irgendeiner Form persönliche Daten von Besuchern abfängt.

Um den generellen Data-Load klein zu halten, hilft es zudem regelmäßig Beitrags-Revisionen und Papierkörbe zu löschen.


Was hab ich beim Content anders gemacht?

Ich wollte eine schlanke, ausgewogene und ein klein wenig edgy Website erstellen. Nicht zu viele Bilder. Nicht zu viele Animationen. Also beschloss ich, mit Farben und Formen zu arbeiten. Dunkle Farben in der Tat, da ich so viel über die Erhöhung der Barrierefreiheit und bei Geräten mit OLED-Screens über die Senkung des Energieverbrauchs mit dunklen Farben gelesen habe. [2]

Und sonst so? Wo immer möglich, versuche ich (eigene) Icons einzusetzen und alle UX-Prinzipien so glücklich zu machen, als ob sie auf einem Kindergeburtstag wären. Du wirst auf meiner Website keine Bilder in voller Breite oder unendlich lange “Haben Sie dieses Angebot von mir gesehen”-Funnels finden. Ich verwende Module, Elemente, CSS und andere Arten von Designprinzipien wieder, um Datengewicht zu sparen. Reuse statt immer wieder anders. Es gibt auch kein Instagram-Plugin, das neue Beiträge von der Plattform lädt, sondern stattdessen ein Bild von einigen meiner Beiträge als Teaser.


Das Ergebnis

Herausgekommen ist ein CO2 Score, den ich zunächst mit WordPress nicht für möglich gehalten hätte. Mit 0,1g CO2/page view (gemessen mit Website Carbon und Beacon) ist die Seite grüner als über 90% aller getesteten Seiten. Das hört sich doch mega gut an. Die Größe meiner Seite liegt bei 175kb, meine Requests bei 18 und mein Google PageSpeed Score liegt bei über 90 (von 100).


Was noch auf meiner Liste steht

Es gibt noch so viel zu lernen und noch so viel auszuprobieren. Ich möchte gerne ein Dark Theme implementieren, von dem du hin- und herschalten kannst. So wie es für dich lesbarer ist. Ich möchte dir auch mehr über meine persönlichen und geschäftlichen Nachhaltigkeits-Gewohnheiten erzählen. Dazu gehört auch der Ausgleich der verbleibenden CO2 Emissionen auf ein klimaneutrales oder sogar klimapositives Niveau. Dafür muss ich mich einfach mal hinsetzen, was ich bereits (ohne das wirklich als CO2-Ausgleich zu betiteln) tue und was ich noch weiteres dafür tun kann. Ach, und darüberhinaus gibt es viele weitere Ideen. Du siehst, es wird nie langweilig und ich bin mir absolut sicher, dass da noch einiges an Ideen und Tweeks kommen wird. Ich freu mich drauf!


Und was soll dir das jetzt sagen?

Alles ist möglich, auch mit WordPress als Content Management System.

Und: Webseiten müssen nicht öde aussehen, um grün zu sein.

Lass‘ mich auf LinkedIn oder Instagram wissen, was deine liebsten grünen Webseiten sind und teile den Beitrag gerne mit Kolleg:innen, Mitarbeiter:innen und Freund:innen.

Hab‘ eine wunderschöne Woche!

Sandy

Hi, ich bin Sandy, die Autorin dieses Blogs und Green UX/UI Designerin mit der Vision eines grünen Webs. Komm mit auf diese Reise!

––– UX / UI Design –––

Gemeinsame Projekte und Workshops

Du hast Lust auf Workshops zu grünem UX/UI Design oder auf gemeinsame Projekte? Lass uns gerne quatschen!

––– Vernetzung –––

LinkedIn, Instagram und Newsletter

Du willst dich vernetzen oder Updates per E-Mail bekommen? Lass uns gerne auf LinkedIn oder Instagram vernetzen und abonniere meinen Newsletter!