Dein Unternehmen ist nachhaltig – deine Webseite auch?

Gemäss BAFU betrifft dies primär die Sektoren Mobilität, Wohnen, Ernährung und den Import von Gütern. Doch hast du dir schon einmal Gedanken gemacht, welchen Einfluss dein Verhalten online auf deinen Fussabdruck hat? Oder wie viele Emissionen eine Webseite verursacht? Hi, mein Name ist Severin Glaser, ich bin Entwickler bei Crafft, habe meine Abschlussarbeit im Softwareentwickler-Studiengang über die Thematik der nachhaltigen Webentwicklung geschrieben und freue mich darüber zu berichten.

Wie klimaschädlich ist das Web?

In den letzten 20 Jahren hat das Internet regelrecht einen Boom erlebt. Vor zehn Jahren betrug die durchschnittliche Grösse einer Webseite laut HTTP Archive etwa ein Megabyte für Desktop-Geräte und knapp die Hälfte für Mobile-Geräte. Heute hat sich die Ladegrösse auf 2,5 Megabyte für Desktop-Geräte und 2,3 Megabyte für Smartphones erhöht. Bereits im Jahr 2017 hat Greenpeace davon gesprochen, dass das World Wide Web 7 % der globalen CO2-Emissionen ausmacht. Bildlich dargestellt bedeutet dies: wäre das Internet ein Land, so würde es Platz sechs der klimaschädlichsten Nationen einnehmen – und wäre direkt hinter Deutschland anzusiedeln. Die Rechnung hier ist relativ einfach: das Internet benötigt Strom. Wenn Webseiten grösser werden, werden mehr Datenzentren benötigt, welche wiederum mehr Strom benötigen. So gehen Expert:innen davon aus, dass das Web momentan 2000 TWh benötigt und bis 2030 kann der Wert über 9000 TWh betragen. Ein Grossteil der gesamten Übertragungsraten des Internets wird durch Streaming-Dienste (Netflix, Amazon, Youtube, Twitch etc.), aber auch durch Social-Media-Applikationen wie beispielsweise Instagram verursacht. Diese Webapplikationen müssen enorme Datenmengen im Millisekunden Takt verarbeiten.

Nachhaltige Webagentur

In der quantitativen Studie für meine Abschlussarbeit habe ich einen Fragebogen erstellt, der unter anderem die Frage enthielt, ob sich das jeweilige Unternehmen bereits mit nachhaltiger Webentwicklung auseinandergesetzt hat. Dieser Fragebogen wurde an schweizerische Mikro-Agenturen bis hin zu Gross-Agenturen gesendet. Dabei gaben die Teilnehmer:innen zu 60 % an, dass nachhaltige Praktiken in ihren Webprojekten angewandt würden. Dennoch gibt es hier auch gegensätzliche Meinungen, dass beispielsweise Energieeinsparungen nicht Sache des Unternehmens sei und die Erzielung von Treibhausgas-Einsparungen durch die Industrie beziehungsweise durch die Einzelpersonen wichtiger sei.

Eine nachhaltige Webagentur zeichnet sich dadurch aus, dass optimierte Projekte dem Kunden übergeben werden können. In Bezug auf nachhaltiges Webdesign muss ich der oben genannten Meinung widersprechen, denn eine optimierte Webseite verhilft nicht nur zu besseren SEO-Ergebnissen, sondern auch zu einer schnelleren Ladezeit der Webseite – was die Kundenzufriedenheit erhöht und die Absprungrate minimiert. Durch ein Redesign und eine Neuentwicklung unserer eigenen Webseite, haben wir es geschafft, den «total load» von initial 60MB auf knapp 900 kB zu reduzieren. In absoluten Zahlen entspricht dies einer Optimierung von 98 %. Anders ausgedrückt: laut websitecarbon ist unsere Website mittlerweile 66 % performanter als sämtliche existierenden Webseiten. Fun Fact: während Sie diesen Artikel lesen, wurden gerade einmal 0.33g CO2 emittiert.

Strategien für eine nachhaltige Webseite

Die Prinzipien des nachhaltigen Webdesigns bieten zahlreiche Vorteile für die Umwelt, aber auch hinsichtlich Leistung, User Experience und Reputation des eigenen Unternehmens. Sie laden schneller und sind benutzerfreundlicher. Generell werden weniger Ressourcen verbraucht, der Code wird abgespeckt und die Datenmengen aufgrund von weniger CSS und JavaScript sowie komprimierten Bildern und Videos kleiner ausfallen – da diese Elemente erst geladen werden, wenn sie benötigt werden.

Bilder und nachhaltige Webentwicklung

In meiner Studie vertraten die Umfrageteilnehmer:innen gemischte Meinungen bezüglich der Auswirkungen von Bildern im Zusammenhang mit der nachhaltigen Webentwicklung. Mehrheitlich waren sich einig, dass die Verkleinerung oder Komprimierung von Bildern Auswirkungen auf die Leistung einer Website hat. Gemäss HTTP-Archive hat eine durchschnittliche Webseite im Schnitt 30 Bilder, mit einer ungefähren Übertragungsgrösse von jeweils einem Megabyte. Wir laden beispielsweise die Bilder erst, wenn sie wirklich auf der Website gebraucht werden – sprich, erst wenn Besucher:innen an der richtigen Stelle sind, wo das Bild zu sehen ist, wird es geladen. In diesem Prozess spricht man auch von «lazy load».

Bildkomprimierung ist eine komfortable Möglichkeit, die Datenkapazität auf einer Webseite zu verringern. In sämtlichen Projekten setzen wir NextJS ein, um Bilder für Smartphones, Tablets und Desktop Computer zu optimieren. Dabei werden die Bilder automatisch komprimiert, skaliert und in das bestmögliche Format (WebP oder AVIF) für Nutzer:innen umgewandelt – ohne dass die Bildqualität darunter leidet.

• Mobile (iPhone 15 Pro Max): gerenderte Grösse 398 x 224 [px], intrinsische Grösse: 1200 x 675 [px], Dateigrösse: 101kB, Format: webP
• Tablet (iPad Air): gerenderte Grösse 736 x 414 [px], intrinsische Grösse: 1200 x 675 [px], Dateigrösse: 101kB, Format: webP
• Desktop (1440p): gerenderte Grösse 1000/x 563 [px], intrinsische Grösse: 1920 x 1080 [px], Dateigrösse: 221kB, Format: webP
• Original Bild (Fallback):gerenderte Grösse 3840 x 2160 [px], intrinsische Grösse: 3840 x 2160 [px], Dateigrösse: 3,3 MB, Format: PNG

Wenn du dich für Crafft entscheidest, kannst du deine Bilder in deinem Wagtail CMS hochladen, ohne dich um die Bildgrössen kümmern zu müssen. Wir übernehmen die automatische Anpassung der Bilder und liefern das bestmögliche Bildformat.

Videos und nachhaltige Webentwicklung

Forscher von „The Shift Project“ haben festgestellt, dass 80 % des weltweiten Datenverkehrs aus Video-Datenübertragungen besteht. Das deutsche Umweltbundesamt hat im Jahr 2020 folgende Schlussfolgerungen zum Streaming eines HD-Videos formuliert: Die geringste CO2-Belastung vom und zum Endnutzer weist eine Glasfaserverbindung auf, die im Durchschnitt nur zwei Gramm CO2-Emissionen pro Stunde Videostreaming verursacht. Erfolgt die Datenübertragung über eine 5G-Verbindung, werden etwa fünf Gramm CO2 pro Stunde emittiert. Diese Berechnungen berücksichtigen noch nicht den Stromverbrauch des Benutzers Geräts, die Videogrösse, den Rendering-Prozess oder den Standort, an dem das Video gehostet ist.

Falls Videos in Ihrem Projekt gewünscht sind, so schauen wir, dass sämtliche Videos so spät wie möglich (lazy load) geladen werden. Haben Ihre Besucher:innen eine langsame Verbindung, so wird zuerst ein kleines Vorschaubild angezeigt (Thumbnail), und das Video im Anschluss geladen. Um eine komprimierte Videodatei zu erhalten, schlagen wir Drittanbieter vor, welche das passende Videoformat, sowie die bestmögliche Qualität bereitstellen.

Code und nachhaltige Webentwicklung

Weniger Code bedeutet weniger Datentransfer und schlussendlich einen geringeren Stromverbrauch. Somit setzen wir sowohl im Backend als auch im Frontend auf wiederverwendbare Komponenten, welche mehrmals eingesetzt werden können.

Auch Animationen haben einen Einfluss auf die Performance von Webseiten. Wo immer möglich, animieren wir Ihre Wünsche mit CSS. CSS kann animierte Effekte mit grösserer Effizienz - verglichen mit JavaScript Animationen - erstellen, da der Prozessor weniger belastet wird.

Farbwahl im nachhaltigen Webdesign

Die Farbgestaltung wirkt sich in mehrfacher Hinsicht auf den Energieverbrauch einer Webseite aus. Sie beeinflusst den Stromverbrauch des Bildschirms der Anwender:innen und die Dateigrösse einer Website. Designer verwenden primär Farben nach ihren individuellen Vorlieben, nicht nach wissenschaftlichen Erkenntnissen. Aus diesem Grund besprechen wir die Farbwahl gezielt mit Ihnen, sodass Ihre nachhaltige Präferenz Priorität hat.

Laut Google ist ein Monitor einer der bedeutendsten Stromverbraucher. Dunkle Farben auf Geräten mit OLED-Displays senken den Stromverbrauch erheblich. Helle Farben wiederum verursachen bei modernen OLED-Displays mehr Strom als bei älteren Röhren-Monitoren. Auch bei AMOLED-Displays kann eine dunkle Benutzeroberfläche den Stromverbrauch erheblich senken. Gemeinsam können wir mittels SEO-Analysen ihre Kundengruppe untersuchen und so die nachhaltigste für Ihre Unternehmen Farbwahl treffen.

Schriften im nachhaltigen Webdesign

Im Internet sind Texte die gebräuchlichste Art, Inhalte auszudrücken. Unternehmen verwenden häufig benutzerdefinierte Schriftarten, um ihre Unternehmensidentität zu präsentieren. Je nachdem, ob eine API (z. B. Google Fonts) für eine benutzerdefinierte Schriftart verwendet wird, kann der Datenverkehr einer Schriftart mit verschiedenen Methoden reduziert oder sogar beinahe auf Null gesetzt werden. Nextjs optimiert wiederum automatisch die Schrift in das für die Benutzer*innen bestmögliche Format und speichert die Schrift lokal auf dem Server, ohne zusätzliche Anfragen an einen Drittanbieter zu senden. Somit sind wir frei, ob wir benutzerdefinierte Schriftarten oder Google-Fonts (oder andere Anbieter) für deine nächste Webapplikation nutzen. Schlussendlich kann sowohl deine Corporate Identity, als auch der Datenschutz deiner Kunden gewahrt werden.

Ökologisches Hosting

Ein grüner Hosting-Service ist ein wichtiger Schritt zur Minimierung des negativen Fussabdrucks in Bezug auf die Treibhausgasemissionen. Das Web besteht aus einem fast unvorstellbar komplexen Netzwerk verschiedenster Ressourcen, die allesamt Strom benötigen. Crafft setzt darum auf Datenzentren, welche sich in der Nähe der Kundschaft befinden und umweltfreundliches Web-Hosting bereitstellen, im selben Atemzug jedoch keinen Emissionsausgleich (Carbon Offsetting) betreiben. Dennoch überlassen wir dir die Wahl, wo deine nächste Webseite gehostet werden soll.

Kohlenstoff-Ausgleich (Carbon Offset)

Carbon Offsetting oder Greenwashing beschreibt den Umstand, dass ein Unternehmen mehr Zeit und Ressourcen in die Werbung seiner vermeintlichen Umweltfreundlichkeit investiert. Effizienter, kostengünstiger und schlussendlich besser für den Planeten wäre, dass tatsächlich nachhaltige Massnahmen umgesetzt werden würden.

Crafft betreibt kein Greenwashing. Als Mitglied des Frontend-Teams kann ich stolz versichern, dass wir täglich nachhaltige Strategien anwenden. Dies führt keinerlei zu Mehrkosten, da die Umsetzung fester Bestandteil unserer Arbeitsabläufe ist.

Ist Ihre Webseite nun nachhaltig?

Nachhaltige Webseiten sind mehr als nur ein Öko-Trend im Internet. Eine nachhaltige Webapplikation kann nur durch Mitwirken sämtlicher Beteiligten garantiert werden, die das Grundprinzip fachgerecht berücksichtigen und anwenden.

Nachhaltigkeit im Webdesign umfasst generell Aspekte wie: die Optimierung der Ladezeit durch schlanken Code, komprimierte Medien bis hin zur Auswahl umweltfreundlicher Hosting-Services. Als nachhaltige Webagentur aus Zürich nutzen wir Techniken wie «lazy load» für Bilder, Schriften und Videos. Animationen und Farben setzen wir bewusst ein, sodass der Energieverbrauch konsequent und dennoch kundenorientiert minimiert werden kann. Sämtliche Massnahmen tragen dazu bei, dass deine Kunden schnellere Ladezeiten erleben und gleichzeitig die Benutzerfreundlichkeit Ihrer Webseite verbessert wird.

Habe ich dein Interesse geweckt? Ganz egal was für ein Webprojekt du anstrebst, du profitierst in jedem Fall von unserer Expertise. Wir optimieren deine Applikation nach deinen Wünschen. Gerne können wir gemeinsam deine nächste Webseite planen. Komm vorbei oder nimm Kontakt mit uns auf.