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. The weighting of the individual criteria, for example, is entirely arbitrary. However, I mostly use objective, quantifiable criteria to determine performance and sustainability. Only when it comes to evaluating whether a website’s content meets ethical standards does a subjective component come into play. I plan to adjust the criteria over time as new insights emerge. Currently, the results are composed as follows:

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
CLS
INP

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 security of the websites is measured via WebPageTest, which uses Snyk.io to determine the ranking. A score of A gives 100%, with each lower grade resulting in a 20% deduction.
External Servers (66.66%)
Security (33.33%)

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. However, one can distinguish whether topics like sustainability are highlighted or if the platform is used to promote partners that cause societal harm, such as gambling or alcohol. The exact evaluation will be determined anew in each episode.

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

More Posts

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. he results show that even climate organisations do not have sustainability on their radar when it comes to web development.

The meme of two stands where one has a huge queue the other doesn't have any visitors. The headline reads 'DIGITAL PRODUCTS'. The busy stand says 'US product collecting all your data' the empty one says 'EU product respecting your privacy'
US Big Tech Products Should Be Avoided. There Are Good Alternatives.

Sticking to US products make us dependent on, be influenced by, and expose private data to an increasingly hostile opponent.

Futurama Blernsball Player Gets a Pie in His Face, Having Expected to Catch a Blernsball. Caption: WHEN YOU PRELOAD FONTS WITHOUT CROSSORIGIN
Everything You Never Wanted to Know About CORS and Font Preloads

Font Preloads and CORS, it's complicated. Especially because inconsistent browser behaviour can lead into a dilemma, which causes useless data transfer and reduces performance.