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 Leitungen und auf dem Endgerät. Je kleiner das Datenvolumen, desto geringer der Energiebedarf. Datensparen ist Klimaschutz.
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
Es gibt kein jQuery, kein Bootstrap, keine UI-Framework-Abhängigkeit. Der gesamte JavaScript-Code wiegt unter 5 KB (minifiziert).
Systemschriften & lokale Fonts
Die Website nutzt Inter als einzige Schriftfamilie – eine Variable Font, die alle Schriftschnitte in einer einzigen Datei vereint (ca. 58 KB statt 344 KB durch Bereinigung aller überflüssigen Zeichen). Die Schrift wird lokal gehostet – keine externen Font-CDN-Anfragen, keine Tracking-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.
Dark Mode als Standard
Der Dark Mode ist nicht nur ein ästhetisches Angebot. OLED- und AMOLED-Bildschirme verbrauchen bei dunklen Pixeln deutlich weniger Energie als bei hellen. Dark Mode als Standard reduziert den Energieverbrauch auf modernen Endgeräten spürbar.
Kein unnötiges Tracking
Die Website nutzt Matomo für Webanalyse – selbst gehostet, 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.
Kein Cookie-Banner
Da keine Cookie-pflichtigen Dienste eingesetzt werden, gibt es keinen Cookie-Banner. Der Banner selbst kostet Daten, Ladezeit und Aufmerksamkeit.
Komprimierung & Caching
Alle Seiten werden mit Gzip-Komprimierung ausgeliefert. 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
Der CO₂-Fußabdruck dieser Website messen wird regelmäßig mit öffentlichen und eigenen Tools. Das Ziel: deutlich unter dem Durchschnitt vergleichbarer Websites bleiben. Wir bilanzieren jedes Jahr die entstandenen Emissionen nach dem Sustainable Web Design Model.
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: April 2026