Anleitungen

6 Wege zu nachhaltigeren Websites

__wf_reserviert_dekorativ
Preferred source on google logo
6 Wege zu nachhaltigeren Websites
December 6, 2023

  · 4 min

Digitale Technologie verursacht schätzungsweise 2 bis 4 % der weltweiten CO₂-Emissionen. Mit diesen sechs Wegen bauen wir nachhaltige Websites mit einem deutlich kleineren CO₂-Fußabdruck.

Alle „unsichtbaren“ Daten werden in riesigen Rechenzentren auf der ganzen Welt gesammelt, verarbeitet, gespeichert und ausgetauscht. Die Server dort laufen heiß und werden ihrerseits von gewaltigen Kühlsystemen gekühlt, die Strom verbrauchen. Viele davon laufen noch immer überwiegend mit fossilen Brennstoffen.

Diagramm dessen, was ein Seitenaufruf auslöst: Ein Besucher lädt eine Seite, ein Server im Rechenzentrum erledigt die Arbeit und wird heiß, Kühlsysteme halten ihn kühl, und der verbrauchte Strom stammt oft noch aus fossilen Brennstoffen

Als Webentwickler versuchen wir, den Energieverbrauch und die Umweltauswirkungen von Websites zu senken, indem wir energieeffiziente Websites bauen. Milk Moon Studio ist ein kleines Webflow-Studio, und als Webflow-Designer ist unser Einfluss begrenzt. Mit einigen der unten beschriebenen Methoden haben wir aber den CO₂-Fußabdruck unserer Seiten und der Seiten einiger unserer Kunden senken können.

Um nachhaltige, energieeffiziente Websites zu erstellen, halten wir uns an diese Best Practices für nachhaltiges Webdesign:

  1. Bilder optimieren, um die Dateigröße zu reduzieren. (Tipp: Wenn Sie Bilder hochladen müssen, nutzen Sie vorher ein Tool wie TinyPNG und laden Sie sie erst danach auf Ihre Website hoch.)
  2. Videos gezielt einsetzen. (Tipps: Ein einfaches Video ohne Hintergrund hat eine geringere Auflösung, betten Sie Videos direkt in Ihre Website ein und stellen Sie sie nicht auf Autoplay. Wir haben außerdem darüber geschrieben, wie man Vimeo-Hintergrundvideos in Webflow optimiert, sodass das Video erst geladen wird, wenn es in den sichtbaren Bereich scrollt.)
  3. Bilder und Medien per Lazy Loading laden. (Lazy Loading bedeutet, dass Bilder und andere Medien erst dann geladen werden, wenn sie gebraucht werden. Nebenbei: Das spart Energie und lässt Websites schneller laden, was zusätzlich gut für Ihre SEO ist. Mehr dazu in unserem Beitrag darüber, wie die Seitengeschwindigkeit den Geschäftserfolg antreibt.)
  4. Web-Caching. (Beim Caching werden gemeinsam genutzte Seitenelemente wie JavaScript, CSS und Bilder heruntergeladen und näher beim Nutzer oder im Browser des Nutzers gespeichert. Wenn der Nutzer die Seite erneut besucht, kann er diese Daten aus dem Cache abrufen, statt den Webserver noch einmal anzufragen.) Wenn Sie das in Aktion sehen möchten, laden Sie die Chrome-Erweiterung DrFlare herunter und sehen Sie sich die Website www.milkmoonstudio.com an. Wir setzen auf eine Kombination aus Edge-Caching, Browser-Caching, Next-Gen-Formaten und Bildoptimierung. Das vollständige Setup finden Sie in unserem Leitfaden zur Optimierung von Webflow mit Cloudflare (auch unser ursprünglicher Beitrag zum Caching von Webflow mit Cloudflare ist weiterhin online).
  5. Verzichten Sie auf alles, was Sie nicht brauchen. (Je schlanker Ihre Website, desto weniger Energie verbraucht sie.)
  6. Wählen Sie einen grünen Webhoster. (Ein Unternehmen, das erneuerbare Energien nutzt, hilft sehr dabei, die Umweltbelastung Ihrer Website zu minimieren.) Leider bietet Webflow bislang keine Möglichkeit für exklusiv grünes Hosting, aber Amazon gibt an, 2023 den gesamten von ihm verbrauchten Strom mit erneuerbaren Energien abgedeckt zu haben. Milk Moon dagegen läuft fast ausschließlich mit grüner Energie. Unsere Website wird im Cloudflare-Netzwerk gecacht, das laut Cloudflare mit erneuerbarer Energie betrieben wird, und unsere Assets werden von Cloudflare Workers gecacht und optimiert. Mehr zu Cloudflare und erneuerbarer Energie. Hier sehen Sie unseren Traffic über 24 Stunden: 99,97 % über Cloudflare aus dem Cache ausgeliefert!
Grafik der von Cloudflare gecachten Daten.
Grafik der von Cloudflare gecachten Daten.
Checkliste der sechs Wege zu einer nachhaltigeren Website: Bilder optimieren, Videos gezielt einsetzen, Bilder und Medien verzögert laden, Caching nutzen, Unnötiges löschen und einen grünen Webhoster wählen

Webtechnologie kann der Gesellschaft und der Umwelt enorm nutzen, aber nur, wenn wir sie klug einsetzen. Optimieren sorgt nicht nur für ein besseres Nutzererlebnis, Sie tun damit auch etwas für den Planeten.

Nachhaltiges Webdesign: Antworten auf die wichtigsten Fragen

Was ist nachhaltiges Webdesign?

Nachhaltiges Webdesign bedeutet, eine Website so zu bauen, dass sie möglichst wenig Energie verbraucht und damit einen kleineren CO₂-Fußabdruck hat. In der Praxis sind das die sechs Schritte oben: kleinere Bilder, sinnvoll eingesetztes Video, Lazy Loading, Caching, Verzicht auf alles Überflüssige und ein grüner Webhoster.

Hat eine Website wirklich einen CO₂-Fußabdruck?

Ja. Jeder Seitenaufruf lässt einen Server in einem Rechenzentrum arbeiten, und diese Server laufen heiß und müssen gekühlt werden, was Strom kostet. Viele davon laufen noch immer überwiegend mit fossilen Brennstoffen. Eine leichtere, gecachte Website bedeutet deshalb weniger Arbeit für diese Server und weniger Energieverbrauch.

Macht Caching eine Website nachhaltiger?

Ja, denn eine gecachte Seite oder Datei wird von einem Ort näher am Besucher oder aus dessen eigenem Browser ausgeliefert, statt jedes Mal erneut vom Webserver geholt zu werden. Unsere eigene Website wird über 24 Stunden zu 99,97 % aus dem Cloudflare-Cache ausgeliefert.

Wie wähle ich einen grünen Webhoster?

Suchen Sie nach einem Unternehmen, das erneuerbare Energien nutzt, und fragen Sie nach, welche Teile seines Netzwerks damit betrieben werden. Wir nutzen das Cloudflare-Netzwerk für das Caching, und laut Cloudflare wird dieses Netzwerk mit erneuerbarer Energie betrieben.

Preferred source on google logo

Teilen

Alle Beiträge

Hintergrund mit Farbverlauf