24. September 2023

Website-Programmierung

Sauberer Code minimiert Ladezeiten und den Energieverbrauch

Am Anfang des Internetzeitalters waren Webseiten sehr einfach gestaltet und mit wenig Code programmiert. Die Datenübertragung via Modems erforderte, dass Layout, Bilder und Code möglichst sparsam aufbereitet wurden. Jedes Byte, das eingespart werden konnte, war ein Gewinn. Über die Jahre wurden die technischen Möglichkeiten immer umfassender, die Netzwerkleitungen schneller, unsere Ansprüche an Design und Erlebnisse anspruchsvoller und unser Hunger nach Informationen, Daten und Austausch mit anderen Menschen immer grösser.

Zahlen, die zu denken geben

  • Eine durchschnittliche Website ist heute fast viermal so gross wie im Jahr 2010.
  • Bis 2025 wird das Internet voraussichtlich mehr Kohlestoff ausstossen, als jedes andere Land ausser China, Indien und den Vereinigten Staaten.
  • Schätzungen gehen davon aus, dass Kommunikationstechnologien bis 2040 die Ursache für 14 Prozent der weltweiten Emissionen und 20 Prozent des weltweiten Strombedarfs sein werden.

Weniger Code bedeutet weniger Datenübertragung = weniger CO2-Emissionen

Bei vielen Websites sind es der unbedachte und nicht optimierte Einsatz von Video- und Bildmaterial, der die Datenmengen ins unermessliche wachsen lässt. Trotzdem kann auch effektiver Code und die Programmierung einen Beitrag zu einer nachhaltigen Website leisten:

HTML, CSS und JavaScript

  • Den Code sauber schreiben
  • keinen Code einbinden, der nicht wirklich benötigt wird
  • Dateien zum Schluss minifizieren und zusammenführen. Dadurch wird der Code für Menschen zwar unübersichtlicher, aber die zu übertragenden Dateien werden deutlich kleiner.

Plugins, Skripte
Manchmal binden Content Management Systeme Plugins und Skripte ein, die gar nicht oder nicht mehr benötigt werden. In dem sie entfernt werden, werden die zu übertragenden Dateien wiederum kleiner. Ganz nebenbei wird die Website wartungs- und updatefreundlicher.

Schriften
Sie tragen wesentlich zum Branding einer Marke bei. Eine gut gewählte Schrift funktioniert auf allen Endgeräten und erhöht das Benutzererlebnis. Webseiten mit zu vielen verschiedenen Schriften wirken jedoch unruhig und haben auch längere Ladezeiten.

  • möglichst wenig Schriftschnitte wählen
  • die Schriften nicht über eine Schriftbibliothek (z.B. Google-Fonts) einbinden, sondern auf dem eigenen Server installieren

Schriften können bei FontSquirrel in Webformate umgewandelt werden. FontSquirrel stellt auch Möglichkeiten zur Verfügung, nicht benötigte Zeichensätze (z.B. von anderen Sprachen) zu entfernen und damit möglichst kleine Dateien zu generieren.

Siehe dazu: https://www.fontsquirrel.com/tools/webfont-generator

Lazy loading
Mit dieser Einstellung werden Inhalte, insbesondere Bilder und Videos, wenn der Benutzer zu einem bestimmten Teil der Webseite scrollt oder auf eine bestimmte Aktion klickt. Dies hilft, Bandbreite zu sparen und die Leistung der Webseite zu verbessern, indem es Ressourcen nur dann lädt, wenn sie wirklich benötigt werden, anstatt alles auf einmal zu laden.

Cookies, Tracking, Analyse
Welche Cookies, Tracking- und Analysetools braucht es tatsächlich? Bei vielen Webseiten werden Tools eingebunden, die oft gar nicht benötigt werden. Weder vom Websitebesucher noch von der Websitebetreiberin. Ein gutes Beispiel dafür ist Google-Analytics. Oft wird dieses Statistiktool eingebunden und verursacht ungeahnten Datenverkehr. Die Statistik selbst wird aber gar nie angeschaut oder ausgewertet.

  • Entferne Cookies, Tracking- und Analysetools, die du nicht brauchst
  • Eine gute Alternative zu Google-Analytics ist Matomo. Matomo kann auf dem eigenen Server installiert werden, verursacht wenig Datenverkehr und ist zudem auch datenschutzfreundlich.

Caching-Techniken

Nutze serverseitige und browserseitige Caching-Techniken, um den Datenverkehr zu minimieren und die Ladezeiten zu erhöhen.

Zurück