NDTV verbesserte die Nutzererfahrung und damit die Kundenbindung durch eine Optimierung für Web Vitals.
NDTV ist einer der führenden Nachrichtensender und Websites Indiens. Mithilfe des Programms Web Viitals konnte einer der wichtigsten Nutzermesswerte, Largest Contentful Paint (LCP), in nur einem Monat um 55% verbessert werden. Dies korrelierte mit einer Senkung der Absprungraten um 50 %.
55%
Verbesserung des LCP
50 %
geringere Absprungraten
Hervorhebung der Chance
Mit fast 200 Millionen einzelnen Nutzern pro Monat war es für NDTV entscheidend, die Qualität der Nutzererfahrung zu optimieren. Obwohl die Engagement-Raten weit über dem Branchendurchschnitt lagen und am höchsten waren, sah das NDTV-Team dennoch Raum für Verbesserungen und beschloss, in Web Viitals sowie weitere Produktänderungen zu investieren, um die Engagement-Raten weiter zu verbessern.
Die Strategie
Mithilfe von Tools wie PageSpeed Insights, web.dev/measure und WebPageTest hat das NDTV-Team potenzielle Verbesserungsbereiche auf der Website analysiert. Dank dieser klar definierten Optimierungsideen konnte das Team wichtige Aufgaben neu priorisieren und die Core Web Vitals unmittelbar verbessern. Enthaltene Optimierungen:
- Priorisieren Sie den größten Inhaltsblock, indem Sie Anfragen von Drittanbietern verzögern. Dazu gehören Anzeigenaufrufe für Anzeigenflächen „below the fold“ (mit Scrollen sichtbar) und eingebettete Inhalte in sozialen Netzwerken, die auch „below the fold“ (mit Scrollen sichtbar) sind.
- Erhöhung des Cachings statischer Inhalte von einigen Minuten auf 30 Tage.
-
Verwende
font-display
, um Text schneller anzuzeigen, während Schriftarten heruntergeladen werden. - Verwendung von Vektorgrafiken für Symbole anstelle von TrueType Fonts (TTF).
- Lazy Loading JavaScript und CSS: Laden der Seite mit dem Minimum an JavaScript und CSS und dann das Lazy Loading des verbleibenden JS und CSS beim Scrollen der Seite.
- Vorabverbindung mit Ursprüngen, die wichtige Assets liefern.
![Zusammenfassung der Optimierungen: Largest Contentful Paint, Caching, CSS, Vektorgrafiken, langsam geladenes JS und CSS, Vorverbindung.](https://web.dev/static/case-studies/ndtv/image/a-summary-the-optimizati-b938d496646d5.png?authuser=6&hl=de)
Auswirkungen
Mit Web Vitals war das Team mit messwertbasierten Signalen ausgestattet, um den Prozess zur Verbesserung der Nutzerfreundlichkeit zu beschleunigen.
Vor Beginn des Optimierungsprojekts legte das NDTV-Team den LCP-Wert auf 3, 0 Sekunden fest (für das 75.Perzentil der Nutzer, basierend auf den Felddaten im Bericht zur Nutzererfahrung in Chrome). Nach dem Optimierungsprojekt waren es nur 1, 6 Sekunden. Außerdem wurde der Cumulative Layout Shift (CLS)-Wert auf 0,05 gesenkt. Andere Messwerte auf WebPageTest wie „First Byte Time“ und „Effective use of CDN“ wurden zu einer A-Stufe verbessert.
![CLS-Wert von 0,05.](https://web.dev/static/case-studies/ndtv/image/005-cls-score-63ecddcee9427.png?authuser=6&hl=de)
Return on Investment
Trotz der Komplexität und Intensität von ndtv.com erzielte die Website bereits gute FID- und CLS-Werte, da sich das Team seit Langem auf Leistung und Best Practices für die Nutzerfreundlichkeit konzentriert. Um die Nutzererfahrung weiter zu verbessern, konzentrierte sich das Team auf LCP und konnte den Grenzwert innerhalb weniger Wochen nach Beginn der Optimierungsarbeiten erreichen.
Geschäftsergebnisse insgesamt
- 55% Verbesserung des LCP-Werts durch Optimierung für Core Web Vitals
- Nach der Optimierung für Core Web Vitals und weiterer Produktänderungen konnte die Absprungrate auf der Website um 50% gesenkt werden.
- Mehr Interaktionen und eine direkte Nutzung von Inhalten sowie proportional höhere Umsätze für die Website des Unternehmens.
![55% Verbesserung des LCP. Reduzierung der Absprungrate um 50 %. Mehr Engagement und Verbrauch.](https://web.dev/static/case-studies/ndtv/image/55-improvement-lcp-50-bbfb39b0c8352.png?authuser=6&hl=de)
NDTV verfolgt seit Langem Best Practices, um eine erstklassige User Experience zu bieten. Wir betrachten die Messung von Web Vitals als wesentlichen Bestandteil unserer Produktentwicklung. Dank der Steigerung der Interaktionen erzielen wir damit einen guten ROI.
Kawaljit Singh Bedi, Chief Technology and Product Officer, NDTV Group
Auf der Seite Scale on Web – Fallstudien finden Sie weitere Erfolgsgeschichten aus Indien und Südostasien.