Diese Tipps und Tools sparen beim Webdesign Daten und Energie
Was Designer und Entwickler tun können, um das Web nachhaltiger und grüner zu machen. Unsere Checkliste:
1. Stromquellen und CO2-Ausstoß messen
Auf der The-Green-Web-Foundation-Site kann man checken, ob eine Website mit erneuerbaren Energien betrieben wird und sich über grüne Hoster informieren. Ecograder macht Angaben über die Nachhaltigkeit einer Website und gibt Tipps, an welchen Schrauben man drehen kann, um die Bilanz zu verbessern. WebsiteCarbon berechnet, wie viel CO2 eine Website pro Aufruf und geschätzt im Jahr verursacht. Das Firefox-Plugin Carbonalyser von dem Think Tank The Shift Project zeigt Nutzern den Energieverbrauch und CO2-Ausstoß ihres Browserverhaltens an.
2. Performance kalkulieren, tracken und optimieren
Mit dem Performance Budget Calculator kann man sich ein Ziel setzen – zum Beispiel eine Ladezeit von 3 Sekunden – und berechnen, wie groß eine Website dafür sein darf. Anbieter wie SpeedCurve, Calibre, Sitespeed.io oder Google Page Speed tracken die Performance kontinuierlich und unterstützen bei der Optimierung.
3. Contentstrategie überdenken
Es müssen nicht immer Hintergrundvideos oder großformatige Bilder sein. Vektorgrafiken, Icons oder typografische Details sind visuell manchmal sogar spannender als hochaufgelöste Fotos und setzen Akzente. Auch Werbeanzeigen, Tracking von Drittanbietern oder Social-Media-Buttons verursachen viel Daten-Load und sind nicht immer sinnvoll oder notwendig. Gute SEO hilft zudem bei der Auffindbarkeit der Inhalte.
4. Bilder komprimieren
Für WordPress gibt es Plug-ins, die Bilder beim Upload automatisch komprimieren. Mit kostenlosen Tools wie smush it!, ImageOptim oder kraken.io lassen sich Bilder schnell und einfach verkleinern. Mit WebP bietet Google ein Format für komprimierte Bilder an, das kleiner ist als PNG und JPEG. Um zu verhindern, dass etwa große One-Pager bei jedem Aufruf komplett geladen werden, kann man zudem ein Lazy-Loading-Plug-in installieren, sodass Inhalte nach und nach beim Runterscrollen aufgerufen werden.
5. Fonts und Typografie optimieren
Systemschriften liegen auf jedem Rechner und verbrauchen am wenigsten Energie, schränken aber die Designoptionen stark ein. Webfonts bieten mehr gestalterische Freiheit, werden aber auf externen Servern gehostet, sodass die Zahl der HTTP-Requests und mit ihnen die Ladezeit und der Energieverbrauch steigen. Man kann sie aber »subsetten«, das heißt, nur die Glyphen laden, die tatsächlich gebraucht werden. Zwischen Systemschriften und Webfonts liegt in Sachen Dateigröße das Variable-Fonts-Format. Embedded Fonts machen die Seite an sich schwerer, reduzieren dafür aber die HTTP-Requests. Generell sollte man die Zahl der Schriften begrenzten – vor allem bei Webfonts.
6. Sauberen Code schreiben
Schlanker Code sollte eigentlich selbstverständlich sein, dennoch müssen sich Webentwickler bei der Arbeit ständig hinterfragen und optimieren. Dafür gibt es Tools wie CO2.js, das schon während des Programmierens den zukünftigen Co2-Ausstoß berechnet. Das Lean-Code-Gebot gilt aber nicht nur für eigenen Code, sondern jede Library und jedes Framework, das man verwendet. So sollte man man sein CMS beispielsweise nicht mit unnötigen Plug-Ins aufblähen und sich möglichst effiziente Tools aussuchen.
7. Weniger JavaScripte einsetzen
Da JavaScript clientseitig, also auf den Geräten der Anwender ausgeführt wird, ist die CPU-Auslstung und damit der Energieverbrauch besonders hoch. Stattdessen sollte man interaktive Interfaces soweit wie möglich mit CSS und HTML realisieren und JS nur sparsam einsetzen. Benötigt man wirklich verschiedene Trackingscripte auf der Homepage oder kann man hier auch im Sinne der Datensparsamkeit vom typischen Verhalten abweichen?
Weitere Informationen zum Thema Green Web und nachhaltige Websites
Buchtipp: »Designing for Sustainability« Weitere Profi-Tipps gibt Tim Frick in seinem 2016 bei O’Reilly Media erschienenen Buch »Designing for Sustainability. A Guide to Building Greener Digital Products and Services« (336 Seiten,25 US-Dollar, ISBN 978-1491-93577-4).
Dieser Beitrag ist erstmals in PAGE 12.2019 erschienen als Teil des Artikels »Grünes Webdesign: nachhaltige Websites gestalten«, der inzwischen auch auf PAGE Online zu finden ist. Mehr Informationen zum Thema »Green Web, NFTs & CO: Tipps und Konzepte für ein Webdesign zwischen Innovation und mehr Nachhaltigkeit« findet ihr außerdem in PAGE 2.2023.
