Nachhaltiges Webdesign – Tools, die Ihnen helfen CO2 Ausstoß einer Webseite zu erkennen, zu messen und im Nachgang zu minimieren.

Nachhaltiges Webdesign

Was versteht man unter nachhaltigem Webdesign?

Es geht dabei primär darum, Webseiten ressourcensparend und nachhaltig zu gestalten.

Ressourcensparend bedeutet in diesem Zusammenhang den Stromverbrauch zu minimieren und somit den  CO2-Ausstoß auf ein Minimum zu reduzieren.
Nachhaltig bedeutet, das Webdesign der Webseiten durch verschiedenste Methoden und Praktiken umweltbewusster zu gestalten.

Dabei geht es nicht nur darum z.B. Ladezeiten der Webseite zu verringern, sondern vor allem auch darum, ein Nachhaltigkeitsbewusstsein der Benutzer aufzubauen und zu stärken, indem ein zieloptimierter, intuitiver Content unter Aspekten der UX zur Verfügung gestellt wird.

Das Internet hat sich mittlerweile zu einem der größten Stromverbraucher weltweit entwickelt und der Bedarf an Energie wächst weiter stetig an. Umso wichtiger ist es deswegen „unsere Webseiten“ auf Nachhaltigkeit zu überprüfen. „Unsere Webseiten“ – bedeutet in diesem Zusammenhang, dass jeder Webseitenbetreiber in der Verantwortung ist und zu einem positiven Wandel beitragen kann.

Nachhaltiges Webdesign kann bis zu 90% CO2 -Ausstoß verringern und vereint dabei Nutzerfreundlichkeit und Umweltbewusstsein.

Der erste Schritt zu einer nachhaltigen Webseite ist, diese auf „Green Web Design“ zu prüfen um den nötigen Handlungsbedarf zu ermitteln – eine Nachhaltigkeits-Bestandsaufnahme („ sustainable snapshot“ ).

Nachhaltigkeit ist in diesem Zusammenhang messbar!

Tools für Nachhaltiges Webdesign:

Folgende Tools helfen eine komplette „Nachhaltigkeits-Bestandsaufnahme“ der Webseite zu ermitteln:

  1. Website Carbon Calculator
    Mit diesem Calculator wird der C02 Ausstoß pro Seitenaufruf einer Webseite ausgegeben und ein Vergleichsranking ermittelt. Mit dem angebotenen Badge, der auf der Webseite mittels zur Verfügung gestellten Code eingebunden werden kann, kann das Nachhaltigkeitsbewusstsein der Benutzer gestärkt werden.

  2. The Green Web Foudation
    Es ist wichtig und eine Grundvoraussetzung „Green-Hosting“ zu verwenden. Dieses Tool ermittelt, ob der Server und somit die Webseite mit „Grüner Energie“ betrieben wird. Mit einem zur Verfügung gestellten Badge zum Einbinden auf der Webseite kann wiederum gezeigt werden, dass nachhaltige Energie verwendet wird und somit wird der Benutzer in seinem Surfverhalten nachhaltig sensibilisiert.

  3. Ecograder
    Das Ecograder Online Tool ermittelt nicht nur einen Web Page Score unter Verwendung von Daten der Green Web Foundation und Google Lighthouse, sondern stellt Vorschläge zur Verfügung den „Website Carbon Footprint“ zu verbessern. Es wird z.B. auch der Carbon Dioxid Equivalent ermittelt, der bei jedem Aufruf der Seite entsteht.

  4. Digital Beacon
    Digital Beacon ist ebenso ein Analyse-Tool, welches z.B. misst,
    wieviel CO2 beim ersten und wiederkehrendem Aufruf der Webseite verbraucht wird,
    wieviel Bytes beim ersten und wiederkehrendem Aufruf geladen werden und unter anderem auch, wie viele Bäume gepflanzt werden müssen um den CO2– Ausstoß eines Jahres auszugleichen.

  5. Google Lighthouse
    Innerhalb des Google Entwicklertools gibt es ein mächtiges Tool, welches die Benutzerfreundlichkeit, Performance, Suchmaschinenoptimierung einer Webseite analysiert. Die Entwicklertools gibt es als Browser-Erweiterung z.B. für  Google Chrome. Es wird auch hier, wie bei vielen ähnlicher Tools ein Ranking-Score ermittelt mit Verbesserungsvorschlägen. Dabei kann auch eingestellt werden ob eine Mobile- oder Desktop Version simuliert und analysiert werden soll.

  6. Google Page Speed Insights
    Ähnliche und vergleichbar mit Lighthouse, bietet Google einen Web-Applikation-Tool als Standalone, mit dem Barrierefreiheit, Performance, Best Practice als Score ausgegeben wird.
    Alles auf Basis der Google Core Web Vitals.

  7. Gtmetrix – Website Performance – Testing and Monitoring
    Gtmetrix bietet ein ähnliches Tool um Perfomance und Pagespeed zu analysieren. Hierbei werden die einzelnen Komponenten anders gewichtet, sodass durchaus ein anderer Score erreicht wird im Vergleich zu z.B. Google Lighthouse.

  8. Webpagetest – Website Performance and Optimization Tests
    Webpagetest stellt vor allem für Entwickler eines der umfangreichsten Tools zur Verfügung. Hier kann unter anderem auch der Serverstandort, der Browser und die Internetgeschwindigkeit als Grundlage der Tests ausgewählt werden. Ebenso kann auch hier die Performance für Erst- und Wiederkehrende Aufrufe analysiert werden. Ein interessantes und hilfreiches Feature bietet die Möglichkeit, Videos vom Aufruf der Seite zu analysieren.

  9. Core Web Vitals Google – Browsererweiterung
    Hierbei handelt es sich um eine nützliches Diagnose Tool welches Änderungen einer Webseite in Echtzeit zeigt, im Bezug auf Googles Core Web Vitals – Standards. Es wird oft mit einem Performancemessungs-Tool verwechselt. Bei dem Tool geht es aber mehr um die Überprüfung der Änderungen nach dem Aufruf der Seite. Die drei Maxime der WebVitals sind LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift).

  10. Diverse SEO Tools
    Da für nachhaltiges Webdesign ein suchmaschinenoptimierter Content zwingend notwendig ist, helfen auch hier diverse Tools, Nutzerverhalten, Browserstatistiken, Absprungraten u.ä. zu tracken um demgemäß den Inhalt der Seiten zu optimieren. Hier gilt: sowenig wie möglich Klicks = Aufrufe zu haben um den gewünschten Inhalt zu erreichen. Hierbei helfen SEO-Tool Schwachstellen aufzudecken und im Sinne von „Better-UX“ – nachhaltiger zu werden.

    https://www.seobility.net/de/
    SEO-Optimierungstool mit Vergleichsmöglichkeiten anderer Webseiten.

    https://answerthepublic.com/
    Tool zur Ermittlung treffender Suchbegriffe indem Benutzersuchbegriffe ermittelt und verglichen werden.

    https://withcabin.com/
    „Privacy-first, carbon conscious web analytics“ – Ein nachhaltiges Web Analyse Tool wie Google Analytics, das Ihre Privatspäre schützt und ohne Cookies auskommt.

Die hier von mir vorgestellten und oft genutzten Tools sind ein kleiner Auszug verschiedenster Möglichkeiten, online eine Webseite auf Nachhaltigkeit, nachhaltiges Webdesign zu prüfen, um einen „Sustainable Snapshot“ der Webseite zu erstellen.

Die Arbeit beginnt nach der Auswertung, Stück für Stück den CO2– Ausstoß beim Aufruf unserer Webseiten zu minimieren um somit einen nachhaltigen Beitrag zum Umweltschutz zu leisten.

Am Rande sei hier nochmal erwähnt, dass eine, z.B. bei  Lighthouse gerankte Seite mit 100% Perfomance noch lange keine umfassend, nachhaltige Webseite ist. Jeder Aufruf einer einzelnen Seite innerhalb eines Webauftrittes verbraucht Strom und erzeugt CO2, egal wie performant die Seite lädt. Deswegen ist UX (User Experience) ein weiterer wichtiger Baustein nachhaltige Webseiten zu erstellen, mit intuitiver, klarer Webseitenstruktur den Inhalt betreffend.

An den Anfang scrollen