Website Rankings According to Performance & Sustainability (WRAPS)

6 Browser windows, one of them is empty, the others contain symbols: a tree, an accessibility icon, a lock, a heart monitor and a normal web content.

Welcome to WRAPS. In this series of blog posts, I rank websites for competing products and brands based on performance and sustainability criteria.

The Idea

With these rankings, I aim to raise awareness about web performance and sustainability. And who knows, maybe the rankings will motivate some website operators to further optimize their own websites. I’d gladly assist.

The Criteria

The rankings are not based on exact science. However, I mostly use objective, quantifiable criteria to determine performance and sustainability. The first four criteria are weighted equally.

Privacy (25%)

I deduct up to 5% from the score for any moral or ethical issues in the content of the homepage. Since this criterion is somewhat subjective, I decided to not weigh it as much as the other four.

Note: The rating was different for the first three rankings: Carbon Footprint was weighted with 36%, Performance with 24%, Privacy with 20% and Accessibility with 15% and Ethics with 5%.

Carbon Footprint

The ecological sustainability of a website largely depends on the data transfer it generates during (repeated) visits. To calculate the specific CO2 emissions, I use the CO2.js library , which also allows to consider whether the targeted servers/CDNs are powered by green energy. Two equally weighted scenarios are measured, in both of them all cookies are/have been accepted.

Carbon Emission on First Load
Carbon Emission on Reload

Unless specified otherwise in the test report, points for this category are awarded as follows: For the initial load, I use the rating system from SustainableWebDesign.org. A score that achieves an A+ rating earns full points, while an F rating results in zero points. Scores between these two ratings decrease linearly. For repeated loads, I halve both thresholds and calculate points in the same manner.

Performance (Core Web Vitals)

The performance score is strictly based on the website’s Core Web Vitals. This means that the actual results from visitors are used to determine the score. There are currently three categories, all of which I weight equally. Largest Contentful Paint (LCP) - A result below 2.5 seconds is considered good, between 2.5 and 4 seconds needs improvement and above 4 seconds is considered poor. Interaction to Next Paint (INP) - A result below 200 milliseconds is considered good, between 200 and 500 milliseconds needs improvement and above 500 milliseconds is considered poor. Cumulative Layout Shift (CLS) - A result below 0.1 is considered good, between 0.1 and 0.25 needs improvement and above 0.25 is considered poor. For my scoring full points are awarded for a subcategory if the result is in the “good” range; in the “poor” range, no points are awarded, and in the “needs improvement” range, the score depends on how close the result is to the thresholds. (Score decreases linearly relative to the result.)

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

Privacy

There are clear guidelines for ensuring the privacy of websites. However, not all websites adhere to these rules or track users excessively. It’s also important to consider how many external servers are contacted and who operates these servers. Additionally, websites should meet certain security criteria to prevent data breaches. Therefore, I created two subcategories.

  • External Servers: Each server that is contacted and operated outside the EU results in a 10% deduction if prior consent from visitors has not been obtained. The deduction doubles if the server belongs to one of the well-known major data collectors. Servers within the EU result in a 5% deduction, or a 10% deduction if the server is used for tracking purposes. Again, these deductions only apply if consent has not been obtained beforehand.
  • Security: The score is measured via a scan of the website with Dark Scout, which scans websites for missing Security Headers and other obvious security issues.
External Servers (2/3)
Security (1/3)

Note: The security of the websites was measured via WebPageTest, which uses Snyk.io to determine the ranking. A score of A gave 100%, with each lower grade having resulted in a 20% deduction.

Accessibility

The score is based on the relevant Lighthouse score. Additionally, it is considered whether visitors can adjust colors and fonts and whether the text is available in plain language.

Lighthouse Accessibility Score (50%)
Color/Font Selection (25%)
Language (25%)

Ethical Content

The most subjective factor is how ethical the website’s content is. Therefore, I have given it relatively little weight. I don’t expect significant differences between the websites here, as they deal with similar topics. If any Dark Patterns are detected or other unethical content is promoted, a 5% penalty is deducted from the score.

Conclusion and Outlook

The rankings are primarily meant to be fun and possibly encourage website operators to make improvements. The goal is not to put individual websites in the spotlight. On the contrary, the focus should be on the positive examples that inspire others to follow suit.

As mentioned at the beginning, the weighting of the criteria is entirely arbitrary. I expect the weighting to change over time and new aspects to be included. The first runs are based on a lot of manual work. Gradually, this work should be automated so that the rankings can be updated regularly.

  • I use version 0.16, which applies the Sustainable Web Design Model 4. Arrow Up Right
  • The rating system is based on data from the HTTP Archive and is determined by percentiles of data volume generated across all websites. An F rating is given if a website’s data volume exceeds the median. The thresholds for the ratings were updated in October 2024, with the previous thresholds still available on archive.org. Arrow Up Right
Tagged #WRAPS

Related Posts

6 browser windows containing symbols: a tree, a books emoji an accessibility icon, a lock, a heart monitor and one with normal web content
WRAPS - Online Book Shops

For this episode of the WRAPS series, I've looked at the websites of big european book shops. Who exposes visitors like an open book to third parties and who adheres to GDPR?

6 browser windows containing symbols: a tree, an icon of a heart hovering above two hands, an accessibility icon, a lock, a heart monitor and normal web content
WRAPS - Non-Government-Organisations (NGOs)

For the third part of the WRAPS series, I looked at the websites of well-known NGOs focusing on environmental and climate protection. The results show that even climate organisations do not have sustainability on their radar when it comes to web development.

6 Browserfenster mit folgenden Symbolen: Baum, T-Shirt mit Blatt drauf, Mensch, Schloss, Pulsmonitor und normaler Inhalt einer Webseite.
WRAPS - Fair Fashion Online Shops

This edition of WRAPS focuses on Fair Fashion shopping platforms. They are selling fair and green clothing, but are their websites built sustainably?