Dzięki wykorzystaniu narzędzi do monitorowania użytkowników i skoncentrowaniu się na poprawie podstawowych wskaźników internetowych w refaktoryzacji aplikacji zespół poprawił CLS o 72%, a także jego czas reagowania.
Agrofy to internetowa platforma handlowa przeznaczona dla agrobiznesu w Ameryce Łacińskiej. Dopasowują one nabywców i sprzedawców maszyn rolniczych, gruntów, sprzętu i usług finansowych. W III kwartale 2020 r. czteroosobowy zespół ds. programowania w Agrofy spędził miesiąc na optymalizacji witryny, ponieważ zakładał, że poprawa wydajności doprowadzi do obniżenia współczynników odrzuceń. Skupili się na poprawie LCP – jednego z podstawowych wskaźników internetowych. Te optymalizacje skuteczności doprowadziły do poprawy wskaźnika LCP o 70%, co przełożyło się na 76% spadek liczby porzuceń podczas wczytywania strony (z 3,8% do 0,9%).
70%
Niższy LCP
76%
Niższe wczytywanie
Problem
Podczas badania wskaźników biznesowych zespół programistów w firmie Agrofy zauważył, że współczynniki odrzuceń wydawały się wyższe niż branżowe standardy porównawcze. Wzrosło również zadłużenie techniczne w bazie kodu witryny.
Rozwiązanie
Zespół Agrofy przedstawił się kierownictwu i zachęcił ich do:
- Przeprowadź migrację ze starszej, wycofanej platformy na nowszą, aktywnie obsługiwaną platformę.
- Zoptymalizuj wydajność wczytywania nowej bazy kodu.
Migracja trwała 2 miesiące. Oprócz wspomnianego wcześniej 4-osobowego zespołu programistycznego w tej migracji wzięli udział również specjaliści ds. usług i UX oraz architekta oprogramowania. Projekt optymalizacyjny zajęł 4-osobowe zespoły programistów przez 1 miesiąc. Koncentrowały się na LCP, CLS (innym podstawowych wskaźnikach internetowych) i FCP. Konkretne optymalizacje obejmują:
- 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ą polecenia
loading="lazy". - Renderowanie po stronie serwera treści krytycznej ścieżki renderowania.
- Wstępne ładowanie i wstępne łączenie krytycznych zasobów, które pozwalają zminimalizować czas uzgadniania połączenia.
- Wykorzystanie narzędzi do monitorowania użytkowników (RUM) w celu wykrycia, na których stronach z informacjami o produktach zaszło dużo zmian układu, a następnie wprowadzenie poprawek w architekturze bazy kodu.
Więcej informacji technicznych znajdziesz w poście na blogu Agrofy Engineering.
Po włączeniu nowej bazy kodu dla 20% ruchu organizacja uruchomiła nową witrynę dla wszystkich użytkowników na początku września 2020 r.
Wyniki
Optymalizacje zespołu programistów doprowadziły do wymiernych poprawy wielu różnych wskaźników:
- LCP poprawiło się o 70%.
- CLS poprawił się o 72%.
- Blokowanie żądań JavaScript zmniejszyło się o 100%, a blokowanie żądań CSS o 80%.
- Długie zadania zmniejszyły się o 72%.
- Pierwszy procesor bezczynny zwiększył się o 25%.
W tym samym okresie rzeczywiste dane z monitorowania użytkowników (nazywane też danymi zgromadzonymi) wykazały, że współczynnik porzuceń podczas wczytywania strony ze szczegółami produktu spadł o 76%: z 3,8% do 0,9%:
