Jak skróciliśmy czas ładowania strony do poniżej jednej sekundy

Większość powolnych stron internetowych nie działa wolno z niewyjaśnionych przyczyn. Spowolnienie wynika z kilku przewidywalnych, nakładających się na siebie problemów — a ich rozwiązywanie odbywa się w przewidywalnej kolejności. Kiedy klient zgłasza się do nas ze stroną ładującą się przez trzy sekundy, rzadko potrzebujemy egzotycznych sztuczek. Potrzebujemy dyscypliny.

To ta sama lista kontrolna, którą stosujemy przy każdym zleceniu dotyczącym wydajności, w przybliżonej kolejności priorytetów. Każdy krok jest tani w stosunku do swoich efektów, a większość stron działa zauważalnie szybciej już po wdrożeniu pierwszych trzech.

Mierz zanim cokolwiek zmienisz

Nie można ulepszyć czegoś, czego się nie mierzy, a już na pewno nie da się udowodnić poprawy bez punktu odniesienia. Każde zlecenie zaczynamy od danych z rzeczywistego użytkowania (field data), a nie tylko od wyników laboratoryjnych.

• Dane laboratoryjne — Lighthouse i WebPageTest dla kontrolowanego, powtarzalnego obrazu sytuacji.
• Dane rzeczywiste — metryki rzeczywistych użytkowników (CrUX / RUM) pokazujące to, czego naprawdę doświadczają ludzie.
• Budżet wydajności — sztywny limit dla każdej ścieżki, dzięki czemu regresje są wykrywane na etapie CI, a nie na produkcji.

Wyeliminuj zasoby blokujące renderowanie

Największym pojedynczym sukcesem na większości stron jest usunięcie arkuszy CSS i kodu JavaScript ze ścieżki krytycznej. Przeglądarka nie może wyrenderować strony, dopóki nie zakończy analizowania zasobów blokujących renderowanie — im jest ich mniej, tym szybciej pojawia się zawartość.

// odłóż (defer) wszystko, co nie jest krytyczne
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
  requestIdleCallback(load);
else setTimeout(load, 2000);

Umieść w kodzie strony (inline) niewielką ilość CSS wymaganą dla obszaru widocznego bez przewijania (above the fold), a resztę ładuj asynchronicznie. Opóźniaj (defer) niekrytyczne skrypty. Celem jest pierwsze wyrenderowanie obrazu (first paint), które nie czeka na nic, co nie jest absolutnie niezbędne.

Traktuj obrazy jako budżet

Obrazy są zazwyczaj najcięższym elementem na stronie i najłatwiej popełnić przy nich błędy. Trzy zasady pokrywają dziewięćdziesiąt procent przypadków:

1. Serwuj nowoczesne formaty — AVIF lub WebP — z alternatywnym formatem (fallback).
2. Dostosowuj wymiary obrazów do ich wyświetlanego rozmiaru; nigdy nie umieszczaj grafiki o szerokości 3000 pikseli w miejscu na 600 pikseli.
3. Stosuj opóźnione ładowanie (lazy-load) dla wszystkiego poniżej linii przewijania i rezerwuj miejsce, aby uniknąć przesunięć układu (layout shift).

Buforuj na brzegu sieci

Gdy strona jest już lekka, kolejnym pytaniem jest to, jak szybko bajty docierają do użytkownika. CDN z odpowiednimi nagłówkami pamięci podręcznej (cache headers) skraca czas pobierania z serwera źródłowego z 600 ms do zaledwie 30 ms przy pobraniu z brzegu sieci. W przypadku treści dynamicznych nagłówek stale-while-revalidate zapewnia błyskawiczne odpowiedzi, odświeżając zawartość w tle.

Wydajność to funkcja. Budżetujemy ją w taki sam sposób, jak każdą inną część projektu.

Wynik

W projekcie, który stał się inspiracją do napisania tego artykułu, czas Largest Contentful Paint dla strony głównej spadł z 3,1 s do 0,9 s, a konwersje organiczne wzrosły zauważalnie w ciągu miesiąca. Nie było w tym żadnej magii — tylko powyższa lista kontrolna, zastosowana po kolei.

Jeśli Twoja strona działa powoli i nie wiesz, od czego zacząć, skontaktuj się z nami — krótki audyt zazwyczaj ujawnia dwie lub trzy najważniejsze zmiany.