8 Tipps für eine nachhaltige Website

Kunde:
Auftrag:
Abstrakte Grafik zum Thema 'nachhaltige Website' zeigt eine Frau mit einem Browserfenster in der Hand, die auf einen Launch Button drückt, links neben ihr startet eine Rakete, an deren unteren Ende Windräder angebracht sind, im Hintergrund ist eine invertierte Fotografie von Blättern zu sehen

8 Tipps für eine nachhaltige Website

Wäre das Internet ein Land, so läge es im internationales CO2-Ausstoß auf Platz 6 – knapp hinter Japan, deutlich vor Deutschland und dem Iran. Der Stromverbrauch von Deutschen Rechenzentren und Netzen ist mit 13 Terawattstunden mehr als fünf mal so hoch, wie der Stromverbrauch aller Münchner Privathaushalte zusammengenommen.
Wie also lässt sich der ökologische Fußabdruck einer Website minimieren? Hier sind 8 Tipps, die dir helfen, eine nachhaltige(re) Website aufzubauen.

1. Das A und O für die nachhaltige Website: Hosting mit Ökostrom

Eigentlich könnte die Liste an dieser Stelle aufhören. Kein anderes Attribut ist so relevant, für den CO2-Fußabdruck einer Website. Entscheide dich daher für einen Anbieter, der auf erneuerbare Energien setzt oder klimaneutrales Hosting anbietet.

2. Ladezeit gering halten, Performance erhöhen

Generell ein guter Rat: Ladezeiten müssen niedrig sein. Du kannst die Ladezeit deiner Website mit der kostenlosen Chrome-Erweiterung Google Lighthouse testen, das Plugin gibt auch direkt Hinweise zur Optimierung.
Wichtig ist vor Allem das korrekte Komprimieren von Bildern und Videos und das Vermeiden von unnötigen Plugins oder Scripts. HTML-, CSS- und JavaScript-Dateien sollten minifiziert werden, um überflüssige Zeichen zu entfernen und die Dateigröße zu reduzieren.
So schaffst du direkt auch Vorteile für die User Experience und die SEO deiner Website!

3. Videocontent in Grenzen halten

Es müssen nicht immer Videos sein! Ein Film hat ein Vielfaches der Dateigröße von zum Beispiel einer SVG-Animation. Eine PNG Datei ist meist deutlich größer, als ein sorgfältig komprimiertes WEBP. Natürlich gibt es Dinge, die nur über ein Video Sinnvoll kommuniziert werden können – zum Beispiel ein Showcase für Videoproduktion. Stelle dir immer die Frage: Brauche ich dieses Video zwangsläufig? Ein aufgeräumtes, schlichtes Design kann Inhalte oft besser vermitteln, als eine Website voller Videos und PNGs.

5. Nutze sauberen Code

Der Einsatz von schlankem, effizientem Code ist ein weiterer Schlüssel zu einer nachhaltigen Website. Viele Websites werden durch Pagebuilder, vorgefertigte Themes oder eine Vielzahl arbeitsintensiver Libraries und Frameworks aufgebläht. Diese Probleme lassen sich durch individuelle Webentwicklung ausmerzen.

6. SEO verbessern

Die Verbesserung der Anzeige von Websites in Suchergebnissen sollte eigentlich selbstverständlich sein. Aber auch aus einem Aspekt der Nachhaltigkeit ist sie sinnvoll: Wenn der richtige Content schneller gefunden wird, brauchen Nutzer:innen weniger Suchanfragen und weniger Seitenwechsel, es fällt deutlich weniger Rechenleistung an.

Eine nachhaltige(re) Website ist nicht so schwer.

In erster Linie muss dein Hostinganbieter zu 100% auf Ökostrom setzen. Wenn du zusätzlich für Performance und Suchmaschinen optimierst, den Video-Content gering hältst und schlanken code verwendest, ist deine Website deutlich nahhaltiger, als der Großteil des Internets.
Mit dem Website Carbon Calculator kannst du den voraussichtlichen, jährlichen CO2 Ausstoß deiner Seite berechnen, und schrittweise weiter optimieren.

Nachhaltigkeit im digitalen Raum ist ein Thema, vor dem bisher gerne die Augen verschlossen werden. Zu unrecht, denn das Internet ist im CO2 Ausstoß ein Big Player. Eine nachhaltigere Website ist ein Gewinn für alle – für dich, deine Nutzer und unseren Planeten.

Mehr:

Design für Albumcover und CD der Band Lanie's Willow, auf dem Cover ist eine weiße Blume in einem Kreis mit blauem Aquarell-Hintergrund zu sehen, darunter Name der Band und Titel des Albums, die CD selbst trägt ein Mandala aus floralen Ornamenten in grün auf blau
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Albumcover Artworks

Cover Artworks Album Inlays Print Design
Vier Screens aus der App Entwicklung für OneZero, gezeigt in Mobiltelefonen auf grünem Grund, ganz links der Bereich mit Daten und Statistiken, rechts davon der Chat, dann der Login Bereich und ganz rechts die Einstellungsseite
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

OneZero

App Entwicklung UI / UX Design Visual Identity
Demonstration eines responsiven Webdesigns für die Mobilfunk Brand EDEKASmart in einem Mobiltelefon, einem Tablet und einem Laptop
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

EDEKA smart

Branding Packaging UI / UX Design Corporate Design Printlayout
Festivaltickets und Umschläge mit Informationen, die Vorderseite der Tickets ist mit einer kurvigen, weißen Grafik über dem Gesicht eines Vogels bedruckt, die Rückseite enthält Wortmarke, QR Code und Informationen, der Innenteil des Umschlages enthält das Datum und Informationen zur Veranstaltung, der Außenteil ist mit einem Muster und der Wortmarke versehen, das Farbschema besteht aus rosa, blau und türkis
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

entropie festival

Visual Identity Printdesign Social Media UI / UX Design Kampagnen
In einem Laptop, einem Mobiltelefon und einem Tablet ist die Website von Backslash Seven zu sehen, Laptop und Tablet zeigen einen Showcase aus dem Bereich Veranstaltungen, auf dem Telefon sind die aktuellen Stellenanzeigen zu sehen
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Backslash Seven

Corporate Design UI / UX Design Fotoshooting Geschäftsausstattung
Drei Broschüren auf einer grünen Tischplatte, auf dem Cover sind eine Frau, ein Kind und die Aufschrift 'Statusbericht 2016 zur Energiewende'
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Statusbericht Energiewende

Editorial Design Infografik Printlayout
Digitales Healthcare Marketing für Takeda, hier gezeigt anhand des Headers auf der Unterseite für Ärzte und HCPs, darin enthalten sind ein Foto, eine Headline und Sprungmarker zu 'FAQs', 'Tipps' und 'Services', den drei Bereichen der Unterseite
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

GSAV Hämophilie

User Experience Design Webdesign Healthcare Marketing
Brettspiel Design für Fast Floorward, mehrere sechseckige Spielbrett-Elemente sind zu einem Spielbrett zusammengesetzt, sie sind mit Festival typischen Ortsangaben wie 'Bar' oder 'Camp' versehen und enthalten abstrakte CGI, Icons und einen weißen Rahmen, oben links ist ein Stück rote Hintergrundfläche mit weißer Körnung zu sehen
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Fast Floorward

Gamedesign CGI Printdesign UI / UX Design Video Editing Layout
Das Webdesign des Footers für die Unterseite 'Kreation' zeigt links eine Headline, Subheadline und CTA, sowie rechts ein Foto von einer Druckmaschine bei der Arbeit, ganz unten ist ein Copyright-Vermerk, sowie Verlinkungen zu Datenschutzerklärung und Impressum angehängt
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Schlegel + Schmidt

UI / UX Design Corporate Design Medical Marketing
Zwei Speisekarte des Café Momo, eine offen und eine zugeklappt, sie haben eine Holz-Rückseite und eine deutlich schmalere Holz Vorderseite, auf die das Signet graviert ist, darin liegen die drei Karten für Specials, Getränke und Speisen in verschiedenen Formaten, die Getränkekarte hat einen weißen Hintergrund, die anderen beiden einen schwarzen Hintergrund, das Design der aufgeklappten Getränkeseite ist sehr minimalistisch
Kreis um einen Play-Button, symbolisch für 'weiterlesen'. Ein Play-Button, symbolisch für 'weiterlesen'.

Momo

Corporate Design Co-Branding Geschäftsausstattung Print Design
Alle Artikel