Website Rankings According to Performance & Sustainability (WRAPS)

6 Browserfenster von denen eins leer ist, die anderen haben folgende Symbole: Baum, fußball-Bundesliga-Logo, Mensch, Schloss, Pulsmonitor und normaler Inhalt einer Webseite.

Willkommen zu den WRAPS. In dieser Serie von Blog-Einträgen sortiere ich Webseiten für konkurrierende Produkte und Marken nach Performance- und Nachhaltigkeitskriterien.

Die Idee

Mit diesen Ranglisten möchte ich Aufmerksamkeit für die Themen Web-Performance und Nachhaltigkeit erzeugen. Und wer weiß, vielleicht spornen die Platzierungen einige Webseitenbetreibende dazu an, ihre eigenen Webseiten weiter zu optimieren. Ich stehe dabei natürlich gerne zur Seite.

Die Kriterien

Ich nutze größtenteils objektive, quantifizierbare Kriterien, um die Performance und Nachhaltigkeit zu bestimmen. Lediglich bei der Frage, ob die Inhalte der Webseite ethischen Maßstäben genügen, bleibt eine subjektive Komponente nicht aus. Die ersten vier Kriterien sind gleich gewichtet und bilden das vorläufige Ergebnis.

Von diesem Zwischenergebnis werden bis zu 5% abgezogen wenn es moralische oder ethische Probleme mit dem Inhalt einer Webseite gibt. Da dieses Kritium etwas Subjektivität beinhaltet, hab ich beschlossen, es weniger zu gewichten als die anderen vier.

Achtung: für die ersten drei Teile dieser Serie hatte ich eine andere Gewichtung der Kriterien: 36% für ökologische Nachhaltigkeit, 24% für die Performance, 20% für die Privatsphäre, 15% für die Barrierefreiheit und 5% für die Ethik des Inhalts.

CO2 Fußabdruck

Die ökologische Nachhaltigkeit einer Webseite hängt stark vom verursachten Datenaustausch beim (wiederholten) Aufrufen ab. Zur konkreten Berechnung des verursachten CO2-Ausstoßes benutze ich die Bibliothek CO2.js, die auch berücksichtigen lässt, ob die angesprochenen Server/CDNs mit grünem Strom versorgt werden. Zwei gleichgewichtete Szenarien werden gemessen, in denen jeweils alle Cookies zugelassen werden.

CO2-Emission beim 1. Laden
CO2-Emission beim erneuten Laden

Sofern im Testbericht nicht anders beschrieben, werden für diese Kategorie wie folgt Punkte vergeben. Beim ersten Laden verwende ich das Rating System von SustainableWebDesign.org. Wobei ein Wert, der zu einem Rating von A+ führt, mit voller Punktzahl belohnt wir. Ein F-Rating führt zu null Punkten. Dazwischen nimmt die Punktzahl linear ab. Beim Wiederholten laden halbiere ich beide Grenzwerte und berechne analog.

Performance (Core Web Vitals)

Die Punkte für die Performance richten sich strikt nach den Core Web Vitals der Webseite. Es werden also die Resultate der tatsächlichen Besuchenden herangezogen, um den Score zu ermitteln. Es gibt aktuell drei Kategorien, die ich alle gleich gewichte. Largest Contentful Paint (LCP) - Ein Wert unter 2,5 Sekunden ist gut ('good'), zwischen 2,5 und 4 Sekunden braucht Verbesserung ('needs improvement') und alles über 4 Sekunden ist schwach ('poor'). Interaction to Next Paint (INP) - Ein Wert unter 200 Millisekunden ist gut ('good'), zwischen 200 und 500 Millisekunden braucht Verbesserung ('needs improvement') und alles über 500 Millisekunden ist schwach ('poor'). Cumulative Layout Shift (CLS) - Ein Wert unter 0.1 ist gut ('good'), zwischen 0.1 und 0.25 braucht Verbesserung ('needs improvement') und alles über 0.25 ist schwach ('poor'). Bei meiner Bewertung gibt es für ein Ergebnis im Bereich „good“ in der jeweiligen Unterkategorie die volle Punktzahl, im Bereich „poor“ gibt es keine Punkte, und im Bereich „needs improvement“ verringert sich die Punktzahl linear mit dem Ergebnis.

LCP (1/3)
CLS (1/3)
INP (1/3)

Privatsphäre

Zur Einhaltung der Privatsphäre von Webseiten gibt es klare Vorgaben. Trotzdem halten sich nicht alle Webseiten an die Regeln oder tracken die Benutzer übermäßig viel. Wichtig ist hier auch, wie viele externe Server angesprochen werden und von wem diese Server betrieben werden. Außerdem sollten Webseiten gewissen Sicherheitskriterien entsprechen, um Datenverluste zu verhindern. Es gibt daher zwei Kategorien.

  • Externe Server: Hier gibt jeder angesteuerte Server, dessen Betreiber außerhalb der EU liegt, 10% Abzug, wenn zuvor keine Einwilligung von den Besuchenden eingeholt wird. Der Abzug verdoppelt sich, wenn die Server zu den bekannten großen Datenkraken gehört. Jeder Server innerhalb der EU gibt 5% Abzug, bzw. 10% Abzug, wenn der Server zum Tracking angesteuert wird. Auch hier gibt es den Abzug nur, wenn vorher keine Einwilligung geholt wird.
  • Sicherheit: Hier wird ein Tool von Dark Scout zurate gezogen, welches Security Header und andere offensichtliche Mängel auf Webseiten offenlegt.
Externe Server (2/3)
Sicherheit (1/3)

Achtung: Die Sicherheit der Webseiten wurde bei den ersten drei Teilen dieser Seria via WebPageTest gemessen. Diese ziehen Snyk.io zurate, um ein Sicherheitsranking zu erstellen. Ein Score von A gab 100%, jede Stufe (B-F) gab dann 20% Abzug.

Barrierefreiheit (Accessibility)

Die Punktzahl richtet sich nach dem entsprechenden Lighthouse-Score. Außerdem wird berücksichtigt, ob Besuchende Farb- und Schriftanpassungen vornehmen können und ob die Texte in einfacher Sprache zur Verfügung stehen.

Lighthouse Accessibility Score (50%)
Farb-/Schriftwahl (25%)
Sprache (25%)

Ethische Inhalte

Der subjektivste Faktor ist, wie ethisch der Content der Webseite ist. Deshalb habe ich ihm relativ wenig Gewicht eingeräumt. Ich erwarte hier auch keine großen Unterschiede zwischen den Webseiten, da sie sich mit ähnlichen Themen beschäftigen. Trotzdem kann es sein, dass einige Websites Dark Patterns verwenden. Werden solche oder andere unethische Inhalte erkannt, gibt es 5% Abzug vom Ergebnis.

Fazit und Ausblick

Die Rankings sollen in erster Linie Spaß machen und ggf. Webseitenbetreibende zur Verbesserung anregen. Es geht nicht darum, einzelne Webseiten an den Pranger zu stellen. Im Gegenteil, der Fokus soll auf den positiven Beispielen liegen. Diese sollen zum Nachahmen inspirieren.

Wie eingangs beschrieben ist die Gewichtung der Kriterien rein willkürlich. Ich erwarte, dass sich die Gewichtung im Laufe der Zeit verändert und dass neue Aspekte mit aufgenommen werden. Die ersten Durchläufe beruhen auf viel manueller Arbeit. Nach und nach soll diese Arbeit automatisiert werden, sodass die Ranglisten in regelmäßigen Abständen erneuert werden können.

  • Ich benutze die Version 0.16, bei der das Sustainable Web Design Modell 4 angewendet wird. Arrow Up Right
  • Das Rating System beruht auf Daten HTTP Archive und richtet sich nach Perzentilen an verursachtem Datenvolumen aller Webseiten. Ein Rating von F erzielt man, wenn die Webseite über dem Median liegt. Die Grenzwerte für das Rating haben sich im Oktober 2024 geändert, die alten Grenzwerte sind noch auf HTTP Archive zu finden. Arrow Up Right
Tags #WRAPS

Verwandte Posts

6 Browserfenster mit folgenden Symbolen: Baum, Bücher, Mensch, Schloss, Pulsmonitor und normaler Inhalt einer Webseite.
WRAPS - Online Buchhandlungen

In dieser Episode der WRAPS (Website Rankings According to Performance and Sustainability) untersuche ich die Homepages großer europäischer online Buchhandlungen. Wer macht Besuchende zu einem offenem Buch und wer hält sich an die DSGVO?

6 Browserfenster mit folgenden Symbolen: Baum, Hände, die ein Herz heben, Mensch, Schloss, Pulsmonitor und normaler Inhalt einer Webseite.
WRAPS - Nicht-Regierungs-Organisationen (NGOs)

In dieser Episode der WRAPS (Website Rankings According to Performance and Sustainability) untersuche ich die Homepages einiger großer NGOs mit Fokus auf Umwelt- und Klimaschutz. Sind die Hausaufgaben bzgl. Web-Nachhaltigkeit gemacht?

6 Browser windows, one of them contains a shirt with a leaf on it, the others contain symbols: a tree, an accessibility icon, a lock, a heart monitor and a normal web content.
WRAPS - Online Shops für Faire Mode

In diesem Teil der WRAPS Serie schaue ich mir verschiedene Plattformen für faire Mode an. Die Anbieter haben sich Nachhaltigkeit auf die Fahnen geschrieben, aber halten die Homepages dieses Versprechen?