GREEN CODING Guide
by VAST FORWARD

• Bilder nicht größer einbinden, als für die Darstellung benötigt
• Responsivität durch Nutzung von Picture Element oder srcset
• Anpassung der Bildqualitäten. Wenn das System es ermöglicht, die Anpassung übernehmen lassen.¹
• Aktuelle Bildformate wie WEBP nutzen²
• Bilder erst nachladen, wenn sie gebraucht werden (Lazy Load), Anzahl an Bildern allgemein begrenzen
• Icons als Sprite zusammenfassen, um Serveranfragen zu minimieren
• Bei großer Nutzerzahl ein CDN nutzen³
• Videos als MP4 oder WebM mit aktuellen Codecs verwenden. Auf kleine Dateigröße achten.
• Autoplay bei Videos vermeiden

Anmerkung: Das CMS Wordpress generiert von hinterlegten Bildern automatisch verschiedene Bildgrößen, die oft nicht benötigt oder verwendet werden – diese können deaktiviert werden.
Über Plugins wie Better-Image-Sizes können benötigte Bildgrößen on the Fly und auch nur in den benötigten Größen generiert werden.

• Javascript zusammenführen und minimieren (Ziel ≈ 100 kB). Um das zu erreichen, kann es auch aufgeteilt werden und nur da eingebunden werden, wo es benötigt wird – Code Splitting)⁴
• ungenutztes Javascript entfernen z.B. über Tree Shaking⁵
• Prüfen, ob es für den Anwendungsfall kleinere Bibliotheken gibt, die die Code-Komplexität vereinfachen oder eine gewünschte Funktion auf andere Weise ermöglichen
• mehrfach vorhandene Module im Javascript vermeiden
• Falls für einfache Funktionen zu viele Skripte notwendig sind: System wechseln

• CSS Dateien in einer einzelnen Datei zusammenführen und minimieren
• CSS spät laden und Critical CSS in den Head-Bereich einfügen⁶
• Bootstrap oder ähnliche Bibliotheken sind hilfreich für eine schnelle Entwicklung, werden aber selten voll ausgenutzt. Nicht benötigte Definitionen entfernen oder Styles selber definieren. CSS Grid z.B. wird mittlerweile von allen gängigen Browsern unterstützt

• Im Idealfall Systemschriften nutzen
• Anzahl der Webfonts reduzieren und prüfen, welche tatsächlich benötigt werden
• Icon-Fonts sind oft unnötig groß. Reduzieren auf nur benötigte Icons und diese als SVG oder Sprite ausliefern (reduziert auch geladenes CSS, da zusätzlich zur Font auch eine extra CSS geladen wird)
• Webfonts können über font subsetting auf die benötigten Schriftzeichen reduziert werden, um bis zu 80% einzusparen⁷

• Wechsel zu einem „grünen“, nachhaltig agierenden Hoster
• Caching kann die Serverlast bei statischen Dateien reduzieren. Statische Dateien sollten für mindestens 1 Jahr über entsprechende Caching-Richtlinien vorgehalten werden
• Die meisten CMS können von Haus aus oder über Plugins eine statische Version der Seite vorhalten, damit Server diese nicht jedes Mal neu bearbeiten müssen. Dies könnte auch über ein Server-Caching gelöst werden.⁸
• Text-Kompression am Server (Einsatz von GZIP und idealerweise Brotli am Server konfigurieren)
• Server-Anfragen verringern/minimieren

• DOM-Größe reduzieren. Onepager haben oft größere Datenmengen und dadurch längere Ladezeiten. Prüfen, ob eine Content-Aufteilung auf Unterseiten sinnvoll ist
• SEO nicht vernachlässigen. Inhalte, die leichter zu finden sind, verbrauchen weniger Ressourcen