Erkenntnisse des diesjährigen Web Almanachs

Noch sind nicht alle Kapitel des diesjährigen Web Almanachs erschienen, aber einige interessante Entwicklungen lassen sich aus den veröffentlichten Artikeln schon ableiten. Meine persönlichen Highlights kommen wenig überraschend aus den Bereichen Performance und Nachhaltigkeit.

Performance¹

Bei den Core-Web-Vitals² wurde die Metrik FID³ Anfang des Jahres durch INP⁴ abgelöst. Ein guter Schritt, da nun nicht nur die erste Interaktion mit der Webseite berücksichtigt wird, sondern diejenige, die am langsamsten (visuell) reagiert. In den letzten Jahren waren einige sog. Anti-Patterns zu beobachten, welche die Werte für die alte Metrik manipulieren. Zum Beispiel das Nachladen von JS-Ressourcen, nach der ersten Interaktion, also nach dem der FID-Wert berechnet wurde.^a Dies führt nicht zur Verbesserung der UX. Im Gegenteil, meistens sind nachfolgende Interaktionen dann verlangsamt, weil der nachladende JS-Code den Main Thread blockiert.

Ich will aber an dieser Stelle klarstellen, dass ich großer Fan davon bin, Skripte von Drittservern erst zu laden, wenn die Besuchenden die Cookie-Frage bejaht haben. Das liegt aber daran, dass diese Praxis für Datenschutzkonformität notwendig ist.^b

Es ist ein deutlich positiver Trend zu erkennen, was die Core Web Vitals angeht. Wäre INP schon 2022 eine der Metriken gewesen, so hätten nur 31% der Webseiten ausschließlich gute CWVs gehabt, 2024 sind es schon 43%.

Auch in den einzelnen Metriken zeigt sich ein ähnlicher Trend:

• LCP⁵ von 51% im guten Bereich auf 59%
• INP von 55% im guten Bereich auf 74%
• CLS⁶ von 74% im guten Bereich auf 79%

Was die Gründe für die deutlichen Verbesserungen sind, lässt sich anhand der präsentierten Daten nicht so leicht beantworten. Ein Paar Fakten und Gedanken dazu:

• ✔️bfcache⁷ findet minimal mehr Anwendung (was alle Werte verbessert LCP, INP, CLS).^c
• ✔️Mehr Bilder haben explizite Dimensionsangaben (verbessert CLS).⁸
• ✔️Weniger lazy-loading von LCP Bilder; von 18% in 2022 auf 16% in 2024.⁹
• ❌Überraschenderweise werden weniger LCP Bilder vom Preload Scanner erkannt, was auf mehr JS generiertes HTML zurückzuführen ist.^{10 11}
• ❌LCP Bilder sind größer geworden und das, obwohl moderne Bildformate im Vormarsch sind.^{12 13}
• ✔️Optimierungen in Frameworks wie React/Next.js verbessern INP Werte.¹⁴
• ✔️Große CMS/Ecommerce Anbieter haben Performance Teams im Einsatz und sorgen für überdurchschnittliche Verbesserungen.^d
• ✔️Kompressions-Algorithmus Brotli kommt häufiger zum Einsatz als noch vor zwei Jahren und nimmt dem weniger Effizienten gzip Marktanteile ab.¹⁵ Auch neuere Algorithmen werden an Anwendung zunehmen.^e
• ✔️CDNs kommen häufiger zum Einsatz.¹⁶

Die oben genannten Entwicklungen sind überwiegend positiv, aber erklären können sie die verbesserte Performance meiner Meinung nach nicht vollumfänglich. Die globale Mobilnetz-Infrastruktur scheint auch nicht für die Verbesserung verantwortlich zu sein, da die Time-to-first-Byte Werte fast unverändert sind (zumindest das 0,75-Quantil).¹⁷ Ein möglicher versteckter Grund für die verbesserte Performance könnte auch einfach sein, dass sich die Endgeräte in den letzten zwei Jahren verbessert haben.

Für die Zukunft würden mich auch folgende Statistiken/Grafiken interessieren:

• Regionale Unterschiede bei der Performance.
• Anwendung von weiteren Browser Optimierungen wie die Fetch Priority API¹⁸ und die Speculation Rules API¹⁹. Update: Im inzwischen veröffentlichten HTTP Kapitel²⁰ zeigt sich ein sehr positiver Trend bei der Nutzung der Fetch Priority API: schon 26% aller Seiten nutzen das noch recht neue Feature.
• Die Gesamtverteilung bei allen Core-Web-Vitals Metriken statt nur die 0,75-Quantile.^f

Vielleicht schaffe ich es ja, die Statistiken aus den httparchive²¹ und CrUX²² BigQuery Datenbanken zu ziehen ohne Pleite zu gehen.

Nachhaltigkeit²³

Die schlechte Nachricht dieses Reports ist, dass Webseiten mehr Datentransfer verursachen als noch vor zwei Jahren.²⁴ Zwar werden Text-basierte Dateien besser komprimiert,^g aber der Großteil der Daten wird durch Bilder verursacht. Mehr Bilder werden in modernen Formaten gesendet, allerdings zeigt sich ein kontraproduktiver Trend hin zu größeren Bildern. Auch der Einfluss von JS Dateien auf den CO₂-Ausstoß hat weiter zugenommen.

Die gute Nachricht ist, dass dem Thema mehr Aufmerksamkeit entgegengebracht wird. Die W3C hat letztes Jahr Guidelines für Nachhaltigkeit in der Webentwicklung veröffentlicht. Die ausführliche Ausarbeitung behandelt sechs Kriterien für Nachhaltigkeit und umfasst neben der ökologischen Komponente auch andere Aspekte wie Privatsphäre, Barrierefreiheit oder Sicherheit.

Auch auf Gesetzesebene gibt es positive Entwicklungen. So haben z.B. die EU, Deutschland, Frankreich, USA und Indien Vorgaben erstellt, die nachhaltiger Umgang mit Ressourcen im digitalen Raum sicherstellen sollen.²⁵

Sorge bereitet den Autoren der steigende Einsatz von KI. Zurecht wie ich finde. Ich sehe aus ökologischer Sicht zunächst einige gravierende Nachteile:

• KI-basierte Websuche ist um ein vielfaches CO2 intensiver als die klassische Websuche.
• KIs sind äußerst Datenhungrig, viele Bots crawlen das Netz auf der Suche nach Content. Dieser Content wird dann in Datenzentren gespeichert, um die LLMs zu füttern.
• KI-generierter Content bläht das Internet auf, ohne wirklich Mehrwert zu erzeugen.

Sonstiges

Auch sonst gibt es einige interessante Entwicklungen.

• ✔️❌Fonts werden mittlerweile deutlich häufiger selbst gehostet,²⁶ was Vorteile für die Privatsphäre bietet und Performance Vorteile birgt, wenn man sich an Best-Practices hält.²⁷ Das scheint aus ökologischer Sicht leider nicht der Fall zu sein. So sind die selbst-gehosteten Fonts im Schnitt doppelt so groß. Wahrscheinlich wird kein Subsetting eingesetzt, und veraltete Formate sind im Einsatz.
• ✔️Das effizienteste Font-Format WOFF2 hat deutlich an Marktanteil gewonnen²⁸ und trägt dadurch zur Reduktion des Datenvolumens bei.
• ❌11% der gesendeten HTML Dokumente werden ohne Kompression gesendet.²⁹ Da ist noch viel Potential.
• ❌Bei der Benutzung des Cache-Control Headers ist ebenfalls unverändert viel Luft nach oben.³⁰
• ✔️User-Präferenzen werden häufiger berücksichtigt (Dark Mode, weniger Animationen),³¹ was sowohl Nachhaltigkeit als auch Barrierefreiheit erhöht.
• ❌Es werden mehr Third-Party-Domains angesprochen denn je. Google Domains sind die mit großem Abstand am häufigsten angesprochenen.³² Kein gutes Zeichen für die Privatsphäre der Surfenden.
• ✔️❌Der Europäische Rechtsakt zur Barrierefreiheit tritt ab Mitte nächsten Jahres in Kraft.³³ Dies betrifft viele Webseiten und wird zu mehr Barrierefreiheit führen. Zwar sind im entsprechenden Bericht³⁴ noch keine wesentlichen Verbesserungen zu beobachten, aber Drittanbieter für Barrierefreiheit, die in den Statistiken nicht berücksichtigt sind, gewinnen deutlich Reichweite. Ob diese die Barrierefreiheit tatsächlich erhöhen, darüber gibt es geteilte Meinungen. ^h
• ❌Preload Hints kommen seltener zum Einsatz. Es zeigt sich außerdem, dass 25% aller Seiten, die Preload Hints benutzen, mindestens eine Ressource davon vorladen, die später nicht gebraucht wird.³⁵

Ausblick

Ich freue mich schon auf die ausstehenden Kapitel; insbesondere JS, Medien, Privatsphäre und Page Weight dürften interessant werden. Ich aktualisiere diesen Post dann gegebenenfalls.