Raz przyspieszyć stronę jest łatwo. Trudniej utrzymać ją szybką, gdy wciąż dochodzą nowe funkcje: każdy nowy komponent, font czy biblioteka sprawia, że strona jest trochę cięższa, i nikt tego nie zauważa, dopóki strona nie zacznie działać wolno. Dlatego przestaliśmy traktować szybkość jak jednorazowy audyt i zrobiliśmy z niej test, który musi przejść każda zmiana.
Punkt wyjścia
Gdy po raz pierwszy poważnie zmierzyliśmy tę stronę, układ skakał podczas ładowania (Cumulative Layout Shift w okolicach 0,2), a główna treść pojawiała się po 4–6 sekundach na spowolnionym łączu mobilnym. Główny arkusz stylów ważył 41 KB po kompresji, głównie dlatego, że komponenty i kod walidacji przeznaczone dla panelu administracyjnego trafiały także do odwiedzających.
Co zmieniliśmy
- Odwiedzający dostają tylko kod dla odwiedzających. Biblioteka UI panelu i biblioteka walidacji formularzy nie trafiają już na publiczną stronę. Test przechodzi po importach strony i kończy się błędem, jeśli któraś z nich znów się przemyci.
- CSS tylko dla tego, co jest na stronie. Główny arkusz stylów zmalał z 296 KB do 98 KB, a po kompresji do 16 KB.
- Fonty, które nie przesuwają układu. Kluczowe fonty są wczytywane z wyprzedzeniem, a strona nie pobiera już zawczasu kodu, który może nigdy nie być potrzebny.
Test, który tego pilnuje
Przy każdym pull requeście CI buduje stronę, serwuje ją tak jak produkcja — HTTP/2, TLS, kompresja — i trzy razy uruchamia Lighthouse na czterech kluczowych stronach, biorąc medianę. Budżet: każdy wynik co najmniej 95, największy element treści widoczny w mniej niż 2 sekundy, przesunięcie układu poniżej 0,1, blokowanie głównego wątku poniżej 200 ms. Jeśli zmiana przekroczy budżet, CI robi się czerwone i zmiana nie zostaje scalona. Równolegle działa kontrola dostępności, która obecnie nie znajduje naruszeń WCAG AA na sprawdzanych stronach.
Wynik
W CI strony mają 100 punktów we wszystkich czterech kategoriach Lighthouse, a główna treść jest widoczna w mniej niż sekundę. Na działającej stronie strona główna ma 100 punktów z główną treścią po około 1,2 sekundy, a strona produktu — 98.
Uczciwie mówimy też o tym, co nie jest jeszcze idealne: strony po japońsku i w innych językach CJK są wolniejsze, bo ich fonty są znacznie większe. Na to jest osobne zadanie.
Dlaczego to ważne dla Państwa
Wolna strona traci odwiedzających, zanim przeczytają choć słowo, a wyszukiwarki też to zauważają. Jeśli budują Państwo z nami landing page albo sklep, ten budżet jest w pakiecie — to część naszego sposobu pracy, a nie dodatek.