Szybkość strony a zyski firmy: jak zoptymalizować Core Web Vitals

Dlaczego użytkownicy uciekają z wolnych stron?

Wyobraź sobie sytuację: klient klika Twoją reklamę w telefonie, czekając na przystanku w Katowicach. Ekran pozostaje biały przez dwie sekundy, potem powoli ładuje się tło, a treść wciąż się nie pojawia. Po trzech sekundach użytkownik klika przycisk „wstecz” i przechodzi do następnej firmy z listy. Właśnie zapłaciłeś za kliknięcie, które nie przyniosło żadnego pożytku.

Statystyki analityczne nie pozostawiają złudzeń: każda sekunda opóźnienia powyżej dwóch sekund obniża współczynnik konwersji średnio o 7 procent. Jeśli Twoja witryna miesięcznie generuje 50 zapytań, przyspieszenie kodu może przynieść kilkanaście dodatkowych telefonów bez wydawania złotówki więcej na reklamy.

Czym są wskaźniki Core Web Vitals i jak mierzy je Google?

Google nie ocenia już stron na podstawie subiektywnych odczuć. Wykorzystuje zestaw trzech precyzyjnych wskaźników telemetrycznych pobieranych z przeglądarek Chrome użytkowników:

LCP (Largest Contentful Paint)

Mierzy czas potrzebny na wyświetlenie największego widocznego elementu na ekranie, zazwyczaj głównego zdjęcia lub nagłówka H1.

• Prawidłowy wynik: poniżej 2,5 sekundy.
• Wynik alarmowy: powyżej 4 sekund.

INP (Interaction to Next Paint)

Nowy parametr, który zastąpił dawny FID. Bada czas reakcji strony na dotknięcie ekranu przez użytkownika: rozwinięcie menu, kliknięcie przycisku czy otwarcie okna dialogowego.

• Prawidłowy wynik: poniżej 200 milisekund.
• Wynik alarmowy: powyżej 500 milisekund.

CLS (Cumulative Layout Shift)

Mierzy stabilność układu strony. Jeśli czytasz artykuł, a nagle wczytujące się zdjęcie przesuwa tekst o pół ekranu w dół, witryna uzyskuje zły wynik CLS.

• Prawidłowy wynik: poniżej 0,1.

Cztery proste zabiegi, które drastycznie skracają czas ładowania

Większość problemów ze słabymi wynikami wynika z kilku powtarzalnych zaniedbań:

1. Wgrywanie zdjęć prosto z aparatu: zdjęcie z telefonu waży 6 megabajtów. Po przeskalowaniu do szerokości ekranu i kompresji do formatu WebP ten sam plik waży 120 kilobajtów bez widocznej różnicy dla oka.
2. Przeładowanie zewnętrznymi skryptami: kody śledzące z Facebooka, TikToka, Hotjara i widgety czatu ładowane jednocześnie na samej górze strony potrafią całkowicie zablokować telefon klienta na kilka sekund.
3. Brak pamięci podręcznej przeglądarki: stałe elementy serwisu powinny zapisywać się w pamięci telefonu, aby przy przejściu na podstronę „Kontakt” ładowały się w ułamku sekundy.
4. Wybór przestarzałego hostingu: tani serwer współdzielony z wolnymi dyskami HDD nie poradzi sobie z równoległymi zapytaniami kilku użytkowników.

W PixelRoot optymalizujemy kod już podczas pisania pierwszych linii szablonu. Korzystamy z nowoczesnego frameworka Next.js, dzięki czemu nasze witryny regularnie osiągają powyżej 90 punktów w teście Google PageSpeed na urządzeniach mobilnych.