216 KB. So groß ist diese Seite beim ersten Aufruf – inklusive Schrift, CSS und dem kompletten HTML. Der Durchschnitt liegt laut Web Almanac 2024 bei knapp 2,5 MB. Wer über digitale Nachhaltigkeit schreibt und berät, muss sich an den eigenen Maßstäben messen lassen. Deshalb erkläre ich hier, welche Entscheidungen hinter datensm.art stecken.
Statisch, schnell, sicher
datensm.art ist mit Hugo gebaut, einem statischen Site-Generator. Keine Datenbank, keine serverseitige Logik, kein CMS-Overhead. Hugo erzeugt beim Build fertige HTML-Dateien – der Webserver liefert sie aus, fertig. CSS, HTML und JavaScript werden dabei automatisch komprimiert. Das ist nicht nur schnell, sondern auch sicher: Keine laufenden Prozesse, keine Angriffsfläche.
Gehostet wird die Seite bei Hetzner in Nürnberg – ein Anbieter der zu 100 % mit erneuerbaren Energien betrieben wird und als Green-hosted bei der Green Web Foundation gelistet ist.
Bilder: WebP, optional, abschaltbar
Für Bilder setzt Hugo beim Build automatisch auf WebP – ein modernes Format das typischerweise 25–35 % kleiner ist als JPEG bei gleicher Qualität. Als Fallback dient PNG für Grafiken und JPG für Fotos. Die Konvertierung und Skalierung übernimmt Hugos Asset-Pipeline vollautomatisch beim Build.
Das noch effizientere AVIF (50–70 % kleiner als JPEG) nutze ich noch nicht – Hugo’s Asset-Pipeline unterstützt AVIF-Skalierung noch nicht nativ. Für Bilder die manuell konvertiert werden, ist AVIF bereits heute möglich. Sobald Hugo das vollständig unterstützt, werde ich umstellen.
Wer noch weniger Daten verbrauchen will, kann die Bilder per Schalter im Header komplett deaktivieren. Die Präferenz wird im localStorage gespeichert – kein Cookie, keine Einwilligung nötig. Wer Bilder grundsätzlich ablehnt: Mit einem einzigen Flag in der Konfiguration lassen sie sich serverseitig komplett abschalten – dann liefert Hugo gar kein Bild-HTML aus.
Schriften: Variable Font, bereinigt
Statt mehrerer separater Schriftschnitte (Regular, Bold, Italic …) verwende ich einen einzigen Variable Font – Inter Variable. Er deckt alle Gewichtungen und Stile in einer einzigen Datei ab. Die Datei ist außerdem um alle Zeichen bereinigt, die auf einer deutschsprachigen Website nicht gebraucht werden. Das spart gegenüber der Vollversion rund 60 % Dateigröße.
Wer noch radikaler sparen will: Mit einem weiteren Flag in der Konfiguration wechselt die Seite vollständig auf Systemschriften – dann wird gar keine Schriftdatei geladen.
JavaScript und CSS: ausgelagert, minimal
JavaScript habe ich auf das absolute Minimum reduziert und vollständig in externe Dateien ausgelagert – kein Inline-Code, keine Event-Handler im HTML:
- Dark/Light-Mode-Schalter
- Hamburger-Menü auf mobilen Geräten
- E-Mail-Verschleierung gegen Spam-Bots
Das war’s. Kein Framework, keine Analytics-Bibliotheken, kein jQuery.
Dark Mode ohne Flackern, ohne Cookie
Der Dark/Light-Schalter liest beim ersten Besuch die Browsereinstellung (prefers-color-scheme) – kein Cookie, keine Einwilligung nötig. Wer manuell wechselt, speichert die Präferenz im localStorage.
Ein kleines Inline-Script im <head> setzt das Theme, bevor der Browser die Seite rendert. Ohne diesen Trick würde die Seite kurz aufflackern (FOUC – Flash of Unstyled Content). Das Script ist so klein, dass sein SHA-256-Hash in der Content Security Policy hinterlegt ist.
Datenschutz und Sicherheit
Ich nutze Matomo zur Analyse – selbst gehostet, same-origin, keine Daten an Dritte, keine IP-Speicherung, kein Cookie-Banner.
Externe Ressourcen habe ich konsequent vermieden: keine Google Fonts, keine CDNs, keine Social-Media-Widgets, keinen externen Podcast-Player, keine Tracking-Pixel. Das Kontaktformular läuft über ein eigenes PHP-Script auf meinem Server.
Für die Sicherheit sorgen strenge Content Security Policy-Regeln im .htaccess – kombiniert mit einer Firewall, die unerwünschten Traffic blockiert: Crawl-Bots, Malware-Scanner und insbesondere KI-Trainings-Crawler haben hier nichts zu suchen. Das reduziert nicht nur Risiken, sondern auch überflüssigen Datenverbrauch auf dem Server.
Barrierefreiheit: Struktur vor Schönheit
Sauberes HTML, klare Überschriftenstruktur, Alt-Texte für alle Bilder, ARIA-Labels für interaktive Elemente. Die Farbkontraste erfüllen WCAG 2.2 Level AA – in beiden Farbmodi. Die Navigation funktioniert vollständig mit der Tastatur.
Suche ohne Server
Für die Volltextsuche setze ich auf Pagefind – ein Tool, das beim Build einen statischen Suchindex erzeugt. Die Suche läuft komplett im Browser, ohne Serveranfragen, ohne externe Dienste.
Was du hier schon findest
datensm.art ist noch jung – aber es gibt schon einiges zu entdecken:
Podcast – Web, But Green! – Über 20 Folgen rund um digitale Nachhaltigkeit, Bildformate, JavaScript-Bloat, grünes Hosting und mehr. Mit eigenem, datensparsamem Player direkt auf der Seite – kein externer Anbieter, kein Tracking.
News & Impulse – Praktische Tipps, Einordnungen und Kommentare zu aktuellen Themen rund um digitale Nachhaltigkeit. Erscheinen regelmäßig, kurz und auf den Punkt.
Events – Wo ich gerade spreche, moderiere oder zu Gast bin. Aktuell unter anderem auf der LAB-SUPPLY Hannover.
Mein Buch – „Nachhaltige Websites" ist bei Springer erschienen: ein praktischer Leitfaden zur Prüfung und Optimierung energieeffizienter Webseiten – mit konkreten Tool-Empfehlungen und Code-Beispielen.
Artikel & Veröffentlichungen – Fachartikel, Interviews und Gastbeiträge in anderen Medien, gesammelt an einem Ort.
Offen für Feedback
Ich werde diese Seite kontinuierlich weiterentwickeln. Wer einen Fehler findet, einen Kontrast zu niedrig oder einen Alt-Text zu dünn – ich freue mich über Hinweise per Kontaktformular.
Eine Website über digitale Nachhaltigkeit sollte nicht nur darüber reden. Sie sollte es vorleben.
Nachhaltige Grüße vom CO₂-Doc