Beitrag 1: Nachhaltiges Webdesign – warum eine schnelle Website auch eine umweltfreundliche Website ist

Eine Website muss heute nicht nur schön aussehen. Sie muss schnell funktionieren, verständlich aufgebaut sein, auf mobilen Geräten zuverlässig arbeiten und möglichst wenig unnötige Ressourcen verbrauchen. Genau an diesem Punkt treffen sich zwei Themen, die lange Zeit getrennt betrachtet wurden: Webperformance und nachhaltiges Webdesign.

Nachhaltigkeit im Webdesign bedeutet nämlich wesentlich mehr, als lediglich einen grünen Hintergrund zu verwenden, auf der Startseite das Wort „Nachhaltigkeit“ zu platzieren oder einen Hinweis auf Ökostrom im Hosting einzubauen. Eine wirklich nachhaltige Website beginnt bei der technischen Architektur.

Jedes Bild, jede JavaScript-Datei, jedes Webfont-File, jedes Tracking-Skript und jede externe Bibliothek muss übertragen, verarbeitet und dargestellt werden. Auf einem leistungsfähigen Desktop mit einer schnellen Glasfaserverbindung fällt das kaum auf. Auf einem Smartphone mit einer langsameren mobilen Verbindung sieht die Situation jedoch völlig anders aus.

Deshalb ist eine der wichtigsten Regeln nachhaltigen Webdesigns erstaunlich einfach: Übertrage nur das, was tatsächlich benötigt wird.

Eine moderne Website muss nicht für jede Kleinigkeit mehrere hundert Kilobyte JavaScript laden. Sie braucht nicht fünf verschiedene Tracking-Systeme. Sie muss nicht zwölf Schriftvarianten aus externen Quellen beziehen. Und auch ein Slider mit drei Bildern benötigt nicht zwangsläufig eine umfangreiche JavaScript-Bibliothek.

Hier beginnt gutes Webdesign.

Ein schlanker HTML5-Aufbau kann bereits sehr viel bewirken. Semantische HTML-Elemente wie <header>, <nav>, <main>, <section>, <article> und <footer> machen den Aufbau einer Website nicht nur für Suchmaschinen und Screenreader verständlicher. Sie helfen auch dabei, eine klare technische Struktur zu schaffen.

Dazu kommt CSS, das gezielt eingesetzt wird. Statt für jedes einzelne Gestaltungselement zusätzliche Bibliotheken einzubinden, kann vieles mit modernem CSS gelöst werden. CSS Grid und Flexbox ermöglichen beispielsweise komplexe Layouts, ohne dass dafür ein zusätzliches Frontend-Framework notwendig wäre.

Auch Bilder sind ein entscheidender Faktor.

Ein einziges großes Hero-Bild kann größer sein als der komplette HTML-Code einer Seite. Wird ein Foto mit 5000 Pixel Breite hochgeladen, obwohl es im sichtbaren Bereich nur 1200 Pixel breit dargestellt wird, werden unnötige Daten übertragen.

Moderne Formate wie WebP oder AVIF können hier helfen. Noch wichtiger ist jedoch, dass Bilder in einer sinnvollen Größe bereitgestellt werden. Responsive Images mit srcset und sizes ermöglichen es, abhängig vom Gerät unterschiedliche Bildgrößen auszuliefern.

Nachhaltigkeit bedeutet also nicht automatisch Verzicht auf hochwertige Gestaltung.

Im Gegenteil.

Ein gutes Design kann gleichzeitig ästhetisch, modern, emotional und technisch schlank sein.

Besonders interessant wird das Thema bei Content-Management-Systemen wie WordPress, TYPO3 oder Drupal. Diese Systeme bieten enorme Möglichkeiten, können aber durch Plugins, Erweiterungen und Module schnell komplex werden.

Bei WordPress beispielsweise wird häufig für jede gewünschte Funktion ein Plugin installiert. Kontaktformular? Plugin. Cookie-Banner? Plugin. Social Sharing? Plugin. Optimierung? Plugin. Slider? Plugin. Statistiken? Plugin.

Das Problem ist nicht, dass Plugins grundsätzlich schlecht wären.

Das Problem entsteht dann, wenn niemand mehr genau weiß, welches Plugin welche Daten lädt und welchen Code auf welcher Seite ausführt.

Ein eigenes kleines Plugin kann unter Umständen wesentlich effizienter sein als eine umfangreiche All-in-One-Lösung.

Wenn beispielsweise lediglich ein spezieller Shortcode benötigt wird, muss dafür nicht unbedingt ein Plugin mit 50 zusätzlichen Funktionen installiert werden. Eine individuell entwickelte Erweiterung kann genau die benötigte Funktion bereitstellen – und sonst nichts.

Das hat mehrere Vorteile.

Der Code bleibt überschaubar. Abhängigkeiten werden reduziert. Updates können gezielter durchgeführt werden. Drittanbieter-Skripte werden vermieden. Und vor allem kann der Betreiber nachvollziehen, was tatsächlich passiert.

Genau hier entsteht eine wichtige Verbindung zwischen Nachhaltigkeit, Datenschutz und Performance.

Wenn ein Dienst eines Drittanbieters nicht benötigt wird, muss auch kein Code dieses Dienstes geladen werden.

Weniger Requests bedeuten häufig eine schnellere Website.

Weniger JavaScript bedeutet häufig weniger Arbeit für den Browser.

Weniger Daten bedeuten weniger Übertragungsvolumen.

Und eine schnellere Website sorgt gleichzeitig für eine bessere Nutzererfahrung.

Nachhaltiges Webdesign ist daher keine Einschränkung des Designs. Es ist vielmehr eine Aufforderung, bewusster zu gestalten.

Die wichtigste Frage lautet nicht:

„Was können wir alles auf diese Website packen?“

Sondern:

„Was benötigt der Besucher tatsächlich, damit er sein Ziel schnell und angenehm erreicht?“

Das ist eine der zentralen Fragen professionellen Webdesigns.

Hashtags