PAGE online

Checkliste: 7 Tipps für ein grüneres Internet

Diese Tipps und Tools sparen beim Webdesign Daten und Energie

Warum nachhaltiges Webdesign nötig ist

Was Designer und Entwickler tun können, um das Web nach­haltiger 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 automa­tisch 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. Web­fonts 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 Datei­größ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

Handbuch für nachhaltige digitale Produkte
Buchtipp: »Designing for Sustainability«
Weitere Profi-Tipps gibt Tim Frick in seinem 2016 bei O’Reilly Media erschienenen Buch »Designing for Sus­tainability. A Guide to Building Greener Digital Products and Services«
(336 Seiten,25 US-Dollar, ISBN 978-1491-93577-4).

 

Mehr Tipps für Sustainable Web Design – inklusive Manifesto – gibt es auch hier https://sustainablewebdesign.org/ sowie in dem gleichnamigen Buch von Tom Greenwood.

 

 

 

 

 

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.

Produkt: Download PAGE - Responsive Webdesign - Basics, Cases, Workshops - kostenlos
Download PAGE - Responsive Webdesign - Basics, Cases, Workshops - kostenlos
Tutorials zur Gestaltung responsiver Websites und Fallbeispiele aus der Praxis.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren