Veröffentlicht: 19. März 2025
T-Mobile ist ein führendes Telekommunikationsunternehmen in den USA mit einer umfassenden Netzabdeckung und schneller 5G-Konnektivität.
Durch die Analyse der Web Vitals echter Nutzer erkannte T-Mobile, dass Verbesserungen bei den Core Web Vitals sowohl die Nutzerfreundlichkeit als auch die Geschäftsmesswerte erheblich beeinflussen können.
Im Rahmen seiner kontinuierlichen Bemühungen, seine digitale Präsenz zu optimieren, hat T-Mobile die Core Web Vitals seiner Website verbessert, insbesondere den Largest Contentful Paint (LCP), um die Nutzerfreundlichkeit und damit die wichtigsten Geschäftsmesswerte zu verbessern.
Mit Daten die Aufmerksamkeit auf die Webleistung lenken
Da die Nutzerfreundlichkeit im Web immer wichtiger wird, haben die SEO- und Produktteams von T-Mobile eine gemeinsame Initiative gestartet, um die Leistung ihrer Website zu verbessern. Der erste Schritt bestand darin, die Core Web Vitals in den Mittelpunkt der Gespräche mit den Stakeholdern zu stellen und dafür zu sorgen, dass sie als vorrangig eingestuft wurden. Das ist eine Herausforderung, mit der Entwicklungsteams in vielen Unternehmen häufig konfrontiert sind.
Um dieses Problem anzugehen, hat T-Mobile eine datengetriebene Strategie entwickelt. Da sie sich bewusst waren, dass Lab-Daten aus Lighthouse und Daten aus Chrome UX-Berichten (CrUX) nur einen Teil der Leistung widerspiegeln, haben sie die Web Vitals JavaScript-Bibliothek in die Web-Properties von T-Mobile eingebunden, um Leistungsdaten von echten Nutzern direkt zu erfassen und zu analysieren. Diese Daten werden auch als Felddaten bezeichnet.
Durch die Einbindung von Core Web Vitals-Daten aus dem Feld in die Analysesuite konnte T-Mobile mehrere nützliche Datenpunkte ermitteln, darunter:
- Auswirkungen auf die Nutzerfreundlichkeit: Besucher von T-Mobile.com sind eher bereit, die Website zu verlassen, wenn Seiten länger zum Laden brauchen.
- Auswirkungen auf das Unternehmen: Die Conversion-Raten auf T-Mobile.com sinken, wenn Seiten länger zum Laden brauchen.
Die Daten zeigten deutlich, wie die Leistung der T-Mobile-Website und ihre Geschäftsmesswerte zusammenhängen.
Durch die Schätzung der Umsatzauswirkungen in 100-Millisekunden-Segmenten des LCP konnte das Team die Aufmerksamkeit der Führungsebene auf sich ziehen und eine funktionsübergreifende Taskforce zur Verbesserung der Leistung der Website ins Leben rufen. Durch die Präsentation klarer Daten und die Messung der Möglichkeiten haben die SEO- und Produktteams von T-Mobile effektiv vermittelt, wie wichtig die Verbesserung der Core Web Vitals ist.
Verbesserungen der Webleistung skalieren, um die bestmögliche Wirkung zu erzielen
Um die Leistungsherausforderungen umfassend anzugehen, hat das T-Mobile-Team eine Reihe von technischen Verbesserungen unter Berücksichtigung der Skalierbarkeit vorgenommen. Dabei lag der Schwerpunkt auf der Optimierung wichtiger Komponenten und der Nutzung von Technologien, um nachhaltige Leistungssteigerungen auf allen digitalen Plattformen zu erzielen.
Auswirkungen auf die Kundenzufriedenheit
Die Bemühungen zur Verbesserung der Websiteleistung haben zu einer Verringerung des LCP (Largest Contentful Paint) um 42% geführt:
Diese Verbesserung hatte mehrere positive Auswirkungen auf die Nutzerfreundlichkeit:
Auswirkungen auf das Geschäft
Die kürzeren Seitenladezeiten trugen auch zu einem effizienteren Kaufvorgang bei. Die Conversion-Rate von potenziellen Kunden mit Kaufabsicht verbesserte sich im selben Zeitraum um 60 %.
Wichtige Leistungsverbesserungen, die T-Mobile voranbrachten
Im Folgenden finden Sie eine detaillierte Liste der wichtigsten Initiativen und ihrer Auswirkungen:
API-Caching und -Refactoring
APIs, einschließlich der Produkte- und Angebots-APIs, wurden im Cache gespeichert und umstrukturiert, um die Antwortzeiten zu verbessern und die Serverlast zu reduzieren. Das Offloading auf ein Content Delivery Network (CDN) zur Caching-Optimierung hat zu diesen Verbesserungen erheblich beigetragen.
Statische Assets im Cache speichern
Statische Assets wie JavaScript, Stylesheets und Clientbibliotheken wurden im Cache gespeichert, um die Ladezeiten zu verkürzen. Durch die Verwendung von CDN-Caching und optimierten Cache-Einstellungen wurde die Bereitstellungsgeschwindigkeit verbessert und die Serverlast reduziert. Diese Optimierung spielte eine entscheidende Rolle bei der Verbesserung der Gesamtleistung der Website.
Optimierung von Bildkomponenten
Das Team optimierte die Bildkomponenten, indem es die Bildgrößen reduzierte, moderne Bildformate wie WebP verwendete und responsive Bilder implementierte, um die beste Qualität bei der kleinsten Dateigröße zu erzielen.
Komponenten vorab laden und vorab abrufen
Wichtige Ressourcen wurden vorab geladen und vorab abgerufen, damit sie bei Bedarf sofort verfügbar waren. Dadurch wurden die Wartezeiten für Nutzer verkürzt und die Seitenladezeiten verbessert.
Vorabverbindungen zu wichtigen Domains und Verbesserungen des Anti-Flicker-Scripts
Das Team implementierte Preconnects zu kritischen Domains, um frühzeitig Verbindungen herzustellen und so die Latenz beim Abrufen von Ressourcen zu verringern. Außerdem wurde das Anti-Flicker-Script verbessert, um das Flackern von Inhalten zu minimieren und die Nutzerfreundlichkeit zu erhöhen.
Migration zur Adobe Experience Manager-Plattform (AEM)
Das Team migrierte zu einer neueren Version seiner Frontend-Plattform, die bessere Leistungsfunktionen und Infrastrukturverbesserungen bot.
Migration von Angular-Komponenten zu AEM-Factory-Komponenten
Angular-Komponenten wurden zu Adobe Experience Manager (AEM)-Standardkomponenten migriert, um die Architektur zu optimieren und die Leistung und Wartbarkeit zu verbessern.
Wichtige Optimierungen für Landingpages
Zu den Verbesserungen gehören die Optimierung von Bildkarussells, die Verwendung des Adobe WebSDK, die Verlängerung der Cachezeit für dynamische Medien, die Komprimierung von Nutzlasten und die Aktualisierung von Bilddesigns, um die Ladezeiten und die Nutzerfreundlichkeit zu verbessern.
Reduzierung von Fehlern in APIs
Das Team konnte die Fehler auf mehreren wichtigen E-Commerce-Seiten reduzieren und so eine zuverlässigere Datenübermittlung und verbesserte Nutzerinteraktionen erreichen.
Eine Kultur der Webleistung fördern, indem Daten demokratisiert werden
Um die hervorragende Webleistung beizubehalten, hat T-Mobile unternehmensweit mehrere wichtige Maßnahmen implementiert. Mit diesen Initiativen möchten wir den Zugriff auf Leistungsdaten demokratisieren, unser Team schulen und einbinden, Core Web Vitals proaktiv überwachen und Leistungsstandards für alle Codeversionen durchsetzen. In den folgenden Strategien wird beschrieben, wie sie eine Kultur der Webleistung fördern, indem sie Daten zugänglich machen, kontinuierliches Lernen fördern und robuste Governance-Praktiken einführen.
Core Web Vitals-Daten für alle zugänglich machen
T-Mobile nutzte robuste Looker Studio-Dashboards, um Leistungsdaten für alle Mitglieder der Organisation zugänglich zu machen. Außerdem gibt es ein umfassendes Wiki zur Webleistung, in dem Teammitglieder lernen, Core Web Vitals-Berichte effektiv zu interpretieren und zu nutzen.
Looker Studio-Dashboard von T-Mobile mit Echtzeitmesswerten für Core Web Vitals Von links nach rechts:
- Geschwindigkeitsmesser: Der 75. Perzentil aller LCP-Ereignisse, die im ausgewählten Zeitraum erfasst wurden.
- Liniendiagramm: Der tägliche Trend der Werte des 75. Perzentils im ausgewählten Zeitraum.
- Kreisdiagramm: Prozentuale Verteilung der Bewertungen „Gut“, „Optimierung erforderlich“ und „Schlecht“ im ausgewählten Zeitraum.
- Gestapeltes Liniendiagramm: Der tägliche Trend der prozentuale Verteilung der Bewertungen „Gut“, „Optimierung erforderlich“ und „Schlecht“ im ausgewählten Zeitraum.
Kontinuierliche Weiterbildung und Engagement
Der Produkt- und SEO-Manager veranstaltet regelmäßig Roadshows zur Webleistung und Wissenstransfer-Veranstaltungen. Diese Initiativen informieren und engagieren das gesamte Team und fördern ein kontinuierliches Engagement für eine hervorragende Webleistung.
Benachrichtigungssystem für Core Web Vitals
Es wurde ein Benachrichtigungssystem eingerichtet, um die Core Web Vitals für verschiedene Seitengruppen zu überwachen. Wenn die Core Web Vitals einen bestimmten Grundwert erreichen, wird automatisch eine E-Mail-Benachrichtigung an die entsprechenden Stakeholder gesendet.
Leistungsanforderungen für Code-Releases
T-Mobile hat auch Leistungsanforderungen für Code-Releases festgelegt. Seiten müssen bestimmte Leistungsniveaus in Lighthouse erreichen, bevor sie veröffentlicht werden können. So wird sichergestellt, dass hohe Standards für die Webleistung eingehalten werden.
Durch die Implementierung dieser Maßnahmen kann T-Mobile dafür sorgen, dass die Webleistung weiterhin eine Priorität bleibt und eine Kultur der kontinuierlichen Verbesserung gefördert wird.
Danksagungen
Vielen Dank an alle, die an der Leistung der T-Mobile-Website und an dieser Fallstudie mitgewirkt haben: Kevin Lau, Monique Misrahi, Bill Dinger, Laura Mathisen, Suresh Gundu, Duke Fong, Amir Mohammadi, Liang Yeh, Jennifer Panke, Julia Edgar, Ejaz Malik, Damon Jochum, Will Fraley, Gene McKenna, Vinayak Hegde und Warren McNeel.
Diese Fallstudie wurde in Zusammenarbeit zwischen T-Mobile und seinen Kundenlösungspartnern bei Google, Ilya Motamedi, Dakota Deady und Christine Zanedis, entwickelt. Ihre Erkenntnisse und Unterstützung trugen zum Erfolg dieser Initiative bei.