„Grün, grün, grün sind alle meine Kleider. Grün, grün, grün ist alles was ich hab.“ sing
Also tatsächlich ist nicht ALLES was ich habe grün, aber meine Website ist es!
Möglicherweise fragst du dich jetzt: „Hä, Annabelle, wie soll denn eine Website bitte nachhaltig sein?“
In diesem Beitrag erfährst du, an welchen fünf Stellschrauben du stellen kannst, um mit deiner Website möglichst energieeffizient unterwegs zu sein. Es ist nämlich so: Websites verbrauchen Energie. Suprise! Jede einzelne Information, die wir im Internet speichern, übertragen oder abrufen muss irgendwo verarbeitet, transportiert und gespeichert werden. Das funktioniert nicht von allein auf magische Art und Weise, sondern durch eine Infrastruktur aus Servern, Netzwerken, Endgeräten, … Und alles frisst Strom.
Je größer eine Website ist (durch Medien, Skripte, Fonts, Animationen) desto mehr Daten müssen transportiert und verarbeitet werden. Das klingt total logisch und offensichtlich. Ich muss jedoch gestehen, dass ich diesen Aspekt in meiner eigenen Arbeit erst seit einiger Zeit auf dem Schirm habe.
By the way ist eine nachhaltige Website nicht nur grüner, sondern am Ende des Tages sorgt der ganze Spaß für kürzere Ladezeiten, und das freut die Nutzenden und Suchmaschinen gleichermaßen. Stichwort: Ranking.
Wenn du wissen willst, wie deine Website gerade abschneidet, kannst du das hier kostenlos testen: www.websitecarbon.com
Bei mir sieht das zum Beispiel so aus 😇
5 Schritte zur nachhaltigen Website
1. Weniger Code ist mehr
Oder wie Paracelsus aka Theophrastus Bombastus von Hohenheim schon sagte: „Die Dosis macht das Gift.“
Weniger Elemente auf einer Seite bedeuten weniger Daten, und folglich weniger Stromverbrauch.
Ein zusätzlicher Pluspunkt: weniger visuelle Reizüberflutung.
Das bedeutet nicht, dass eine nachhaltige Website fad aussehen muss. Aber braucht es wirklich diese krassen Animationen und fünf verschiedene Schriften? Ich glaube nicht.
2. Technik hinterfragen
- Muss es wirklich ein riesiges CMS sein?
- Brauche ich all diese Plugins die irgendeine Magie im Hintergrund machen?
- Will ich wirklich dieses fancy JavaScript-Framework nutzen?
Oft reicht auch ein statischer Site-Generator mit ganz einfachem Vanilla JavaScript (oder ganz crazy OHNE JavaScript!)
Overengineering ist nicht die Lösung, sondern Teil des Problems.
Arbeite lieber nach dem KISS-Prinzip, heißt „Keep it short and stupid“.
3. Bilder gehören sich komprimiert
und über Lazy Loading geladen. Dabei gilt: Je kleiner ein Bild, desto besser.
Step 1: Choose your player
- JPEG für Fotos
- PNG für Grafiken mit Transparenz
- SVG für Logos und Icons
Step 2: Auflösung anpassen
- Bitte keine 4000 × 3000 px Fotos 🥲
- Reale Anzeigegröße x 2 z. B. für ein 600 px breites Bild max. 1200 px
Online Tools zum komprimieren:
- tinypng.com
- squoosh.app
Ein heißer Tipp 🔥 Wer gern mit dem Terminal arbeitet, kommt mit ImageMagick super schnell ans Ziel. www.imagemagick.org
Empfohlene Dateigrößen im Überblick
| Bildtyp | Empfohlene Maximalgröße |
|---|---|
| Icons und kleine Grafiken | 5–50 KB |
| Thumbnails / Vorschaubilder | 50–100 KB |
| Bilder im Blogtext | 100–250 KB |
| Große Banner- oder Hero-Bilder | 300–500 KB (max. 1 MB) |
| Hintergrundbilder | max. 800 KB |
4. Auf Bla bla verzichten
Endlose Scrollseiten mit Marketing-Geschwurbel? Bitte nicht. Strukturiere deine Inhalte klar, verzichte auf leere Worthülsen und komm zur Sache. Das spart Lade- und Lebenszeit.
5. Green Hosting-Anbieter
Wenn du es ganz konsequent angehen willst, kannst du deine Website bei einem nachhaltigen Hosting-Anbieter betreiben. Ich selbst mache das nicht, weil ich kostenlos auf GitHub hoste. Aber pssssssst.
Fazit
Für mich ist nachhaltiges Webdesign kein eigener Arbeitsschritt losgelöst von allem anderen, sondern integraler Bestandteil des gesamten Prozesses. Genau wie digitale Barrierefreiheit denke ich Nachhaltigkeit von Anfang an mit: vom ersten Scribble bis zum finalen Deployment.
Bin ich dabei immer perfekt? Sicherlich nicht. Aber ich versuche, die richtigen Fragen zu stellen. Wenn du weitere Tipps für mich hast, freue ich mich auf eine Nachricht von dir!