Veröffentlicht: 10. Februar 2025
Haben Sie schon einmal die Implementierung einer modernen Webfunktion verschoben, weil Sie sich nicht sicher waren, ob sie von den Browsern Ihrer Nutzer unterstützt wird? Oder haben Sie schwere Polyfills länger als nötig verwendet? Sie sind nicht allein. Baseline gibt uns zwar klare Signale zur globalen Browserunterstützung, aber es fehlte ein wichtiges Puzzleteil: die Informationen dazu, welche Browser Ihre Nutzer tatsächlich unterstützen.
Das RUMvision-Team hat dieses Problem gelöst, indem es Baseline-Daten mit RUM-Daten (Real User Monitoring) kombiniert hat. Die Ergebnisse sind sehr interessant. Die Teams stellten fest, dass sie moderne Funktionen Monate früher als geplant einführen konnten. Einige Teams fanden heraus, dass sie polyfills verwalteten, die 97% ihrer Nutzer nicht einmal benötigten. Andere haben festgestellt, dass es sinnvoll war, die Implementierung neuer Funktionen zu verschieben, weil ihre Zielgruppe noch nicht bereit war.
Funktionsweise von Baseline und Browserunterstützung
Die Unterstützung einer Webfunktion ist an Browserversionen gebunden: Wenn eine Funktion in Browsern veröffentlicht wird, können Nutzer sie nutzen, indem sie ihren Browser aktualisieren. Die Baseline erfasst, wann eine Funktion in allen gängigen Browsern (Chrome, Edge, Firefox und Safari) eingeführt wurde. Sie wird dann mit einem blauen Symbol gekennzeichnet und auf „Neu verfügbar“ gesetzt. Nach 30 Monaten wird dieser Status in „Weitgehend verfügbar“ geändert.
Die Aktualisierungsmuster Ihrer Nutzer können sich jedoch stark von den globalen Durchschnittswerten unterscheiden. Durch das Erfassen der tatsächlichen Browserversionen Ihrer Nutzer kann RUMvision genau sehen, welcher Prozentsatz Ihrer Zielgruppe die einzelnen Funktionen unterstützt. So wird der Vergleichswert von einem allgemeinen Indikator zu einem praktischen Tool für Ihre spezifische Situation.
Browsernutzung im Web
Bei der Analyse von Millionen von Seitenaufrufen in verschiedenen Märkten (Dezember 2024) hat RUMvision klare Muster bei der Art und Weise gefunden, wie Nutzer Browserupdates erhalten:
- Chrome-, Edge- und Firefox-Updates werden schnell übernommen und erreichen in etwa drei Monaten oft eine Abdeckung von 95 %.
- Bei Safari dauert es viel länger – etwa 19 Monate, bis das gleiche Niveau erreicht ist, da es an Betriebssystemupdates gebunden ist.
- Chrome hat eine Besonderheit: Er erreicht schnell 95–98 %, verlangsamt sich dann aber und benötigt bis zu 23 Monate, um 99 % zu erreichen.
In Baseline werden zwar Hunderte von Funktionen erfasst, Sie konzentrieren sich aber wahrscheinlich auf bestimmte, die Sie verwenden möchten. Die Wartezeit für eine Funktion hängt davon ab, welcher Browser sie zuletzt unterstützt hat.
Wenn Chrome der letzte Browser war, der für eine Funktion benötigt wurde, um den Mindeststandard zu erreichen, und Ihre Zielgruppe hauptsächlich Chrome verwendet, wird sie die Funktion wahrscheinlich innerhalb weniger Monate nutzen können. Wenn Safari jedoch der letzte Browser ist, der die Unterstützung hinzufügt, kann es selbst dann, wenn alle anderen Browser schon vor Jahren bereit waren, 19 Monate dauern, bis Ihre Safari-Nutzer das erforderliche Betriebssystemupdate erhalten.
Die reale Welt sieht für jeden anders aus
Unsere Daten zeigen, wie stark die Unterstützung auf verschiedenen Websites variiert (Dezember 2024):
- Ein niederländischer Händler für Haushaltswaren:
- Baseline 2024-Funktionen: 34% Unterstützung
- Baseline 2023-Funktionen: 76% Unterstützung
- Weit verbreitete Funktionen: 95% Unterstützung
- Ein US-amerikanisches Technologie-Blog:
- Baseline 2024-Funktionen: 59% Unterstützung
- Baseline 2023-Funktionen: 89% Unterstützung
- Weit verbreitete Funktionen: 100% Unterstützung
- Eine Immobilienwebsite im Nahen Osten:
- Baseline 2024-Funktionen: 39% Unterstützung
- Baseline 2023-Funktionen: 74% Unterstützung
- Weit verbreitete Funktionen: 95% Unterstützung
Diese Unterschiede ergeben sich aus den Besuchern und deren Browserverhalten:
- Technisch versierte Nutzer aktualisieren ihre Geräte in der Regel schnell, während die allgemeine Öffentlichkeit oft bei älteren Versionen bleibt.
- Unterschiedliche Altersgruppen und Zielgruppen haben unterschiedliche Browsergewohnheiten und Geräte.
- Nutzer von Mobilgeräten und Computern greifen unterschiedlich auf Ihre Website zu.
- In einigen Regionen wird iOS bevorzugt, in anderen Android. Das wirkt sich darauf aus, wann Funktionen verfügbar werden.
Daher kann dieselbe Funktion in einem Technologieblog innerhalb weniger Monate sicher verwendet werden, auf einer E-Commerce-Website jedoch noch ein Jahr lang Fallbacks erfordern.
Baseline in RUMvision einbinden
Das RUMvision-Team wollte sichergehen, dass die Integration den Erwartungen der Entwickler entspricht und dass diese Informationen so präsentiert werden, wie sie es sich wünschen.
Er ging dabei aus zwei Perspektiven vor:
- Als Entwickler, die diese Informationen benötigen.
- Als Creator, die für die breitere Entwickler-Community entwickeln.
Wie viele Entwickler verwendet das Team regelmäßig Tools wie Can I Use und MDN-Supporttabellen. Daher wurde die Integration so angepasst, dass Informationen so präsentiert werden, dass der eigene Workflow optimiert und gleichzeitig die Anforderungen aller RUMvision-Nutzer erfüllt werden.
Mehrere Datenquellen kombinieren
Zuerst werden die neu veröffentlichten Webfeature-Daten automatisch importiert. Diese Funktionen werden dann in einem suchbaren und filterbaren Listeneintrag für RUMvision-Nutzer angezeigt.
Wenn Sie auf eine Webfunktion klicken, wird ein modales Fenster mit detaillierten Informationen zur Baseline und zum Zeitplan der Browserunterstützung geöffnet. Diese Ansicht wird durch zusätzliche Statistiken ergänzt:
- Ressourcen: Links zu MDN, Can I Use, W3C-Seiten, Informationen zu Browserversionen, Chrome-Status und web.dev-Artikeln.
- Zeitleiste für die Einführung der Baseline: Hier sehen Sie, wann die Unterstützung für ein Feature in den einzelnen Browsern implementiert wurde.
- MDN-Supporttabelle: Daten aus browser-compat-data mit detaillierten Informationen, ähnlich den Standardsupporttabellen der MDN.
- Bekannte Fehler: Aus demselben Datenpool extrahiert, um die verfügbaren Ressourcen zu ergänzen.
- KI-Assistent: Hilft bei der Interpretation von Supportstatistiken in gängigen Browsern.
Moderne Funktionen optimal nutzen
Der Vorteil der Kombination von Baseline mit Nutzerdaten besteht auch darin, moderne Webfunktionen zu nutzen. Für jede Funktion sehen Sie die Akzeptanzrate Ihrer Zielgruppe und können verfolgen, wie sie sich im Laufe der Zeit verändert. Das bedeutet, dass komplexe JavaScript-Lösungen im richtigen Moment durch native Browserfunktionen ersetzt werden. Sie können beispielsweise von folgenden Konten wechseln:
- JavaScript-basierte responsive Komponenten für Containerabfragen.
- JavaScript-Lazy-Loading-Bibliotheken, die die IntersectionObserver API für das native Lazy-Loading verwenden
- Frameworks mit Modals, die in die Popover API eingebunden sind (z. B. Bootstrap)
Anstatt 30 Monate auf den Status „Weitgehend verfügbar“ zu warten, können Sie fundierte Entscheidungen auf der Grundlage tatsächlicher Nutzungsdaten treffen. Sie wissen genau, wann Sie neue Funktionen veröffentlichen und wie Sie sie effektiv implementieren.
Echte Beispiele, echte Auswirkungen
Sehen wir uns als Beispiel eine Funktion an, die vor Kurzem den Baseline-Status erreicht hat: die CSS-Eigenschaft content-visibility:
- Bei einigen Websites war eine Unterstützung von 99% möglich, sodass sie sofort implementiert werden konnten.
- Andere hatten eine Unterstützung von 82–89 %, was auf die Notwendigkeit von Fallbacks hindeutet.
- Einige bestimmte Nutzersegmente wurden noch in älteren Browsern identifiziert.
content-visibility Zeitachse für eine US-amerikanische Technologiewebsite im Vergleich zu einer Immobilienmakler-Website im Nahen Osten.Die Daten zeigten auch, dass die Unterstützung in Safari für beide Funktionen von Februar 2024 bis September 2024 bei etwa 20 % blieb. Dies korreliert mit der Einführung von iOS 18 ab September 2024, mit der diese Funktion eingeführt wurde.
Kundenerfolg mit eigener Baseline „Weit verbreitet“
Anhand der Informationen aus Ihren eigenen RUM-Daten können Sie eine eigene Baseline erstellen. Diese enthält die Funktionen, die für Ihre eigene Website in vier Status verfügbar sind, und die Möglichkeit, sie zu filtern:
- Sofort lieferbar (wenn von mindestens 98% Ihrer Besucher unterstützt)
- Alles in Ordnung (Abdeckung durch Support zwischen 95% und 98%).
- Hinweis: Abdeckung zwischen 75% und 95 %.
- Gehen Sie vorsichtig vor (Abdeckung unter 75%).
Durch die Kombination ihrer RUM-Daten mit Baseline-Informationen pro Webfunktion konnten Nutzer bereits Erfolge erzielen. Informatiebord.nl entfernte 30 KB JavaScript-Polyfills, nachdem festgestellt wurde, dass 97% der Nutzer bereits native Funktionen unterstützten. Der Entwickler Kevin Meijer sagte:
„Mit Baseline können wir strategisch entscheiden: Konzentrieren wir uns darauf, 97% unserer Besucher eine perfekte Nutzererfahrung zu bieten, ohne die Leistung zu beeinträchtigen, oder verlangsamen wir die Innovation, um die verbleibenden 3 % zu berücksichtigen? Wir entscheiden uns bewusst für die erste Option, da zusätzliche Anstrengungen für diese 3% die Nutzererfahrung der Mehrheit negativ beeinflussen würden.“
Zum Web beitragen
Anhand von Baseline-Daten in Kombination mit den Erkenntnissen echter Nutzer können wir bessere Entscheidungen über die Unterstützung von Funktionen treffen. Wann Sie alten Code entfernen und wann Sie neue Funktionen einführen sollten – diese Entscheidungen werden klarer, wenn Sie wissen, was Ihre Nutzer tatsächlich unterstützen.
RUMvision gibt seine Erkenntnisse über die Akzeptanz von Browsern an die WebDX-Communitygruppe weiter, um zu ermitteln, wie schnell Funktionen den Status „Neu verfügbar“ in „Weitgehend verfügbar“ ändern.