0.1 – Ein leichtgewichtiges Contao Theme für ressourcenbewusste Websites

* Die 0.1 Demo-Website wurde bei WebsiteCarbon mit weniger als 0,1 g CO₂ je Seitenansicht bewertet. Der Wert bezieht sich auf die konkrete Demo-Website und ist nicht pauschal auf mit dem Theme erstellte Websites übertragbar. Messung bei WebsiteCarbon

Das Internet verbraucht Strom – und zwar eine Menge. Denn Rechenleistung, Kühlung und unterbrechungsfreie Stromversorgung von Tausenden Servern kosten täglich Unmengen an Energie und verursachen einen enormen CO₂ Ausstoß. Eine durchschnittliche Webseite produziert 1,76 Gramm CO₂ pro Seitenansicht. Für eine Website mit 10.000 monatlichen Seitenaufrufen sind das 211 kg CO₂ pro Jahr!¹

Nachhaltigkeit ist kein Trend sondern unsere Lebensversicherung

Im gleichen Zeitraum bindet ein Baum im Schnitt ca. 11 kg CO₂. Rechnerisch wären damit etwa 20 Bäume erforderlich, um die Emissionen einer Website mit 10.000 monatlichen Seitenaufrufen auszugleichen.² Puh - das hört sich ziemlich viel an, haben wir uns gedacht. Und wollten etwas dagegen tun, denn Nachhaltigkeit ist längst kein Trend mehr sondern die Lebensversicherung zukünftiger Generationen.

Also beschäftigten wir uns mit der Konzeption von ressourcenbewussten Webseiten und entwickelten das 0.1 Theme mit dem Ziel einer schlanken technischen Umsetzung. Der Name „0.1“ steht dabei für unseren ursprünglichen Ansatz, den Ressourcenbedarf von Webseiten möglichst gering zu halten. Die aktuelle 0.1 Demo-Website wurde bei WebsiteCarbon mit weniger als 0,1 g CO₂ je Seitenansicht bewertet. Der Messwert bezieht sich auf die konkrete Demo-Website und kann bei individuell mit dem Theme erstellten Websites abweichen.

Energieeffizientes Webdesign ist mehr als nur umweltfreundlich

Wir haben festgestellt: Maßnahmen für eine energieeffizientere Webseite können zugleich weitere Bereiche verbessern, etwa SEO, Performance oder Nutzerfreundlichkeit.

Energieeffizientes Webdesign ist performant, weil es nur so viele Inhalte wie nötig verwendet. Der Einsatz von ressourcenintensiven Formaten, wie Videos und Bildern wird kritisch hinterfragt und Texte sind knapp und informationsorientiert verfasst.
Energieeffizientes Webdesign ist nutzerfreundlich, da es seine Zielgruppe kennt. Es verfügt über klare Strukturen sowie kurze Wege und macht deshalb Spaß.
Energieeffizientes Webdesign ist suchmaschinenoptimiert, weil es sowohl der Suchmaschine als auch dem Nutzer hilft, die gesuchten Informationen schnellstmöglich zu finden.

Eine energieeffizientere Webseite kann zugleich eine bessere Webseite sein.

 

Wie spart man Energie mit einer Webseite?

Vermeidung von Datenmüll durch Informationsreduktion

Die auf einer Webseite dargestellten Informationen auf das Wesentliche zu reduzieren birgt enorme Vorteile: Weniger Inhalte bedeuten weniger Code und schnellere Ladezeit. Neben der Performance steigt auch gleichzeitig die Usability, denn Nutzer finden schnell das was sie suchen. Hierzu gehört auch effizientes Copywriting, welches Informationen klar und verständlich präsentiert. Zudem sollte der Einsatz von ressourcenintensiven Inhalts-Formaten, wie Videos und Bildern kritisch hinterfragt werden: Bringt das Medium wirklich einen Mehrwert für den Nutzer?
Somit wird die Nutzung des Webs einfacher und effizienter für alle: der Nutzer spart Zeit, der Anbieter Datenmüll und der Planet profitiert von der eingesparten Energie.

JS & co. machen Webseiten schöner & interaktiver - aber auch verschwenderischer

Einerseits erhöht die Verwendung von Javascript die Dateigröße der Webseite und andererseits erfordert dessen Verarbeitung mehr Ressourcen auf dem Endgerät des Benutzers. Dies erhöht die CPU-Auslastung, was wiederum den Energieverbrauch des Geräts erhöht. Deshalb macht es Sinn sich zu fragen, ob die gewünschte Interaktion, Funktionalität oder Animation vielleicht auch mit effizienteren Technologien, wie CSS, realisierbar wäre.
Ähnlich verhält es sich mit Webfonts, denn diese wirken sich ebenfalls oft negativ auf die Dateigröße der Webseite aus. Wer Daten, Ladezeiten und Energie sparen will, sollte Systemschriften in Betracht ziehen. Wir meinen jedoch nicht Arial oder Times New Roman - die Rede ist von Schriften, die Hausherren ihrer Betriebssysteme sind und für moderne, hochauflösende Bildschirme konzipiert wurden: Apple, Google & Microsoft haben mit ihren Systemschriften San Francisco, Roboto & Segoe performante, schöne und wirkungsvolle Fonts geliefert, welche auf Webseiten ebenfalls einen guten Job machen.

Neue & alte Techniken - WebP & Dark Mode

Die technische Optimierung von Bilddateien verbessert die Ladezeit und somit auch die Benutzerfreundlichkeit einer Webseite und senkt zudem deren Energieverbrauch. Es gibt viele gute Online-Tools, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren und in ein effizientes Dateiformat, z.B. WebP, zu konvertieren. Außerdem helfen responsive Image Elemente wie picture und srcset um für jedes Endgerät die passende Bildgröße auszuliefern.
Dunkle Webseiten waren eine der ersten Techniken, die vor vielen Jahren zum online Energiesparen populär wurden. Sie verschwanden jedoch mit dem Aufkommen von LCD-Bildschirmen. Mit neuen OLED-Bildschirmen, die wieder jedes Pixel einzeln beleuchten, ist dies jedoch wieder eine praktikable Technik, um den Energieverbrauch auf Endgeräten zu reduzieren. Heute zieht der Dark Mode in immer mehr Apps und Geräte als Standard Feature zum Energiesparen ein.

0.1 – an Energy Saving Contao Theme

Das 0.1 Contao Theme ist unser Ansatz im Bereich Webentwicklung für eine schlanke und ressourcenbewusste technische Umsetzung. Mit Features, die Webseitenbesuchern und -anbietern einen echten Mehrwert liefern.

 

• Ohne ressourcenintensive Inhaltsformate
  Die im Theme verwendeten Icons & Bilder sind allesamt leichtgewichtige SVGs oder Bilder im effizienten WebP Format. Es werden keine unnötigen Iconfonts oder hochauflösende JPGs geladen.
• Optimale User Experience (UX)
  Gute UX verlangt, dass Erlebnisse einwandfrei funktionieren, dass der Nutzer in der Lage ist, die Dinge zu finden, die er finden will und zudem noch Freude bei der Anwendung hat. Dies war unser Anspruch beim Design des Themes mit klaren Strukturen und freundlichen Funktionen.
• Leichtgewichtiger Code
  Der schlanke, effiziente Contao-Code und das smarte CSS-Framework Spectre tragen zu einer reduzierten technischen Basis bei. Spectre ist bei komprimierter Auslieferung lediglich 10 kb groß.
• Support neuster Versionen
  Das Theme unterstützt Contao 4.9 bis 5.7 und setzt auf Features wie Lazy Loading und WebP, die unter anderem dazu beitragen können, unnötige Datenübertragungen zu reduzieren. Zudem performt es am besten mit PHP 8 und höher, denn neuere Versionen von PHP können je nach Anwendung effizienter arbeiten und Serverressourcen reduzieren.
• Systemschriften
  Im Theme werden keine Webfonts geladen. Es werden lediglich performante Systemschriften verwendet, die für moderne, hochauflösende Bildschirme konzipiert wurden. Und wir finden San Francisco, Roboto & Segoe machen einen guten Job ohne zu beschweren.
• Dark Mode
  Der Dark Mode kann auf geeigneten OLED-Displays dazu beitragen, den Energieverbrauch des Displays zu reduzieren und ist daher ebenfalls Bestandteil des Themes.
• Performant
  Mit einen Performance-Score von 100% bei Lighthouse lässt unser Theme Nutzer nicht lange warten und läd mit unseren Demo Inhalten in 0.8s.
• Ohne Javascript
  Alle interaktiven Features, Funktionen und Animation wurden ohne Javascript umgesetzt. Da JS ein echter Ressourcenfresser ist, verwendet das Theme stattdessen effizientere Technologien, wie Gehirnschmalz + einfaches CSS.
• SEO optimiert
  Das Theme erreicht einen SEO-Score von 100%³ bei Lighthouse. Das freut Suchmaschinen, Nutzer und Betreiber.
• Schlicht & flexibel
  Schlichtes, flexibles Design welches einen stimmigen Rahmen bildet aber dennoch genügend Spielraum für eigene individuelle Inhalte lässt
• Aufkärung inklusive
  Inhalte, die über das wachsende „Online-Energieproblem“ informieren und Ansätze zu dessen Bekämpfung liefern. Es darf ausdrücklich gern alles gelesen & geteilt werden.

 

Es ist wichtig das Energieproblem der Webbranche ernst zu nehmen und anzugehen. Und das ist gar nicht so schwierig, denn es gibt viele Dinge, die wir tun können, um Verschwendung zu vermeiden und Effizienz zu erhöhen. Die meisten dieser Aktionen sind nicht grundlegend schwierig oder komplex, sie erfordern einfach ein bisschen Aufmerksamkeit und sorgfältige Überlegungen hinsichtlich Design, Inhaltserstellung, Entwicklung und Hosting.

Think big. Act now.

Jetzt energiesparende Webseite erstellen mit dem kostenlosen 0.1 Premium Contao Theme

 

Wenn du Fragen, Anmerkungen oder weitere Tipps zur Reduzierung des Energieverbrauchs von Webseiten hast, lass es uns wissen!

Quellen & Links

¹ CO₂ Ausstoss, einer durchschnittlichen Webseite https://www.websitecarbon.com/
² Wieviel CO₂ bindet ein Baum? https://rechneronline.de/co2-ausstoss/baum.php
³ SEO-Score von 100% https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://0.1.pdir.dev

------------------------------------------------------------

Du möchtest nicht ständig immer wieder Templates kaufen und durchtesten müssen, sondern willst einfach gleich loslegen? Dann schau dir unser pdir+ Webtemplate-Paket an: