Das Team analysierte die Daten von zehn Millionen Besuchen auf den Landingpages und stellte einen starken Zusammenhang zwischen Largest Contentful Paint und der Conversion-Rate fest.
Die Renault Gruppe ist ein französischer multinationaler Automobilhersteller mit einer Präsenz in über 130 Ländern. Für einen Automobilkonzern wie Renault bedeuten leistungsfähige Markenwebsites, die mehr Nutzerinteraktionen und Conversions fördern, mehr Umsatz. Das Ziel aller Markenwebsites ist es, die bestmögliche Nutzererfahrung in großem Umfang zu bieten und gleichzeitig die Flexibilität von Inhalten und Funktionen für lokalisierte Websites zu wahren. In diesem Zusammenhang ist die Leistungsüberwachung ein wichtiges Anliegen des Customer-Experience-Teams, das für die Entwicklung und Wartung der globalen Plattform verantwortlich ist.
Geschäftliche Auswirkungen von Core Web Vitals messen
Analysen in Google Analytics
Gemeinsam mit dem globalen Datenpartner „55“ hat Renault die Bibliothek web-vitals eingerichtet. Damit können alle Web Vitals-Messwerte echter Nutzer an Google Analytics gesendet werden. Sie entsprechen genau den Daten, die von Chrome erfasst und an andere Google-Tools gesendet werden.
Die folgende Analyse zeigt ein Dataset, das zwischen Dezember 2020 und März 2021 über einen Zeitraum von vier Monaten mit diesen Tools erfasst wurde.
Der optimierte LCP steht in engem Zusammenhang mit Nutzerinteraktionen und Unternehmensmesswerten
Die Teams konnten eine besonders starke Korrelation zwischen einem niedrigen Largest Contentful Paint (LCP) und günstigen Absprungraten und Conversion-Raten feststellen (siehe folgende Visualisierung).
Das Dataset erfasst über einen Zeitraum von vier Monaten mehr als 10 Millionen Besuche in 33 Ländern und zeigt, wie die Werte für den niedrigen LCP-Wert korrelieren mit:
- Niedrigere Absprungraten
- Mehr Conversions (ausgefüllte Lead-Formulare)
Interessanterweise werden alle diese Maßnahmen nur auf den Landingpages erfasst, da die Website als Single-Page Application (SPA) ausgeführt wird. Die Daten zeigen, dass es sich lohnt, die Website so lange zu optimieren, bis der LCP unter einer Sekunde liegt. Die Markenwebsites der Gruppe können nie zu stark optimiert werden!
Dieses Dataset zeigt nicht nur die negative Korrelation zwischen LCP und Unternehmensmesswerten, sondern auch Leistungsabweichungen zwischen den leistungsstärksten Landingpages. Im Kontext dieser Website führt ein LCP-Wert unter einer Sekunde zu einem deutlichen Anstieg der Conversions und einer Reduzierung der Absprünge.
Eja Rakotoarimanana, Beraterin, 55
Eine Verbesserung des LCP-Werts um eine Sekunde kann zu einer Senkung der Absprungrate um 14 Prozentpunkte (Prozentpunkte) und zu einem Anstieg der Conversions um 13% führen.
| LCP-Verbesserung um 1 Sekunde | Ergebnis |
|---|---|
| LCP etwa 1 s | +13% CVR |
| LCP unter 1,6 s | -14 Prozentpunkte Absprungrate |
| LCP über 1,6 s | Absprungrate: -5 Prozentpunkte |
Renaults Ansatz zur umfassenden Optimierung von Core Web Vitals
Seit Anfang 2020 hat sich in den fünf wichtigsten europäischen Märkten des Unternehmens die Zahl der Besucher mit einem schnellen LCP-Wert (unter 2,5 Sek.) um durchschnittlich 22 %% für Renault-Domains verbessert (von 51 % auf 73 %).
Hier ist die Vorgehensweise.
Eine zentrale Optimierung der SPA
Aus Sicht der Plattform steht die Leistung schon seit Jahren an erster Stelle. Die Einbindung von Core Web Vitals, da wichtige Messwerte erfasst werden, verlief nun reibungslos. Zentrale Teams haben mit Google Lighthouse und der Chrome UX Report API eine umfassende Überwachungslösung eingerichtet und eine Leistungskultur im gesamten Unternehmen geschaffen. Es gab mehrere Strategien zur Optimierung der Single-Page-App:
- Serverseitiges Rendering (SSR) für einen schnellen First Contentful Paint (FCP)
- Codeaufteilung, damit nur die JS- und CSS-Blöcke bereitgestellt werden, die für die Landingpage erforderlich sind (zur Verbesserung von LCP und FID).
- CDN mit einem hohen Ressourcen-Caching (einschließlich Lambda@Edge zum Sortieren und Entfernen unnötiger Abfrageparameter). Dadurch wurden die Nachteile von SSR (langsamere TTFB aufgrund von Server-Berechnungen) vermieden und Inhalte näher am Endnutzer bereitgestellt (für bessere TTFB und LCP).
- Komprimierung mit Brotli optimieren, um die Codegröße zu reduzieren.
- HTTP2, um Multiplexing von Anfragen und Antworten zu ermöglichen.
- Verwenden Sie responsive Bilder mit WebP-Unterstützung und
srcset- undsizes-Attributen, damit Nutzern die am besten geeignete Bildgröße und -formatierung angezeigt wird. - Lazy Loading von Bildern, Videos und iFrames mit
IntersectionObserverund FPOs (kleine Miniaturansichten mit je 1 KB). - Entfernen Sie Blockierskripts und passen Sie die Transpilation in Browserziele an, um die Größe der JS-Dateien zu verringern und unnötige Polyfills zu vermeiden.
- Verringern Sie die Größe des Google Tag Manager-Containers, um Drittanbieter-Skripts nur dort und bei Bedarf zu laden.
- Reduzierung der Anzahl benutzerdefinierter Schriftarten, Verwendung von WOFF/Woff2-Formaten mit Unicode-Bereich und
font-display:swap, um Schriftgrößen zu verringern und Text so schnell wie möglich anzuzeigen, selbst wenn noch keine benutzerdefinierten Schriftarten verfügbar sind. - Hero-Images vorab laden, bei denen es sich häufig um LCP-Elemente handelt
Das Team arbeitet noch an zukünftigen Verbesserungen, darunter:
- Server-Push zur Verbesserung von FCP durch eine schnellere Bereitstellung von CSS (Im Stand-by-Modus aufgrund fehlender AWS-Unterstützung und Einstellungsvorschlag.
- Progressive Flüssigkeitszufuhr zur Verbesserung der FID.
- Unterstützung des ES6-Moduls für schnelleres Arbeiten durch die Verwendung von ES6-Builds für moderne Browser
Der SPA-Ansatz kann sich positiv auf die Leistung auswirken, da die vollständige Seitenaktualisierung nicht erforderlich ist, wenn Nutzende zwischen Seiten wechseln. Die aktuellen Core Web Vitals-Messmethoden für SPA können jedoch als Nachteil empfunden werden, da keine Routenübergänge gemessen werden. Daher werden vergleichsweise schnellere Seitenladevorgänge innerhalb einer Sitzung aufgrund von UI-Caching nicht berücksichtigt. Außerdem ist es schwierig, Core Web Vitals mit der Website eines Konkurrenten für mehrseitige Anwendungen zu vergleichen, bei der ein warmer Cache die Messungen für jede Seite reduziert, die ein Nutzer während einer Sitzung besucht. Weitere Informationen finden Sie in den häufig gestellten Fragen zu Web Vitals SPA.
Dies sind bekannte Einschränkungen, die derzeit von den Chrome-Produktteams untersucht werden. Es wurde bereits ein Update für den CLS-Messwert veröffentlicht, um die Analyse von SPAs zu verbessern.
Die Leistung erfordert eine ständige Überwachung, da verschiedene technische Teams sie beeinflussen können. Obwohl es Einschränkungen bei der Messung bei SPAs gibt, können wir mit Core Web Vitals die Auswirkungen der Maßnahmen unserer Teams erfassen. Routenübergänge werden hoffentlich schon bald berücksichtigt.
Cedric Bazureau, Tech Lead, Renault
Lokale Richtlinien, die die Leistungsoptimierung als gemeinsame Verantwortung fördern
Leistung wird sowohl als globale (zentrale) als auch lokale Verantwortung kommuniziert. Teams haben eine Reihe von Best Practices zusammengestellt, die Inhaber lokaler Inhalte befolgen sollen. Hier einige Beispiele aus diesen Richtlinien:
- Optimieren Sie den lokalen Google Tag Manager-Container, um die Websiteleistung zu verbessern. Sie können beispielsweise bestimmte Tags bedingt auslösen.
- Begrenzen Sie die Größe von Videoinhalten, indem Sie sie mit internen Tools komprimieren oder auf einer externen Plattform wie YouTube hosten.
- Laden Sie keine Bilder über Google Tag Manager hoch.
Damit wir unsere Markenwebsites kontinuierlich optimieren können, ist es wichtig, ein tiefgreifendes Verständnis unserer digitalen Leistung zu erlangen. Unser Ansatz für das Customer-Experience-Team ist es, eine globale Plattform bereitzustellen, die sich positiv auf die Geschäftsergebnisse der lokalen Teams auswirkt und diese Teams mit Richtlinien und Best Practices unterstützt, um diese Leistung auf einem hohen Niveau aufrechtzuerhalten.
Alexandre Perruche, Head of Performance, Renault
Zusammenfassend lässt sich sagen, dass die Websiteleistung bei Renault immer oberste Priorität hat und die Websiteplattform kontinuierlich optimiert wird. Die Messung von Core Web Vitals und Unternehmensmesswerten hat dazu geführt, dass dieses Thema weltweit als gemeinsame Verantwortung wahrgenommen wird. Lokale Richtlinien geben Teams die Möglichkeit, sich von diesem Vorhaben zu überzeugen.