Nachhaltigkeit

Wie datensm.art konsequent auf digitale Suffizienz setzt – technische Maßnahmen für eine ressourcenschonende Website.

datensm.art ist nicht nur ein Thema – es ist auch ein Prinzip. Diese Website setzt die Inhalte über digitale Nachhaltigkeit selbst um. Hier dokumentiere ich die konkreten technischen Maßnahmen.

Warum digitale Nachhaltigkeit bei Websites zählt

Jede Seite, die geladen wird, erzeugt Datenverkehr, der übertragen, gespeichert und verarbeitet werden muss. Das verbraucht Energie – auf dem Server, in den Netzen und auf dem Endgerät. Weniger Daten bedeuten weniger Rechenarbeit, kürzere Ladezeiten und auf Dauer weniger Infrastruktur, die vorgehalten werden muss.

Technische Umsetzung

Statischer HTML-Generator

datensm.art wird mit Hugo als statische Website generiert. Es gibt keinen Datenbankserver, keine serverseitige Skriptsprache und keine dynamische Seitenerzeugung. Jede Seite ist eine fertige HTML-Datei – schnell ausgeliefert, wenig Serverarbeit.

Minimales JavaScript

JavaScript wird nur geladen, wo es zwingend nötig ist:

  • Theme-Toggle – Dark/Light-Wechsel ohne Seitenneuladen
  • Datensparmodus – Bilder werden erst auf Wunsch geladen
  • Kontaktformular – Fehleranzeige ohne Seitenneuaufbau
  • E-Mail-Schutz – Base64-Dekodierung gegen Bot-Harvesting
  • Suche – Pagefind lädt den Suchindex nur auf der Suchseite, selbst gehostet und ohne externen Suchdienst

Es gibt kein jQuery, kein Bootstrap, keine UI-Framework-Abhängigkeit. Der gesamte JavaScript-Code wiegt unter 5 KB (minifiziert).

Eine lokale Schrift statt Font-CDN

Die Website nutzt Inter als einzige Schriftfamilie – eine Variable Font, die alle Schriftschnitte in einer einzigen Datei vereint. Durch das Entfernen aller überflüssigen Zeichen wiegt sie rund 25 KB statt 344 KB. Die Schrift wird lokal gehostet, es gibt daher keine externen Font-CDN-Anfragen und keine Anfragen an Google Fonts oder ähnliche Dienste.

Optimierte Bilder

Alle Bilder werden in modernen Formaten ausgeliefert:

  • WebP als Standard – 25–35 % kleiner als JPEG bei gleicher Qualität
  • AVIF für manuell optimierte Bilder – bis zu 50 % kleiner als JPEG
  • Responsive Bilder mit srcset – Browser laden nur die Größe, die sie brauchen
  • Lazy Loading – Bilder außerhalb des Sichtbereichs werden erst bei Bedarf geladen

Datensparmodus

Ein optionaler Datensparmodus blendet alle Bilder aus. Aktiviert man ihn, werden keine Bilddaten übertragen, bis man sie explizit einblendet. Der Modus wird in localStorage gespeichert – ohne Cookie, ohne Server-Anfrage.

Podcast: eigenes Hosting, kleine Dateien

Der Podcast „Web, But Green!" läuft nicht mehr über einen Podcast-Hoster, sondern komplett über den eigenen Server: Audiodateien, RSS-Feed und Abrufstatistik liegen bei mir. Damit fließen keine Hördaten an Dritte, und ich weiß genau, was ausgeliefert wird.

  • Optimierte MP3-Dateien – alle 82 Folgen wurden mit ffmpeg auf 64 kbit/s neu kodiert. Das Archiv schrumpfte dadurch von 1,39 GB auf 0,82 GB, ein Minus von 41 %.
  • Opus als Standard – zusätzlich liegt jede Folge im offenen, lizenzfreien Format Opus mit 32 kbit/s bereit. Alle Folgen zusammen brauchen so nur noch 0,42 GB, rund 70 % weniger als vorher. Eine durchschnittliche Folge von 21 Minuten wiegt statt etwa 17 MB nur noch 5,1 MB. Im Player auf der Website ist Opus deshalb voreingestellt.
  • MP3 als Alternative – wer lieber MP3 hört, wechselt mit einem Klick, und der Browser merkt sich die Wahl. Kann ein Browser kein Opus abspielen, bekommt er automatisch die MP3.
  • Laden erst beim Klick – der Player nutzt das native HTML-Audio-Element ohne Fremd-Widget und ist auf preload="none" gesetzt. Audiodaten werden erst übertragen, wenn jemand auf Abspielen drückt.

Podcast-Apps holen weiterhin die MP3 aus dem Feed, weil nicht jede App Opus abspielt. Die zusätzliche Ersparnis durch Opus wirkt also im Player auf der Website.

Videos ohne YouTube

Videos auf datensm.art binde ich nicht über YouTube ein, sondern liefere sie vom eigenen Server aus. Ein YouTube-Embed lädt schon beim Seitenaufruf Skripte und baut Verbindungen zu Google auf, auch wenn niemand das Video ansieht. Mein Player lädt vor dem Klick genau ein Vorschaubild im WebP-Format, bei meiner Keynote 33 KB. Sonst nichts.

  • SD als Standard – die meisten Menschen schauen ein Video in der Qualität, in der es startet. Mein Player startet deshalb in SD. HD und Full HD lassen sich per Klick wählen.
  • AV1 mit H.264 als Reserve – AV1 ist ein moderner, lizenzfreier Video-Codec mit deutlich kleineren Dateien. Nur Geräte, die AV1 nicht abspielen können, bekommen die größere H.264-Datei.
  • Laden erst beim Klick – auch hier gilt preload="none". Die Keynote (8:16 Minuten) überträgt in SD mit AV1 rund 11,5 MB. In Full HD mit H.264 wären es 101 MB.
  • Keine Cookies, keine Werbung – der Player setzt keine Cookies und gibt keine Daten an Dritte. Es läuft keine Werbung, und am Ende schlägt kein Algorithmus das nächste Video vor.
  • Untertitel – Videos haben Untertitel als einfache Textdatei. Das hilft hörgeschädigten Menschen und allen, die den Ton gerade nicht einschalten können.

Mehr dazu im Artikel Videos selbst hosten: SD als Standard, Laden erst per Klick.

Dark Mode

Der Dark Mode ist nicht nur ein ästhetisches Angebot. OLED- und AMOLED-Bildschirme verbrauchen bei dunklen Pixeln weniger Energie als bei hellen. Wie groß die Ersparnis ist, hängt stark von der Bildschirmhelligkeit ab: Bei hoher Helligkeit ist sie deutlich, bei üblicher Innenraum-Helligkeit eher gering. Auf LCD-Bildschirmen spielt die Farbe kaum eine Rolle.

Kein unnötiges Tracking

Die Website nutzt Matomo für Webanalyse – selbst gehostet, cookielos, ohne Datenweitergabe an Dritte, DSGVO-konform. Es gibt keine Social-Media-Einbindungen, keine externen Tracking-Pixel und keine Werbeanzeigen. Alle Ressourcen werden lokal oder über den eigenen Server geladen.

Da keine Cookie-pflichtigen Dienste eingesetzt werden, gibt es keinen Cookie-Banner. Der Banner selbst kostet Daten, Ladezeit und Aufmerksamkeit.

Selbst gehostet statt SaaS

Auch die Dienste rund um die Website laufen auf eigener Infrastruktur statt bei großen Plattformen:

  • Newsletter – der Newsletter wird mit phpList selbst versendet, ohne Klick-Tracking.
  • Terminbuchung – die Terminseite läuft mit cal.rs, einem kleinen, selbst gehosteten Programm, statt über einen externen Buchungsdienst.
  • Suche – der Suchindex wird beim Bauen der Website erzeugt und liegt auf dem eigenen Server.

Weniger Last durch Crawler

Ein großer Teil des Datenverkehrs auf Websites stammt heute nicht von Menschen, sondern von Bots. datensm.art meldet neue, geänderte und gelöschte Seiten per IndexNow direkt an Suchmaschinen. So müssen diese die Website nicht ständig auf Verdacht durchsuchen, um Änderungen zu finden.

Komprimierung & Caching

Alle textbasierten Dateien werden mit Brotli komprimiert ausgeliefert: HTML, CSS, JavaScript, der Podcast-Feed und auch SVG-Grafiken. Brotli packt Text deutlich dichter als das ältere Gzip. Statische Assets (CSS, JS, Fonts, Bilder) werden mit langen Cache-Laufzeiten versehen – Browser laden sie nur beim ersten Besuch, danach aus dem lokalen Cache.

Messung

Den CO₂-Fußabdruck dieser Website messe ich regelmäßig mit öffentlichen und eigenen Tools. Das Ziel: deutlich unter dem Durchschnitt vergleichbarer Websites bleiben. Ich bilanziere jedes Jahr die entstandenen Emissionen nach dem Sustainable Web Design Model. Aktuell liegt das durchschnittliche Datenvolumen pro Seitenaufruf deutlich unter 200 KB.

Angaben zum Hosting dieser Website und ein Verweis auf diese Seite stehen maschinenlesbar in der carbon.txt. Das ist ein offener Standard der Green Web Foundation, mit dem Websites ihre Nachhaltigkeitsangaben an einer festen, auffindbaren Stelle veröffentlichen.

Prinzip der digitalen Suffizienz

Alle Designentscheidungen folgen dem Prinzip: So wenig wie nötig, so viel wie sinnvoll. Keine dekorativen Animationen, keine Stockbilder, keine aufwändigen UI-Effekte, die Bandbreite kosten, ohne Mehrwert zu schaffen.

Das ist nicht Verzicht – das ist Präzision. Und datensmart.

Zuletzt aktualisiert: Oktober 2026