Data publikacji: 22 stycznia 2025 r.
Firma QuintoAndar znacznie poprawiła wydajność swojej witryny, skracając czas interakcja do kolejnego wyrenderowania (INP) o 80%, co przełożyło się na wzrost liczby konwersji o 36% w porównaniu z poprzednim rokiem. Zdając sobie sprawę, jak ważne dla zaangażowania użytkowników są szybkie i responsywne witryny, wdrożyliśmy „Code Yellow”, aby nadać priorytet wydajności we wszystkich zespołach.
Firma QuintoAndar używała narzędzi takich jak Real User Monitoring (RUM) i technik takich jak async/await do optymalizacji długich zadań i przechodów w React, dzięki czemu udało jej się skrócić czas interakcji i poprawić wrażenia użytkowników. Wprowadzone zmiany, w tym usunięcie pikseli innych firm i optymalizacja renderowania, zaowocowały lepszymi danymi dotyczącymi skuteczności.Liczba stron spełniających „dobry” próg INP (200 ms lub mniej) wzrosła z 42% do 78%, a tylko 6,9% stron zapewniało słabe wrażenia w porównaniu z 32% na początku.
Problem
QuintoAndar to największa platforma mieszkaniowa w Brazylii, na której można znaleźć oferty dotyczące także kilku krajów Ameryki Łacińskiej. Wyszukiwarka to największy kanał online w branży nieruchomości, co oznacza, że pozyskiwanie ruchu bezpłatnego jest kluczowe dla firmy. Zapewnianie użytkownikom doskonałych wrażeń jest też kluczowe, aby utrzymać ich zaangażowanie i pomóc im znaleźć wymarzone domy.
Na początku 2024 r. QuintoAndar uświadomiła sobie, że choć ma najlepszą platformę na rynku, może zapewnić użytkownikom lepsze wrażenia, co przełoży się na wyższe współczynniki konwersji. Stało się to widoczne po wprowadzeniu interakcji do kolejnego wyrenderowania (INP) jako podstawowego wskaźnika internetowego. W fakt, QuintoAndar miał najgorszy INP w porównaniu z konkurencją.
Świadomy negatywnego wpływu wysokiego INP na wrażenia użytkownika zespół SEO i wydajności internetowej QuintoAndar zdecydował się podjąć działania. Mając dobrze określony plan działania, zespół rozpoczął pracę nad szeregiem ulepszeń technicznych i związanych z treściami, które miały nie tylko zmniejszyć wskaźnik INP, ale też zwiększyć zaangażowanie użytkowników i współczynniki klikalności.
Oto historia firmy QuintoAndar, która zmniejszyła INP o 80%, co spowodowało znaczny wzrost liczby konwersji i poprawę wrażeń użytkowników. W tym studium przypadku omówiono zastosowane strategie, napotkane problemy i osiągnięte wyniki.
Kod żółty: priorytety w przypadku wydajności witryny
Firma QuintoAndar zdawała sobie sprawę, że wydajność witryny ma kluczowe znaczenie nie tylko dla wrażeń użytkowników, ale też dla ogólnego sukcesu firmy. Wiedziała też, że szybka i responsywna witryna zwiększa zaangażowanie i zachęca użytkowników do powrotu. Firma zdawała sobie sprawę, że osiągnięcie tych wyników wymaga ciągłych i skoordynowanych działań w całej organizacji. W rezultacie QuintoAndar wprowadził „Kod Żółty”.
Koncepcja „Kod żółty” powstała w Google w odpowiedzi na potrzebę zwiększenia szybkości działania. Polega ona na tym, że wyznaczony lider może rekrutować do pomocy dowolną osobę w firmie, niezależnie od jej bieżących projektów.
W QuintoAndar „Code Yellow” działał jako wewnętrzny system alertów, który miał na celu nadawanie priorytetów ulepszeniom wydajności witryny w organizacji. Po ogłoszeniu „Kod żółty” różne zespoły w firmie podjęły natychmiastowe i skoordynowane działania, aby rozwiązać problemy związane ze skutecznością.
Jak firma QuintoAndar znalazła najważniejsze możliwości i wprowadziła optymalizacje
Opóźnienia powyżej 200 milisekund są zauważalne dla użytkowników, a jakiekolwiek znaczne opóźnienie powyżej tego czasu pogarsza wrażenia użytkowników. Dlatego wskaźnik INP jest tak ważny: ocenia on ogólną responsywność strony na interakcje użytkowników na podstawie obserwacji czasu, jaki upływa od kliknięcia, dotknięcia czy interakcji z klawiaturą do kolejnego wyrenderowania w całym okresie życia strony.
Aby jednak poprawić ten wskaźnik, trzeba dokładniej przyjrzeć się szczegółom. Pierwszym krokiem było zidentyfikowanie, które etapy i elementy wrażeń użytkownika odpowiadają za wolne interakcje. Można to zrobić, korzystając z technik monitorowania rzeczywistych użytkowników (RUM), które umożliwiają szczegółowe śledzenie powolnych interakcji. Obejmuje to rozbicie INP na części składowe, takie jak opóźnienie wejścia, czas przetwarzania i opóźnienie wyświetlania, a także analizę długich klatek animacji (LoAF).
Dzięki temu udało się na przykład wykryć, że niektóre elementy wyszukiwania obiektu powodowały czas interakcji wynoszący 4 sekundy w 75. percentylu (dotyczy to 25% użytkowników). Dzięki optymalizacji długich zadań udało się znacznie poprawić wiele wolnych interakcji wpływających na INP. Do tego celu wykorzystano funkcje async/await, aby utworzyć punkty zwrotu w kodzie JavaScript QuintoAndar:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
Dzięki temu użytkownik szybciej otrzyma przydatne informacje zwrotne. W przypadku QuintoAndar renderowano spinner, główny wątek został przekazany do innych zadań o wyższym priorytecie, a po przekazaniu pozostała część pracy mogła zostać wznowiona:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
Inną często stosowaną techniką, która jest niezbędna do tworzenia aplikacji za pomocą React, jest używanie przejść. Ponieważ React obsługuje teraz przejścia, QuintoAndar może używać haka useTransition do aktualizowania stanu aplikacji bez blokowania interfejsu użytkownika.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
Oprócz wymienionych technik firma QuintoAndar wdrożyła też inne ulepszenia, takie jak memoryzacja, odrzucanie, kontrolery anulowania i suspensja, które poprawiły skuteczność INP.
Na przykład w poprzednim przykładzie kodu można zastosować debouncing, czyli technikę, która opóźnia wykonanie funkcji do czasu upływu określonego okresu bezczynności. Zapobiega to niepotrzebnym aktualizacjom podczas szybkiego pisania.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
Ponadto użycie wskaźnika Total Blocking Time (TBT) jako zastępnika INP umożliwiło firmie QuintoAndar oszacowanie wpływu wprowadzonych dużych zmian strukturalnych, takich jak:
- usuwanie pikseli innych firm z klienta.
- Usuwanie kodu CSS w JS.
- optymalizacji renderowania,
Tego typu inicjatywy są ważne, ponieważ bezpośrednio rozwiązują problem opóźnienia w rejestracji danych wejściowych, czyli czasu między rozpoczęciem interakcji przez użytkownika a rozpoczęciem działania zarejestrowanych dla niej modułów obsługi zdarzeń. Opóźnienia przy wprowadzaniu danych często wydłużają się, gdy w tym samym czasie wykonywane są inne zadania. W przypadku QuintoAndar opóźnienie działania było jednym z głównych czynników wpływających na INP z powodu dużej liczby zadań wykonywanych w wątku głównym podczas początkowego wczytywania strony.
Zarządzanie wydajnością witryny w celu zapobiegania regresji
Priorytetowe rozwiązywanie problemów z wydajnością nie wystarczy, jeśli nie uda Ci się zapobiec regresji. Gdy firma QuintoAndar w przeszłości odnotowała regresję, zdała sobie sprawę, że ważne jest stworzenie solidnego mechanizmu zarządzania, który zapobiegnie regresji wyników.
Pierwszym krokiem było utworzenie mechanizmów alertów dla poszczególnych danych podzielonych na segmenty według typu aplikacji lub interfejsu (lub obu tych kryteriów). Dzięki danym pochodzącym od rzeczywistych użytkowników QuintoAndar może monitorować wydajność i przesyłać te dane do bazy danych typu seria czasowa, w której można używać narzędzi do generowania paneli i alarmów segmentowych.
Oprócz stałych alarmów firma QuintoAndar wdrożyła też alarmy z ustawnymi progami, które wykrywają nietypowe wyniki i powiadamią zespół programistów, gdy warunki wymykają się spod kontroli, nawet zanim zostanie osiągnięty stały próg. QuintoAndar utworzył też co 2 tygodnie działający komitet, który dostosowuje progi tych alarmów.
Aby obsługiwać incydenty, opracowano proces, który jest ściśle przestrzegany przy użyciu skryptów. Zawierają one szczegółowe procedury postępowania w przypadku każdego typu problemu, który może się pojawić. Z tych podręczników może korzystać każdy inżynier.
Aby zapobiec przedostawaniu się problemów z interfejsem INP do wersji produkcyjnej, firma QuintoAndar wdrożyła system wersji kanarskich, który dostarcza nowe wersje użytkownikom etapami (np. stopniowo od 1%, 10%, 65% aż do 100%). Na każdym etapie ponownego równoważenia sprawdzana jest wersja Canary, aby sprawdzić, czy powoduje ona gorsze wyniki w przypadku użytkownika. W takim przypadku nastąpi automatyczne cofnięcie zmian, aby nieoptymalizowane funkcje nie zostały wdrożone w wersji produkcyjnej.
Oto główne podjęte działania:
- dobrze zdefiniowane alerty (stałe i zmiennopozycyjne) z co 2 tygodnie odbywającymi się komisjami w celu dostosowania progów;
- procedury dotyczące incydentów z szczegółowymi scenariuszami.
- Kanały kanarkowe z weryfikacją wydajności, aby ograniczyć wpływ potencjalnych regresji wydajności.
Wyniki
Prawidłowe ustalanie priorytetów w zakresie skuteczności w organizacji, dedykowany zespół ds. skuteczności i stosowanie technik optymalizacji zaowocowały zmniejszeniem INP o 80%, co potwierdzają dane RUM. Wykres poniżej pokazuje INP na urządzeniach mobilnych, gdzie widać początkowy gwałtowny spadek. Ta poprawa została wprowadzona dzięki rozwiązaniu problemów z interakcjami, które były szczególnie problematyczne. Widać też, że w ciągu całego roku utrzymywał się stały spadek, co wskazuje na znaczenie procesu zarządzania w zapobieganiu regresjom.
Te ulepszenia znalazły też odzwierciedlenie w panelu CrUX, gdzie QuintoAndar ma teraz INP poniżej 200 ms w 75.percentilu, a 78% stron działa poniżej tego progu, a tylko 6,9% stron zapewnia słabą jakość – liczba ta systematycznie spada z każdym miesiącem.
Ten wynik miał kluczowe znaczenie dla bezpośredniego wpływu na działalność firmy QuintoAndar. QuintoAndar zauważyło, że liczba konwersji wzrosła o 36% w ujęciu rocznym (nowi potencjalni klienci, którzy w przypadku QuintoAndar to osoby, które zaplanowały wizytę w danym obiekcie). Ten wynik jest w dużej mierze (ale nie tylko) powiązany ze zwiększeniem zaangażowania, które nastąpiło dzięki poprawie wrażeń użytkowników.
Podsumowanie
Poprawa wydajności witryny jest trudna. Czasami może to być przytłaczające. Gdy QuintoAndar zaczynał działalność, nie znał wszystkich odpowiedzi. Jednak dzięki podzieleniu problemu na części i skupieniu się na kwestiach o największym znaczeniu oraz współpracy między zespołami udało im się poczynić znaczne postępy. Nie wszystko trzeba naprawiać od razu. Nawet małe, stopniowe zmiany mogą przynieść znaczące ulepszenia. Pierwszy krok, np. określenie największych wąskich gardeł, eksperymentowanie z optymalizacją czy budowanie świadomości w swoim zespole, to już pierwszy krok na drodze do poprawy wydajności i wygody użytkowników.