Dzięki korzystaniu z narzędzi do monitorowania rzeczywistych użytkowników i skupieniu się na ulepszaniu podstawowych wskaźników internetowych podczas refaktoryzacji aplikacji udało im się też poprawić wskaźnik CLS o 72%, a także responsywność aplikacji.
Agrofy to internetowy rynek rolno-spożywczy w Ameryce Łacińskiej. Łączy kupujących i sprzedawców maszyn rolniczych, ziemi, sprzętu i usług finansowych. W III kwartale 2020 r. 4-osobowy zespół programistów firmy Agrofy poświęcił miesiąc na optymalizację witryny, ponieważ zakładał, że poprawa skuteczności spowoduje zmniejszenie współczynnika odrzuceń. Skupili się przede wszystkim na poprawie LCP, który jest jednym z podstawowych wskaźników internetowych. Te optymalizacje wydajności doprowadziły do 70% wzrostu wartości LCP, co przełożyło się na 76% spadek współczynnika porzuceń ze względu na czas wczytywania stron (z 3,8% do 0,9%).
70%
Niższy LCP
76%
Mniejsza liczba rezygnacji z gry podczas wczytywania
Problem
Podczas analizowania danych firmy zespół programistów Agrofy zauważył, że współczynniki odrzuceń wydają się wyższe niż średnie w branży. W kodzie źródłowym witryny nawarstwiały się też problemy techniczne.
Rozwiązanie
Zespół Agrofy przedstawił propozycję menedżerom i uzyskał ich zgodę na:
- Przejdź ze starszego, wycofanego frameworku na nowszy, aktywnie obsługiwany framework.
- zoptymalizować wydajność wczytywania nowej bazy kodu;
Migracja zajęła 2 miesiące. Oprócz wspomnianego wcześniej 4-osobowego zespołu programistów w migracji uczestniczyli też specjaliści ds. produktów i UX oraz architekt oprogramowania. Projekt optymalizacji zajął 4-osobowemu zespołowi programistów miesiąc. Skupili się na LCP, CLS (kolejne podstawowe wskaźniki internetowe) i FCP. Dostępne optymalizacje:
- leniwe ładowanie wszystkich niewidocznych elementów za pomocą interfejsu Intersection Observer API;
- Szybsze dostarczanie zasobów statycznych dzięki sieci dostarczania treści.
- Leniwe ładowanie obrazów za pomocą
loading="lazy". - Renderowanie po stronie serweraścieżki renderowaniatreści.
- Wstępne wczytywanie i utrzymywanie połączenia z kluczowymi zasobami, aby zminimalizować czas nawiązywania połączenia.
- Używając narzędzi do monitorowania rzeczywistych użytkowników (RUM), aby określić, które strony z informacjami o produkcie często zmieniały układ, a potem wprowadzić poprawki w architekturze kodu źródłowego.
Więcej informacji technicznych znajdziesz w poście na blogu zespołu inżynierów Agrofy.
Po włączeniu nowej wersji kodu dla 20% ruchu uruchomili nową witrynę dla wszystkich użytkowników na początku września 2020 r.
Wyniki
Optymalizacje przeprowadzone przez zespół programistów doprowadziły do zauważalnych ulepszeń w wielu różnych rodzajach danych:
- LCP poprawiło się o 70%.
- Wartość CLS poprawiła się o 72%.
- Blokowanie żądań JS zmniejszyło je o 100%, a blokowanie żądań CSS – o 80%.
- Długie zadania skrócone o 72%.
- CPU bezczynny po raz pierwszy – wzrost o 25%.
W tym samym okresie dane monitorowania rzeczywistych użytkowników (zwane też danymi zgromadzonymi) wykazały, że współczynnik porzuconych wczytywania na stronach z informacjami o produkcie zmniejszył się o 76%, z 3,8% do 0,9%:
