Zespół przeanalizował dane z 10 milionów wizyt na stronach docelowych i odkrył silną zależność między największym wyrenderowaniem treści a współczynnikiem konwersji.
Groupe Renault to francuska firma działająca w ponad 130 krajach. W przypadku koncernu motoryzacyjnego, takiego jak Renault, efektowne strony marki, które generują większe zaangażowanie użytkowników i liczbę konwersji, przekładają się na większą sprzedaż. Wszystkie witryny marki mają na celu zapewnienie użytkownikom jak najlepszych wrażeń na dużą skalę przy zachowaniu elastyczności treści i funkcji zlokalizowanych witryn. W tym kontekście monitorowanie wydajności jest kluczowe dla zespołu ds. wrażeń klientów, który zajmuje się opracowywaniem i utrzymywaniem globalnej platformy.
Pomiar wpływu podstawowych wskaźników internetowych na firmę
Pomiary w Google Analytics
We współpracy z 55 globalnym dostawcą danych firma Renault stworzyła bibliotekę web-vitals, która umożliwia przesyłanie do Google Analytics wszystkich wskaźników internetowych od rzeczywistych użytkowników w sposób dokładnie zgodny ze sposobem, w jaki są one mierzone przez Chrome i raportowane innym narzędziom Google.
Poniższa analiza prezentuje zbiór danych przechwycony za pomocą tych narzędzi w ciągu 4 miesięcy między grudniem 2020 r. a marcem 2021 r.
Zoptymalizowany LCP jest silnie powiązany z zaangażowaniem użytkowników i danymi biznesowymi
Zespoły zidentyfikowały szczególnie silną zależność między niskim wyrenderowaniem treści (LCP) a korzystnymi współczynnikami odrzuceń i współczynnikami konwersji, co widać na poniższej wizualizacji.
Zbiór danych obejmuje ponad 10 milionów wizyt w 33 krajach w ciągu 4 miesięcy i pokazuje, jak niższe wskaźniki LCP mają się do:
- Niższe współczynniki odrzuceń
- Więcej konwersji (wypełnione formularze kontaktowe)
Co ciekawe, witryna działa jako aplikacja jednostronicowa (SPA), więc wszystkie te dane są odnotowywane tylko na stronach docelowych. Dane wskazują, że warto optymalizować witrynę, aż wskaźnik LCP spadnie poniżej 1 sekundy. Witryny marek grupy nigdy nie mogą być zbyt zoptymalizowane.
Ten zbiór danych nie tylko pokazuje ujemną korelację między LCP a danymi biznesowymi, ale także podkreśla rozbieżności w skuteczności stron docelowych o największej skuteczności. W kontekście tej witryny pomiar LCP poniżej 1 sekundy prowadzi do znacznego wzrostu liczby konwersji i zmniejszenia liczby odrzuceń.
Eja Rakotoarimanana, konsultantka, pięćdziesiąt pięć lat
Wzrost LCP o 1 s może spowodować spadek współczynnika odrzuceń o 14 punktów procentowych (ppt) i wzrost liczby konwersji o 13%.
| Poprawa LCP o 1 sekundę | Wyniki |
|---|---|
| LCP: około 1 s | CVR o 13% |
| LCP poniżej 1,6 s | -14 ppt – współczynnik odrzuceń |
| LCP powyżej 1,6 s | Współczynnik odrzuceń -5 ppt |
Podejście Renault do optymalizacji podstawowych wskaźników internetowych na dużą skalę
Od początku 2020 roku na 5 najważniejszych rynkach europejskich marki liczba użytkowników z szybkim wynikiem LCP (poniżej 2,5 s) wzrosła średnio o 22 pkt.w przypadku domen Renault (z 51% do 73%).
Oto jak do tego podeszli.
Centralna optymalizacja SPA.
Z punktu widzenia platformy wydajność od lat jest priorytetem, a uwzględnianie podstawowych wskaźników internetowych nie sprawiało problemów. Zespoły centralne opracowały kompleksowe rozwiązanie do monitorowania (z użyciem Google Lighthouse i Chrome UX Report API) oraz ukształtowały kulturę wydajności w całej organizacji. Istnieje kilka strategii optymalizacji aplikacji jednostronicowej, w tym:
- Renderowanie po stronie serwera (SSR) w celu zapewnienia szybkiego pierwszego wyrenderowania treści (FCP).
- Dzielenie kodu – umożliwia przesyłanie tylko fragmentów JS i CSS potrzebnych w przypadku strony docelowej (poprawa LCP i FID).
- CDN z wysokim poziomem buforowania zasobów (w tym Lambda@Edge do sortowania i usuwania zbędnych parametrów zapytania). Pomogło to uniknąć wad SSR (wolniejszego TTFB z powodu obliczeń serwera) i dostarczenia treści bliżej użytkownika (poprawa TTFB i LCP).
- Optymalizowanie kompresji za pomocą brotli w celu zmniejszenia rozmiaru kodu.
- HTTP2, aby umożliwić multipleksowanie żądań i odpowiedzi.
- Używaj obrazów elastycznych w połączeniu z obsługą WebP oraz atrybutami
srcsetisizes, aby wyświetlać użytkownikom obraz w najodpowiedniejszym rozmiarze i formacie. - Leniwe ładowanie obrazów, filmów oraz elementów iframe z użyciem obiektów
IntersectionObserveri FPO (małych miniatur o rozmiarze 1 KB). - Usunięcie skryptów blokujących i dostosowanie transpilacji do celów w przeglądarkach, aby zmniejszyć rozmiar plików JS (dzięki czemu unikniesz zbędnych elementów polyfill).
- Zmniejszenie rozmiaru kontenera Menedżera tagów Google, by umożliwić wczytywanie skryptów innych firm tylko w razie potrzeby i w razie potrzeby.
- Zmniejszenie liczby czcionek niestandardowych, używanie formatów Woff/Woff2 z zakresem unicode oraz
font-display:swap, aby zmniejszyć rozmiar plików czcionek i jak najszybciej wyświetlać tekst, nawet jeśli czcionki niestandardowe nie są jeszcze dostępne. - Wstępne wczytywanie banera powitalnego, które często są elementami LCP.
Zespół nadal pracuje nad usprawnieniami, takimi jak:
- Przekazywanie danych z serwera, aby poprawić FCP przez szybsze dostarczanie CSS. (w trybie gotowości z powodu braku obsługi AWS i propozycji wycofania).
- Progresywne nawodnienie poprawiające FID.
- obsługę modułu ES6 w celu zwiększenia szybkości działania dzięki kompilacjom ES6 z myślą o nowoczesnych przeglądarkach;
Podejście SPA może być korzystne dla wydajności, ponieważ pełne ponowne wczytywanie strony nie jest konieczne, gdy użytkownicy przechodzą między stronami. W przypadku SPA obecne metodologie pomiaru podstawowych wskaźników internetowych mogą być postrzegane jako wada, ponieważ przejścia tras nie są mierzone. Dlatego stosunkowo szybsze wczytywanie stron w ramach sesji z powodu buforowania interfejsu użytkownika nie jest brane pod uwagę. Trudno też porównywać podstawowe wskaźniki internetowe z konkurencją konkurencyjnej witryny korzystającej z wielu stron, w której ciepła pamięć podręczna zmniejszyłaby wskaźniki dotyczące każdej strony przeglądanej przez użytkownika podczas sesji. Więcej informacji znajdziesz w najczęstszych pytaniach na temat SPA w Wskaźnikach internetowych.
Oto znane ograniczenia, które są obecnie analizowane przez zespoły Chrome dotyczące usługi Chrome. Wprowadziliśmy już aktualizację danych CLS w celu ulepszenia pomiarów w SPA.
Wydajność wymaga ciągłego monitorowania, ponieważ mogą na nią wpływać różne zespoły techniczne. Podstawowe wskaźniki internetowe pozwalają nam śledzić wpływ działań podejmowanych przez nasze zespoły niezależnie od ograniczeń w sposobie ich pomiaru. Mamy nadzieję, że zmiany tras zostaną wkrótce uwzględnione.
Cedric Bazureau, kierownik ds. technicznych, Renault
Lokalne wytyczne promujące optymalizację skuteczności jako wspólna odpowiedzialność
Wydajność jest przekazywana w ujęciu globalnym (centralnym) i lokalnym. Zespoły przygotowały serię sprawdzonych metod, których muszą przestrzegać właściciele treści lokalnych. Oto kilka przykładów:
- Optymalizuj lokalny kontener Menedżera tagów Google, by poprawić wydajność witryny. Możesz na przykład warunkowo aktywować określone tagi.
- Ogranicz rozmiar treści wideo, skompresując ją przy użyciu narzędzi wewnętrznych lub hostując na platformie zewnętrznej (np. YouTube).
- Unikaj przesyłania obrazów przez Menedżera tagów Google.
Dogłębna analiza skuteczności cyfrowej reklamy jest kluczem do ciągłej optymalizacji witryn naszych marek. Nasz zespół ds. wrażeń klientów dostarcza globalną platformę, która pozytywnie wpływa na wyniki biznesowe zespołów lokalnych, a jednocześnie przekazuje tym zespołom wytyczne i sprawdzone metody, które pozwalają utrzymać wysoką wydajność na wysokim poziomie.
Alexandre Perruche, dyrektor ds. skuteczności, Renault
Podsumowując, wydajność strony internetowej zawsze była priorytetem firmy Renault, a platforma strony internetowej jest stale optymalizowana. Pomiar podstawowych wskaźników internetowych razem z danymi biznesowymi pozwolił firmie promować ten temat jako globalną odpowiedzialność, a lokalne wytyczne zapewniają zespołom możliwość udziału w tych działaniach.