Poznanie korelacji między skutecznością witryny a danymi biznesowymi było kluczem do sukcesu w optymalizacji.
Firma sala to odnosząca sukcesy firma zajmująca się sprzedażą odnowionych telefonów. Przez kilka lat priorytetowo dodawane były nowe funkcje, a nie wydajność witryny. Jednak gdy zauważyli, że wyniki biznesowe w witrynie mobilnej są w tyle w stosunku do wersji na komputery, nastąpiła zmiana. Skupiła się na optymalizacji skuteczności i wkrótce odnotowała wzrost przychodów z reklam mobilnych.
42%
Wzrost przychodów użytkowników korzystających z urządzeń mobilnych
10pp*
*punkt procentowy względny wzrost mCVR
Podkreślenie możliwości
Względny współczynnik konwersji z urządzeń mobilnych (względny mCvR) to iloraz współczynnika konwersji z urządzeń mobilnych i współczynnika konwersji z komputerów. Jest wiele możliwości śledzenia danych o szybkości, ale powiązanie ich z danymi biznesowymi może być dość trudne. Ponieważ te same kampanie i sezonowość wyświetlają się zarówno na urządzeniach mobilnych, jak i na komputerach, dane względnego mCVR odjmują wpływ tych parametrów zewnętrznych i pokazują tylko, czy witryna mobilna się poprawia.
Średnia wartość dla 10 największych witryn e-commerce w Stanach Zjednoczonych to względny mCvR na poziomie 50%, ale wskaźnik Zmień wyniósł 24%. To oznaczało, że strona mobilna miała problemy i że firma traciła przychody, co doprowadziło do rozpoczęcia projektu poprawy wydajności.
Pomiar wpływu zmian skuteczności
Firma Zamieńpie korzystała z Google Analytics do skonfigurowania dziennego śledzenia wartości względnego współczynnika mCvR i średniego czasu wczytywania strony na urządzeniach mobilnych za pomocą tego szablonu arkusza kalkulacyjnego. (Przeczytaj instrukcje, jak korzystać z tego arkusza kalkulacyjnego). Zaczęli też śledzić podstawowe wskaźniki internetowe w Google Analytics i BigQuery. Po wdrożeniu śledzenia deweloperzy zaczęli pracować nad wydajnością witryny.
Po zaledwie 3 miesiącach pracy efekty były wyraźne: mCVR spadł z 24% do 34%, a przychody z urządzeń mobilnych wzrosły o 42%.
23%
Krótszy średni czas wczytywania strony
55%
Niższy LCP
o 91%
Niższa wartość CLS
90%
Niższy FID
Optymalizacje
Optymalizacja pod kątem LCP i CLS
Zespół programistyczny firmy Virginie stwierdził, że wiele możliwości można poprawić w przypadku drobnych elementów, które przez długi czas były pomijane. Badanie witryny na różnych widocznych obszarach i w różnych językach pokazało, że problemy z LCP i CLS były łatwe do rozwiązania i miały duży wpływ na ogólną skuteczność. Na przykład renderowanie elementu LCP na serwerze zamiast na kliencie, gdy to możliwe, doprowadziło do zmniejszenia LCP.
Wykrywanie przesunięć układu było trudne, ponieważ mogą się one znacznie różnić w zależności od widocznego obszaru i połączenia. Gdy użytkownicy otrzymali podstawowe wskaźniki internetowe do statystyk, wiedzieli, że są na dobrej drodze, bo CLS się zmniejszył.
zdjęcia;
Obrazy zostały zoptymalizowane za pomocą wstępnego wczytywania, leniwego ładowania i odpowiednich rozmiarów. Wczytują wstępnie główne obrazy (np. LCP), a obrazy poza widocznym obszarem – tylko w razie potrzeby.
Czcionki
Zamień zoptymalizowane czcionki, zmieniając dostawców. Było to dla nich bardzo ważne, ponieważ potrzebowano optymalnego sposobu na posługiwanie się krojami pisma wymaganymi w różnych językach.
Skrypty innych firm
Platforma Zamień na to włożyła wiele wysiłku w sprawdzenie każdego zewnętrznego skryptu i widżetu, jego zastosowania oraz dostępnych funkcji. Po konsultacjach ze wszystkimi zainteresowanymi osobami opracowano plany zmniejszenia wpływu skryptów na witrynę przy jednoczesnym zachowaniu funkcji. Usunęliśmy niepotrzebne elementy i zoptymalizowano resztę, co znacznie zmniejszyło ilość kodu JavaScript firmy zewnętrznej w witrynie.
Usuwanie nieużywanego kodu i optymalizacja grupowania
Optymalizacja importu i usuwanie nieużywanych plików JS i CSS przyczyniły się do wprowadzenia niewielkich zmian w wynikach witryny Replacepie, jednak z czasem te drobne ulepszenia sumują się. Zespół zoptymalizował również konfigurację grupowania.
Tworzenie kultury wydajności na platformie Zamieńmy
Efekt tego programu jest wynikiem nie tylko zmian w kodzie, ale też zmian w organizacji i jej priorytetach.
Jak wyjaśnia Teemu Huovinen, kierownik zespołu inżynierów:
Musisz powiązać szybkość witryny z danymi biznesowymi, aby naprawdę podkreślić znaczenie tej szybkości. Wszystko sprowadza się do ustalania priorytetów, gdy masz mało czasu i zasobów – zawsze tak jest. Priorytetowe są traktowanie wartości klienta, ale łatwo jest skupić się na nowych funkcjach i bardziej bezpośrednich ulepszeniach konwersji, jeśli dostrzegasz, że szybkość witryny wpływa jedynie na poprawę wrażeń użytkowników. Połączenie szybkości witryny z danymi biznesowymi nie zawsze jest łatwe i to dlatego obliczanie względnego mCvR bardzo nam pomogło.
Teemu Huovinen
Gdy zespół programistów przez kwartał mógł całkowicie skupić się na szybkości witryny, zmotywował się do dalszej pracy.
To, co przynosi nasz wkład w rozwój zespołu, sprawia, że robimy wrażenie jeszcze bardziej. Czterech z naszych siedmiu deweloperów zaczynało pracę w ciągu miesiąca, w którym zaczęliśmy pracować nad wydajnością. Całkiem niesamowite, że udało nam się zjednoczyć ten temat i wywierać tak duży wpływ.
Teemu Huovinen
Teemu zwraca też uwagę na to, jak ważne jest na początku tworzenie planów na podstawie danych, nauka korzystania z karty Wydajność Narzędzi deweloperskich oraz konfigurowanie statystyk użytkowników przed wprowadzeniem jakichkolwiek ulepszeń. Wykresy (zwłaszcza te, które zmierzają we właściwym kierunku) są doskonałym źródłem opinii i weryfikacji w Twojej pracy. Analizowanie podstawowych wskaźników internetowych w porównaniu z wynikami w Lighthouse (laboratorium) pomogło mu skupić się na optymalizacji tego, co dotyczy większości ludzi.