Wie können Webseiten klimafreundlicher gestaltet werden?
In einer Welt, in der der Klimawandel und Umweltprobleme immer präsenter werden, ist es wichtig, dass Unternehmen und Marken ihre Verantwortung wahrnehmen und ihren Beitrag zur Reduzierung von CO2-Emissionen leisten. Eine klimafreundliche Webseite ist ein wichtiger Schritt in diese Richtung und kann dazu beitragen, den ökologischen Fußabdruck zu reduzieren. In diesem Blogbeitrag möchten wir Ihnen fünf wichtige Tipps vorstellen, die Sie bei der Erstellung einer klimafreundlichen Webseite berücksichtigen sollten. Von der Wahl eines nachhaltigen Hosting-Services bis hin zur Optimierung der Seite für eine bessere Energieeffizienz, diese Tipps helfen Ihnen dabei, eine Webseite zu erstellen, die nicht nur umweltfreundlich, sondern auch effektiv und ansprechend ist.
Gerne kannst du direkt auch unser Web-Analyse Tool nutzen, dass dir Stellschrauben zeigt, an welchen Stellen die Webseite klimafreundlicher gestaltet werden kann: zur Web-Analyse für klimafreundlichere Webseiten
Nachhaltiges Hosting
Obwohl es der Name suggeriert, befinden sich Webseiten nicht tatsächlich in den Wolken, sondern werden in riesigen Rechenzentren auf dem Boden gespeichert und verwaltet. Diese Rechenzentren benötigen jedoch eine erhebliche Menge an Strom, um ihre Server und Klimatisierungssysteme zu betreiben, was zu einem hohen CO2-Ausstoß führen kann. Der Betrieb von Webseiten und Cloud-Systemen hat somit einen signifikanten Einfluss auf die Umwelt und den Klimawandel. Es ist daher wichtig, dass Unternehmen und Webseiten-Betreiber ihre Verantwortung wahrnehmen und auf umweltfreundliche Technologien und Praktiken setzen, um ihren Beitrag zur Reduzierung der CO2-Emissionen zu leisten.
Eine Übersicht von Hosting-Dienstleister, welche auf erneuerbaren Energie setzen, lassen sich aus dem Verzeichnis von The Green Web Foundation entnehmen.
Speicheroptimierung durch Dateigrößenreduzierung
Die Komprimierung von Bildern und CSS/JS-Dateien ist ein weiterer wichtiger Schritt zur Erstellung einer klimafreundlichen Webseite. Durch die Verwendung von komprimierten Dateiformaten können Sie die Dateigröße reduzieren, was zu einer schnelleren Ladezeit und geringeren Anforderungen an den Server führt. Dies wiederum bedeutet weniger Energieverbrauch und somit eine geringere CO2-Emission. Für CSS/JS-Dateien gibt es verschiedene Tools und Plugins, die sie automatisch komprimieren können. Durch die Implementierung dieser Maßnahmen können Sie dazu beitragen, den ökologischen Fußabdruck Ihrer Webseite zu minimieren und gleichzeitig die Leistung und Effizienz Ihrer Webseite zu verbessern.
Ein Auszug an Online-Tools, um Bilder zu komprimieren:
Es gibt auch Tools mit grafischer Oberfläche zum Download, welche neben Bilder, auch CSS/-JS-Dateien komprimieren oder zusammenführen können:
Medienformate für das Web
Die Verwendung von passenden Bildformaten ist ein weiterer wichtiger Schritt zur Erstellung klimafreundlicher Webseiten. Es gibt spezielle Bildformate wie WebP und AVIF, die eine bessere Komprimierung bieten als herkömmliche Bildformate wie JPEG oder PNG. Dadurch können die Dateigrößen der Bilder reduziert werden, was zu einer schnelleren Ladezeit der Webseite und einer Reduzierung des Energieverbrauchs führt. WebP und AVIF bieten auch eine höhere Qualität bei kleineren Dateigrößen im Vergleich zu anderen Bildformaten. Es ist jedoch wichtig zu beachten, dass nicht alle Browser diese neuen Bildformate unterstützen. Daher ist es ratsam, zusätzlich zu den neuen Formaten auch andere Bildformate bereitzustellen, um eine optimale Benutzererfahrung für alle Besucher Ihrer Webseite zu gewährleisten.
Can I Use kann hier unterstützen, welche Formate und Funktionen für Browser verfügbar sind.
- https://caniuse.com/webp
- https://caniuse.com/webm
- https://caniuse.com/avif
- https://caniuse.com/svg
- https://caniuse.com/svg-fragment
- https://caniuse.com/apng
Wenn Bilder nicht in voller Größe dargestellt werden, wenn diese z.B. nur ein Viertel der Seitenbreite einnehmen, sollten diese entsprechend verkleinert werden und nicht in voller Auflösung geladen werden.
Reduzierung von HTTP-Anfragen
Die Reduzierung von HTTP-Anfragen ist ein wichtiger Beitrag zur Erstellung einer klimafreundlichen Webseite. Durch die Verringerung der Anzahl der HTTP-Anfragen wird weniger Energie benötigt, um Ihre Webseite herunterzuladen und zu laden. Es gibt verschiedene Tools (wie oben bereits genannt, z.B. Prepros oder oder CodeKit) und etliche technische Methoden, mit denen Sie die Anzahl der HTTP-Anfragen auf Ihrer Webseite reduzieren können. Dazu gehören die Kombination von CSS- und JS-Dateien, die Verwendung von CSS-Sprites, optional die Nutzung eines Content-Delivery-Networks (CDN) und Browser-Caching. Diese Techniken helfen nicht nur, den Energieverbrauch zu reduzieren, sondern auch die Ladezeit Ihrer Webseite zu verbessern und die Benutzererfahrung zu optimieren. Durch die Umsetzung dieser Maßnahmen können Sie nicht nur zur Erstellung einer klimafreundlicheren Webseite beitragen, sondern auch die Leistung Ihrer Webseite verbessern.
Jede HTTP-Anfrage welche bearbeitet werden muss benötigt Energie und legt gleichzeitig eine gewisse Distanz zurück. Man beachte, dass Frameworks für CSS oder JS oftmal auf anderen Servern abgelegt sind, welche erst erreicht werden müssen. Manchmal kann es bei solchen Drittanbieter-Skripten dazu kommen, dass diese von einem Server in einem Rechenzentrum auf der anderen Seite der abgerufen werden müssen. Deutlich effizienter wäre es an dieser Stelle diese von einem CDN (in der Nähe der Webseitenbesucher) bereitzustellen oder diese selbst auf dem eigenen Server aus eventuellen Datenschutzgründen bereitzustellen.
Online Tools, welche hier Einblicke in die Anzahl der HTTP-Anfragen liefern kann ist zum einen die Web Analyse von kreativ-anders, welche auch Serverstandorte ermitteln kann oder PageSpeed Insight von Google.
Frameworks
Die Verwendung von Frameworks für CSS oder JS kann die Entwicklung von Webseiten beschleunigen, jedoch haben sie auch ihre Nachteile in Bezug auf die Klimafreundlichkeit. Oft sind diese Frameworks deutlich umfangreicher und größer als tatsächlich benötigt, da sie viele Funktionen und Eigenschaften enthalten, die möglicherweise gar nicht benötigt werden. Dies führt zu einer erhöhten Anzahl von HTTP-Anfragen und somit zu einem erhöhten Energieverbrauch und CO2-Ausstoß. Es ist daher empfehlenswert, auf die Verwendung von Frameworks zu verzichten und stattdessen nur die notwendigen CSS- und JS-Dateien einzubinden. Dies kann durch die Verwendung von benutzerdefinierten Stilen und Skripten erreicht werden, die speziell für die Anforderungen der Webseite geschrieben wurden. Eine bewusste und gezielte Auswahl von CSS- und JS-Dateien kann zu einer Reduzierung des Energieverbrauchs beitragen und somit zur Erstellung einer klimafreundlicheren Webseite beitragen.
Es gibt viele CSS- und JS-Frameworks auf dem Markt, die als überladen gelten und somit nicht zur Erstellung klimafreundlicher Webseiten empfohlen werden. Ein Beispiel für CSS-Frameworks, die oft kritisiert werden, sind Bootstrap und Foundation. Obwohl diese sehr beliebt sind, enthalden dies viele unnötige Funktionen und Stile, die möglicherweise gar nicht benötigt werden. Ein weiteres Beispiel ist jQuery, das oft als zu groß und umfangreich kritisiert wird. Aber auch Frameworks wie React und Angular werden häufig aufgrund ihrer Größe, Komplexität und Abhängigkeiten kritisiert. In der Regel gilt, dass je größer und umfangreicher ein Framework ist, desto wahrscheinlicher ist es, dass es eine höhere Anzahl von HTTP-Anfragen erzeugt und somit den Energieverbrauch erhöht. Es ist daher ratsam, vor der Verwendung eines Frameworks eine sorgfältige Bewertung durchzuführen und alternative Lösungen in Betracht zu ziehen, um eine möglichst schlanke und effiziente Webseite zu gewährleisten. Gegebenenfalls kann es auch sinnvoll sein, benötigte Funkionalatäten selbst zu entwickeln.
Minimale CSS-Frameworks:
Animationen und HTML-Struktur
Animationen können aufgrund ihres hohen Ressourcenbedarfs schädlich für die Klimafreundlichkeit von Webseiten sein. Jede Animation benötigt zusätzliche Energie und Ressourcen, um ausgeführt zu werden, was den Energieverbrauch der Website erhöht und damit auch den CO2-Fußabdruck. Es ist daher wichtig, bei der Verwendung von Animationen auf Webseiten vorsichtig zu sein und sicherzustellen, dass sie sparsam und effizient eingesetzt werden. Beispielsweise können kleine, subtile Animationen genauso wirkungsvoll sein wie größere, auffälligere Animationen, benötigen jedoch weniger Ressourcen. Auch die Verwendung von CSS-Animationen anstelle von JavaScript kann dazu beitragen, den Energieverbrauch zu reduzieren. Es ist wichtig, bei der Gestaltung von Webseiten das Gleichgewicht zwischen ansprechendem Design und Energieeffizienz zu finden, um eine klimafreundlichere Website zu erstellen. Ein weiterer Faktor, der sich auf die Klimafreundlichkeit von Webseiten auswirken kann, ist die Hierarchie-Tiefe von HTML-Elementen. Eine tief verschachtelte Hierarchie bedeutet, dass der Browser mehr Arbeit leisten muss, um die Seite oder entsprechende Animation zu rendern, was den Energieverbrauch deutlich erhöht. Daher ist es wichtig, die Hierarchie-Tiefe von HTML-Elementen auf ein Minimum zu beschränken und unnötig verschachtelte Strukturen zu vermeiden. Eine flachere Hierarchie kann dazu beitragen, den Energieverbrauch zu reduzieren, die Wartbeitkeit zu verbessern und somit eine klimafreundlichere Website zu schaffen.
Die Entwicklung von klimafreundlichen Webseiten ist eine wichtige Aufgabe für die Zukunft, die alle Webseitenbetreiber*innen betrifft. Die Digitalisierung hat einen starken Einfluss auf den Energieverbrauch und den Klimawandel. Webseiten, die optimiert sind, um den Energieverbrauch zu reduzieren, können einen signifikanten Beitrag zur Emissionsreduzierung leisten. Zudem kann die Entwicklung von klimafreundlichen Webseiten auch zu einem besseren Benutzererlebnis führen, indem die Ladezeiten reduziert werden und die Website insgesamt effizienter gestaltet wird. Und noch so viele weietre positive Aspekte. Letztendlich ist es wichtig, dass wir uns als Gesellschaft bewusst mit diesem Thema auseinandersetzen und uns für eine nachhaltige digitale Zukunft einsetzen.
