Nachhaltigkeit

• Apr 7, 2020

  C02 sparen: Responsive Images und Lazyload bei Jekyll

  • Jekyll
  • howto
  • Nachhaltigkeit
  • SEO
  • uberspace

  Netzwerkdaten vorher:^{1 2}

  Dateien	Typ	Größe	Übertragen
  9	images	1.357,97 KB	1.360,75 KB
  3	html	50,54 KB	18,27 KB
  1	css	11,26 KB	3,49 KB

  Netzwerkdaten, nachher (mit jekyll-responsive-images und Lazyload): ^{1 2 3}

  Dateien	Typ	Größe	Übertragen
  9	images	646,17 KB	648,95 KB
  3	html	52,56 KB	18,50 KB
  1	css	11,60 KB	3,65 KB
  1	js	0 KB	28,06 KB

  Reduzierte Inhalte sparen Ressourcen und damit auch Emissionen bei jedem Seitenaufruf.⁴

  Das ist nicht nur nachhaltig im Sinne von ressourcenschonend und gut fürs Klima,
  sondern Google mag es auch noch gerne.

  Zudem fließt die Performance der Website auch in die Ranking-Kriterien von Google ein, sodass auch die Auffindbarkeit über die Suchmaschine davon profitiert.⁴

  So empfahl mir Google PageSpeed Insights zur Verbesserung der Performance von netzaffe.de auch die richtige Dimensionierung vom Bildern.

  Dieses Howto hat das Ziel die übertragene Datenmenge von Bildern und somit den CO2-Ausstoß dieser Website mimimieren.

  Ich beschreibe die Installation und Konfiguration von jekyll-responsive-images⁵, im Zusammenspiel mit einem neuen Template und einen Lazyload Skript, eingebunden in Jekylls Standardtheme miminma⁶ unter Linux, hier CentOS auf uberspace 7.

  1. Gemessen mit dem Firefox Netzwerkanalyse Werkzeug ↩ ↩²

  2. Startseite, Minima Theme mit Desktop Auflösung ↩ ↩²

  3. jekyll-responsive-images Konfigurationsparameter: width: 740px, quality: 90, strip: true ↩

  4. reinblau: Klimaschutz und Webentwicklung ↩ ↩²

  5. jekyll-responsive-image ↩

  6. Minima Theme ↩

  Weiterlesen

Abonieren