Dlaczego turysta zamyka wolną stronę? Szybkość strony na telefonie w praktyce

Szybkość strony mobilnej decyduje o tym, czy turysta zobaczy Twoją ofertę, czy wróci do wyników wyszukiwania i kliknie kolejny obiekt. Gość szuka restauracji na promenadzie albo noclegu w drodze nad morze, na telefonie i często przy słabym zasięgu. Poniżej opisuję, co mierzy Google, jakie są aktualne progi i co poprawiamy na stronach w pierwszej kolejności.

Jak turysta korzysta ze strony na telefonie

Właściciel lokalu ogląda swoją stronę zwykle na komputerze w biurze albo na telefonie przy dobrym Wi-Fi. Gość ogląda ją w zupełnie innych warunkach:

• na plaży lub w samochodzie, przy zmiennym zasięgu,
• na starszym telefonie, który wolniej przetwarza skrypty,
• jedną ręką, w pośpiechu, z trzema innymi kartami otwartymi obok,
• z zamiarem szybkiego sprawdzenia jednej rzeczy: menu, ceny, wolnego terminu, dojazdu.

Jeśli w tym czasie widzi pusty ekran, skaczące przyciski albo zdjęcie ładujące się kawałkami, nie ma powodu czekać. Konkurencja jest jeden ruch kciukiem dalej.

Core Web Vitals: co mierzy Google i jakie są progi

Google ocenia szybkość i wygodę strony trzema wskaźnikami, które nazywa Core Web Vitals (po polsku w Search Console: podstawowe wskaźniki internetowe). Ocena opiera się na danych od prawdziwych użytkowników przeglądarki Chrome. Strona przechodzi próg, gdy dobry wynik ma co najmniej 75% odsłon, osobno na telefonach i komputerach.

INP zastąpił w marcu 2024 roku wcześniejszy wskaźnik FID. Jeśli ktoś pokazuje Ci raport z FID, jest on nieaktualny.

Dla gościa te trzy liczby oznaczają proste rzeczy. LCP: czy szybko widzę, gdzie jestem. INP: czy przycisk „Zarezerwuj” reaguje od razu. CLS: czy nie kliknę w coś innego, bo baner wskoczył nad przycisk.

Zdjęcia: największy ciężar na stronach turystycznych

Strony hoteli, pensjonatów i restauracji żyją ze zdjęć. Zdjęcia są też najczęstszą przyczyną wolnego ładowania. Typowa sytuacja: zdjęcie z aparatu wrzucone w oryginalnym rozmiarze, kilka razy większe, niż potrzebuje ekran telefonu.

Co robimy ze zdjęciami na każdej stronie:

1. Format WebP zamiast ciężkich plików JPG i PNG. Przy tej samej jakości plik jest zwykle wyraźnie mniejszy.
2. Kilka rozmiarów tego samego zdjęcia. Telefon dostaje mniejszą wersję, duży monitor większą.
3. Wymiary zapisane w kodzie. Przeglądarka rezerwuje miejsce na zdjęcie, zanim się wczyta, więc tekst pod spodem nie skacze. To bezpośrednio poprawia CLS.
4. Leniwe ładowanie zdjęć poniżej pierwszego ekranu. Galeria pokoi wczytuje się dopiero, gdy gość do niej przewinie.
5. Pierwsze zdjęcie bez opóźnienia. Główne zdjęcie na górze strony ładujemy priorytetowo, bo to ono zwykle decyduje o LCP.

Karuzele z dziesięcioma dużymi zdjęciami na starcie strony wyglądają dobrze na komputerze w biurze. Na telefonie przy słabym zasięgu bywają głównym powodem złego wyniku LCP.

Czcionki i skrypty: niewidoczne, a spowalniają

Czcionki. Wiele stron pobiera czcionki z zewnętrznych serwerów. To dodatkowe połączenie przy każdym wejściu, a przy okazji przekazanie adresu IP odwiedzającego zewnętrznej firmie. My hostujemy czcionki lokalnie, razem ze stroną, i ograniczamy liczbę krojów i grubości do tych, które są faktycznie używane.

Skrypty. Każdy dodatek to kod, który telefon musi pobrać i wykonać. Na stronach obiektów turystycznych najczęściej spotykamy:

• czat lub czatbota w rogu ekranu,
• kilka kodów śledzących i pikseli reklamowych naraz,
• wtyczki do galerii, sliderów i animacji,
• osadzone widżety z mediów społecznościowych,
• mapę ładowaną od razu, choć jest na samym dole strony.

Każdy z nich osobno wydaje się drobny. Razem mogą wyraźnie spowolnić reakcję strony na dotyk, co widać w INP. Zamiast czatu stosujemy prosty formularz kontaktowy, mapę ładujemy dopiero po przewinięciu, a kody reklam i analityki po zgodzie gościa (Consent Mode v2). Strona przed zgodą jest wtedy lżejsza.

Tu pomaga też sposób budowy strony. Strony statyczne, które robimy w amber, nie mają bazy danych ani wtyczek ładowanych przy każdym wejściu. Więcej o tym podejściu w tekście Dlaczego robimy strony bez WordPressa.

Szybkość strony mobilnej: test przed sezonem

Najlepszy moment na sprawdzenie szybkości to kilka tygodni przed otwarciem rezerwacji na sezon. Wtedy jest czas na poprawki i na to, żeby Google zebrał nowe dane od użytkowników.

Jak sprawdzić stronę samodzielnie:

• PageSpeed Insights (pagespeed.web.dev): wpisz adres strony i sprawdź wynik dla telefonu. Górna część raportu pokazuje dane od prawdziwych użytkowników, jeśli strona ma ich wystarczająco dużo, dolna to test laboratoryjny.
• Google Search Console, raport podstawowych wskaźników internetowych: pokazuje, które grupy podstron mają problem.
• Własny telefon na danych komórkowych, nie na Wi-Fi. Otwórz stronę główną, menu lub cennik i formularz rezerwacji. Zmierz, ile czekasz, zanim możesz coś kliknąć.

Lista kontrolna przed sezonem

• Główne zdjęcie na stronie głównej ma rozsądny rozmiar i format WebP.
• Zdjęcia mają zapisane wymiary, nic nie skacze podczas ładowania.
• Galerie wczytują się dopiero po przewinięciu.
• Czcionki są na serwerze strony, maksymalnie kilka grubości.
• Na stronie nie ma nieużywanych skryptów, pikseli i widżetów.
• Kody reklam i analityki ładują się po zgodzie.
• Menu restauracji lub cennik jest tekstem, nie plikiem PDF.
• Przycisk rezerwacji lub telefon jest widoczny bez przewijania.
• PageSpeed Insights dla telefonu nie pokazuje wskaźników w czerwonym polu.

Na stronach, które projektujemy, szybkość jest częścią projektu od pierwszego szkicu. Zobacz, jak wygląda nasz proces na stronie jak pracujemy, albo przejrzyj realizacje.

Jeśli chcesz, żebyśmy sprawdzili szybkość Twojej strony na telefonie przed sezonem, napisz do nas.