Core Web Vitals w praktyce — co Google mierzy i jak to poprawić

Co to właściwie jest i po co to mierzyć

Wyszukiwarka od kilku lat bierze pod uwagę nie tylko treść strony, ale też to, jak wygodnie się z niej korzysta. Trzy podstawowe wskaźniki opisują szybkość wyświetlenia głównej treści, czas reakcji na kliknięcie i stabilność układu podczas wczytywania.

Wpływ na pozycje jest realny, ale mniejszy, niż sugerują nagłówki w branżowych artykułach. Strona z gorszymi wskaźnikami i lepszą treścią nadal wygrywa. Wskaźniki działają jak rozstrzygnięcie remisu — a remisów w wynikach jest sporo.

Znacznie ważniejszy jest wpływ bezpośredni. Strona, która ładuje się pięć sekund, traci część odwiedzających jeszcze przed pokazaniem czegokolwiek. To działa niezależnie od wyszukiwarki i widać to wprost w statystykach.

Trzy wskaźniki i wartości, do których warto dążyć

Wskaźniki mierzone są na realnych odwiedzinach, a nie w laboratorium. Oznacza to, że wynik zależy też od urządzeń i łączy Waszych odwiedzających — strona popularna wśród użytkowników starszych telefonów wypadnie gorzej niż identyczna strona z inną publicznością.

Warto patrzeć na wartość, poniżej której mieści się trzy czwarte odwiedzin, a nie na średnią. Średnia potrafi wyglądać dobrze przy sytuacji, w której co czwarta osoba czeka osiem sekund.

Przyczyna numer jeden: zdjęcia

W dziewięciu przypadkach na dziesięć główną przyczyną wolnego wczytywania są zdjęcia. Fotografia wgrana prosto z aparatu ma kilka tysięcy pikseli szerokości i kilka megabajtów wagi, podczas gdy wyświetlana jest w kolumnie o szerokości ośmiuset pikseli.

Naprawa jest mechaniczna: przeskalowanie do realnie używanych rozmiarów, kompresja, nowoczesny format i wczytywanie zdjęć spoza pierwszego ekranu dopiero wtedy, gdy użytkownik do nich dojdzie.

Jest jednak pułapka: obrazek w pierwszym ekranie nie powinien mieć opóźnionego wczytywania, bo to właśnie on jest zwykle mierzony jako główna treść. Włączenie opóźnienia dla wszystkich zdjęć hurtem potrafi pogorszyć wynik zamiast go poprawić.

Pierwszy ekran na telefonie: co musi się wczytać od razu

Wskaźnik wyświetlenia głównej treści dotyczy tego, co użytkownik widzi bez przewijania. Dlatego najwięcej daje uporządkowanie właśnie pierwszego ekranu na telefonie — a ten jest znacznie mniejszy, niż wygląda w projekcie oglądanym na monitorze.

Dobra praktyka to spisanie, co naprawdę musi się tam znaleźć: logo, nagłówek mówiący, czym zajmuje się firma, przycisk albo numer telefonu i najwyżej jedno zdjęcie. Wszystko inne może wczytać się chwilę później i nikt tego nie zauważy.

Główne zdjęcie warto oznaczyć dla przeglądarki jako ważne, żeby pobrała je przed mniej istotnymi plikami. Kłopot sprawiają zdjęcia ustawione jako tło w arkuszu stylów — przeglądarka odkrywa je później niż zwykły obrazek, więc pierwszy ekran oparty na takim tle często wypada gorzej w pomiarze.

• Na pierwszym ekranie jedno zdjęcie zamiast suwaka lub galerii
• Główne zdjęcie wstawione jako obrazek, a nie tło, i oznaczone jako ważne
• Nagłówek i numer telefonu widoczne jeszcze przed wczytaniem zdjęcia
• Pierwszy ekran sprawdzony na małym telefonie, a nie tylko w podglądzie projektu

Filmy, suwaki i galerie na pierwszym ekranie

Suwak z pięcioma dużymi zdjęciami albo film odtwarzany w tle strony głównej wygląda efektownie na prezentacji u projektanta. Na telefonie z przeciętnym zasięgiem oznacza kilka megabajtów do pobrania, zanim użytkownik zobaczy pierwsze zdanie.

Suwaki mają też problem niezwiązany z szybkością: kolejne slajdy ogląda niewielka część odwiedzających, więc informacje z drugiego i trzeciego są w praktyce niewidoczne. Jedno dobrze dobrane zdjęcie z jasnym nagłówkiem działa zwykle lepiej.

Jeśli film jest ważny, lepiej pokazać kadr z przyciskiem odtwarzania i wczytywać nagranie dopiero po kliknięciu. Dotyczy to szczególnie ujęć z drona, które firmy z regionu — hotele, zakłady, deweloperzy — chętnie umieszczają na pierwszym ekranie. Więcej o samych nagraniach w artykule o dronie w marketingu firmy.

Przyczyna numer dwa: skrypty, których nikt nie sprząta

Druga typowa przyczyna to skrypty zewnętrzne: narzędzia analityczne, piksele reklamowe, czaty, mapy, widżety opinii, formularze osadzone z zewnętrznych usług. Każdy z nich dodaje kilkaset kilobajtów i kilka połączeń.

Najgorsze jest to, że skrypty dodane przy okazji jednej kampanii zostają na zawsze. Po trzech latach strona ładuje pięć narzędzi analitycznych, z których używane są dwa, i dwa piksele reklamowe z kampanii zakończonych dawno temu.

Przegląd tej listy raz na rok jest jedną z najprostszych i najbardziej opłacalnych czynności. Zwykle da się usunąć połowę bez żadnych konsekwencji poza szybszą stroną.

• Kilka narzędzi analitycznych mierzących to samo
• Piksele reklamowe z zakończonych kampanii
• Czat ładowany na wszystkich podstronach, obsługiwany rzadko
• Mapa wczytywana automatycznie zamiast po kliknięciu
• Kroje pisma pobierane z kilku różnych źródeł

Zanim usuniesz skrypt: sprawdź, kto z niego korzysta

Porządkowanie skryptów ma jedną pułapkę. Kod, który wygląda na zbędny, może odpowiadać za pomiar konwersji w reklamach, obsługę zgód na pliki cookies albo przekazywanie danych do systemu sprzedaży. Usunięty bez sprawdzenia daje szybszą stronę i konto reklamowe, które nagle przestaje widzieć zapytania.

Dlatego przed usunięciem każdy skrypt warto przypisać do osoby lub usługi, która go używa. Jeśli nikt się nie zgłasza, skrypt można wyłączyć — najlepiej najpierw na kopii testowej albo na kilka dni, z kontrolą, czy nic nie przestało działać.

Pomaga też zebranie skryptów marketingowych w jednym narzędziu do zarządzania tagami. Samo w sobie nie przyspiesza to strony, ale pozwala zobaczyć wszystkie narzędzia w jednym miejscu i uruchamiać je tylko tam, gdzie są potrzebne.

O tym, jak sprawdzić, czy pomiar w ogóle działa poprawnie, piszemy w artykule o analityce, której nie można ufać.

Kroje pisma: ciężar, którego nie widać

Każdy krój pisma i każda jego grubość to osobny plik do pobrania. Strona używająca trzech krojów w czterech grubościach ładuje dwanaście plików, zanim tekst wyświetli się w docelowej postaci.

Najczęściej wystarczą dwa kroje — jeden do nagłówków, drugi do tekstu — i po dwie–trzy grubości. Warto też trzymać pliki krojów na własnym serwerze zamiast pobierać je z zewnętrznej usługi, co oszczędza dodatkowe połączenia.

Przy polskich stronach trzeba pamiętać o znakach diakrytycznych. Uproszczony plik kroju bez polskich liter sprawia, że „ą” czy „ł” wyświetlają się zamiennikiem o innym wyglądzie, a tekst wygląda na niedbały.

• Najwyżej dwa kroje pisma na stronie
• Tylko grubości faktycznie używane w projekcie
• Pliki w nowoczesnym, skompresowanym formacie
• Wcześniejsze wczytanie kroju używanego na pierwszym ekranie
• Zestaw znaków obejmujący polskie litery

Skakanie układu i jego trzy typowe przyczyny

Wskaźnik stabilności mierzy, jak bardzo treść przesuwa się w trakcie wczytywania. Efekt zna każdy: zaczynasz czytać, strona podskakuje, klikasz w coś innego, niż zamierzałeś.

Pierwsza przyczyna to zdjęcia bez podanych wymiarów. Przeglądarka nie wie, ile miejsca zarezerwować, więc układa treść, a potem przesuwa ją, gdy obrazek się wczyta. Podanie szerokości i wysokości rozwiązuje to całkowicie.

Druga to elementy doklejane u góry po wczytaniu: belki zgód, paski promocyjne, powiadomienia. Trzecia to kroje pisma podmieniane w locie, gdy zamiennik ma inne proporcje niż docelowy. Wszystkie trzy da się naprawić bez ruszania układu strony.

Reakcja na kliknięcie: wskaźnik, który najczęściej się pomija

Wskaźnik reakcji mierzy, ile czasu mija od kliknięcia albo dotknięcia do chwili, w której strona pokaże jakąkolwiek odpowiedź. Opóźnienie odczuwa się jako zamulenie: przycisk nie reaguje, menu otwiera się z opóźnieniem, pole formularza przyjmuje litery z przerwami.

Przyczyną jest zwykle nadmiar skryptów wykonywanych w przeglądarce. Kreatory stron, rozbudowane animacje, czaty i narzędzia śledzące zajmują procesor telefonu, który przez chwilę nie ma mocy, żeby obsłużyć działanie użytkownika.

Najbardziej odczuwają to osoby ze starszymi telefonami. Dlatego wynik laboratoryjny na nowym komputerze bywa znakomity, a dane z realnych odwiedzin — słabe. Naprawa polega na ograniczeniu skryptów i odłożeniu tych mniej ważnych do chwili, w której strona jest już gotowa.

Rola serwera: ważna, ale nie decydująca

Czas odpowiedzi serwera wchodzi w skład wszystkich pomiarów, ale rzadko jest głównym winowajcą. Typowa strona firmowa na przyzwoitym hostingu generuje odpowiedź w kilkaset milisekund, podczas gdy zdjęcia potrafią dokładać kilka sekund.

Serwer staje się problemem przy stronach z ciężką bazą — sklepach z dużym katalogiem, serwisach z wieloma filtrami — oraz na najtańszych kontach współdzielonych w godzinach szczytu.

Sposób na rozróżnienie jest prosty: sprawdź czas do pierwszego bajtu. Jeśli mieści się poniżej sekundy, serwer nie jest problemem i szukanie winy w hostingu jest stratą czasu.

WordPress: motywy wielofunkcyjne i kreatory stron

Motywy „do wszystkiego” i kreatory stron pozwalają zbudować stronę bez programisty, ale płaci się za to wydajnością. Na każdej podstronie ładowane są style i skrypty dla funkcji, których ta podstrona nie używa: suwaków, galerii, sklepu, formularzy i animacji.

Nie oznacza to, że strona na kreatorze musi być wolna. Oznacza, że wymaga świadomej konfiguracji: wyłączenia nieużywanych modułów, ograniczenia animacji i sprawdzenia, które wtyczki ładują swoje pliki na wszystkich podstronach.

Przy nowych stronach warto od początku wybierać lżejsze rozwiązania. Strona projektowana z myślą o szybkości rzadko wymaga później optymalizacji — tak podchodzimy do budowy stron internetowych.

• Kilka wtyczek dublujących tę samą funkcję
• Kreator ładujący wszystkie moduły na każdej podstronie
• Rozbudowane animacje wejścia każdego elementu
• Wtyczki społecznościowe wczytujące zewnętrzne skrypty

Jak mierzyć, żeby nie oszukiwać samego siebie

Pomiar wykonany raz, na szybkim łączu, na nowym telefonie, w spokojnej porze dnia, powie niewiele. Warto mierzyć w warunkach zbliżonych do realnych: symulowane wolniejsze łącze, ograniczona moc urządzenia, kilka powtórzeń.

Osobno warto patrzeć na dane z realnych odwiedzin, jeśli są dostępne. Pomiar laboratoryjny mówi, co jest technicznie do poprawy; dane z terenu mówią, co realnie odczuwają Wasi odwiedzający — a to bywają dwie różne listy.

Trzecia rzecz to mierzenie właściwych podstron. Strona główna bywa lekka, a najcięższe są listingi produktów albo podstrony z galeriami. Sprawdzenie wyłącznie strony głównej daje fałszywe poczucie bezpieczeństwa.

Jak przełożyć wyniki pomiaru na decyzje w firmie

Raport z narzędzia pomiarowego jest pełen terminów, które niewiele mówią właścicielowi firmy. Żeby zdecydować, co poprawiać najpierw, trzeba przełożyć go na język skutków: co odczuwa klient i jak bardzo przeszkadza mu to w kontakcie z firmą.

Najprościej podzielić problemy na trzy grupy. Pierwsza to te, które odczuwa każdy odwiedzający na telefonie. Druga dotyczy tylko części podstron albo części urządzeń. Trzecia to uwagi techniczne bez zauważalnego wpływu na ludzi — te można spokojnie odłożyć.

Taki podział pozwala rozmawiać z wykonawcą o konkretach, a nie o punktach w narzędziu. Przy stałej opiece nad WordPress w Puławach i w innych miastach regionu zestawienie tego typu dołączamy do przeglądu technicznego.

Realne warunki: telefon i zasięg poza dużym miastem

Strona sprawdzana w biurze w centrum Lublina, na szybkim internecie i nowym komputerze, zawsze wypadnie dobrze. Tymczasem spora część klientów firm z regionu przegląda ją na telefonie — w samochodzie, na budowie albo w domu pod Krasnymstawem czy Hrubieszowem, gdzie zasięg bywa słabszy.

Dla takich odwiedzających każda sekunda wczytywania trwa dłużej, a strona ciężka od zdjęć i skryptów potrafi nie wczytać się wcale. Firma, która obsługuje klientów w mniejszych miejscowościach, powinna testować stronę właśnie w takich warunkach.

Najprostszy test to otwarcie strony na telefonie z wyłączonym Wi-Fi, w miejscu ze słabszym zasięgiem. Narzędzia pomiarowe pozwalają też zasymulować wolniejsze łącze — warto z tego korzystać przy każdym pomiarze.

Narzędzia do pomiaru i jak czytać wyniki

Do sprawdzenia wskaźników wystarczą bezpłatne narzędzia udostępniane przez wyszukiwarkę i wbudowane w przeglądarkę. Różnią się tym, co pokazują, i warto rozumieć tę różnicę, zanim zacznie się cokolwiek poprawiać.

Dane z realnych odwiedzin pojawiają się dopiero przy odpowiednio dużym ruchu. Przy mniejszych stronach firmowych zostaje pomiar laboratoryjny — i tym bardziej warto wtedy mierzyć przy symulowanym wolniejszym łączu.

Kolejność napraw według stosunku efektu do nakładu

Nie wszystko trzeba robić naraz i nie wszystko jest równie opłacalne. Poniżej kolejność, która sprawdza się przy większości stron firmowych i sklepów.

• Przeskalowanie i kompresja zdjęć — największy efekt, najmniejszy nakład
• Podanie wymiarów obrazków — usuwa skakanie układu
• Usunięcie nieużywanych skryptów zewnętrznych
• Opóźnione wczytywanie zdjęć spoza pierwszego ekranu
• Ograniczenie liczby krojów pisma i wariantów grubości
• Włączenie pamięci podręcznej po stronie serwera
• Wczytywanie mapy i czatu dopiero po kliknięciu
• Przegląd rozszerzeń ładowanych na wszystkich podstronach

Jak utrzymać wynik po poprawkach

Wskaźniki pogarszają się stopniowo. Nowe zdjęcia wgrane bez przeskalowania, kolejna wtyczka, skrypt z nowej kampanii — po roku strona wraca do punktu wyjścia, choć nikt nie zrobił nic „złego”.

Pomagają proste zasady: zdjęcia wgrywane w ustalonym maksymalnym rozmiarze, każdy nowy skrypt zewnętrzny zgłaszany osobie odpowiedzialnej za stronę i pomiar po każdej większej zmianie.

Warto też zapisać wynik po poprawkach i porównywać do niego kolejne pomiary. Regularny przegląd techniczny jest częścią opieki nad stroną — dzięki temu spadek widać po miesiącu, a nie po roku.

• Maksymalny rozmiar zdjęć ustalony dla osób dodających treści
• Lista skryptów zewnętrznych z informacją, kto ich używa
• Pomiar po każdej aktualizacji motywu i dodaniu wtyczki
• Przegląd wskaźników raz na kwartał

Czego nie robić w pogoni za wynikiem

Najczęstszy błąd to optymalizacja pod narzędzie zamiast pod użytkownika. Da się osiągnąć doskonały wynik w pomiarze, wyłączając połowę funkcji strony — i pogarszając ją dla ludzi.

Drugi to instalowanie kilku rozszerzeń przyspieszających naraz. Zwykle zaczynają sobie przeszkadzać, a diagnoza problemu staje się trudniejsza niż sam problem.

Trzeci to traktowanie wyniku jako celu. Sto punktów w narzędziu nie jest celem biznesowym. Celem jest strona, która wczytuje się na tyle szybko, żeby nikt nie zrezygnował — a to zwykle osiąga się dużo wcześniej niż komplet punktów.

Jak zlecić poprawki szybkości i sprawdzić ich efekt

Zlecenie „przyspieszcie stronę” jest trudne do rozliczenia, bo nie wiadomo, kiedy praca jest skończona. Lepiej od początku ustalić, które podstrony są mierzone, w jakich warunkach i jaki stan uznajecie za wystarczający.

Wiele firm spoza Lublina — z Puław, Chełma czy Białej Podlaskiej — zleca takie prace w całości zdalnie i nie ma w tym nic złego, bo pomiar, poprawki i kontrola odbywają się przez przeglądarkę. Ważne, żeby wynik był opisany tak, by dało się go sprawdzić bez udziału wykonawcy.

• Lista podstron do pomiaru: strona główna, najważniejsze usługi, formularz, ewentualnie listing
• Warunki pomiaru: telefon, symulowane wolniejsze łącze, kilka powtórzeń
• Wyniki sprzed zmian zapisane w dniu rozpoczęcia prac
• Kopia zapasowa wykonana przed pierwszą zmianą
• Lista wykonanych zmian z informacją, co każda miała poprawić
• Sprawdzenie formularzy, koszyka i pomiaru konwersji po zakończeniu

Ostatni punkt jest najczęściej pomijany, a to on chroni przed sytuacją, w której strona jest szybsza, ale przestała wysyłać zapytania. Taki zakres przygotowujemy przy audycie strony WordPress w Chełmie i w pozostałych miastach, w których działamy.

Sklepy: te same zasady, większe trudności

W sklepach dochodzą problemy, których strony firmowe nie mają: listingi z setkami produktów, filtry przeliczane przy każdym wejściu, zdjęcia w wielu wariantach i skrypty śledzące zachowanie w koszyku.

Największy zysk daje zwykle praca nad listingiem: ograniczenie liczby produktów na stronie, wczytywanie kolejnych po przewinięciu i cache wyników filtrowania. Karta produktu bywa lżejsza i mniej problematyczna.

Przy dużych katalogach warto sprawdzić też bazę danych — zobacz optymalizację baz danych. Czasem przyczyną wolnego listingu nie jest front, tylko brak indeksu po imporcie produktów.

Przykład z praktyki: strona firmy usługowej

Typowy przypadek, z jakim spotykamy się przy stronach firm z regionu: strona firmy remontowej z okolic Lublina, zbudowana na kreatorze, z suwakiem na pierwszym ekranie, galerią realizacji wgraną prosto z telefonu i czatem ładowanym na każdej podstronie. Na telefonie główna treść pojawiała się po kilku sekundach, a tekst podskakiwał przy wczytywaniu galerii.

Poprawki zajęły dwa dni: suwak zamieniony na jedno przeskalowane zdjęcie, kompresja galerii, podane wymiary obrazków, czat wczytywany dopiero po kliknięciu i usunięte dwa nieużywane narzędzia analityczne. Wygląd strony praktycznie się nie zmienił.

Efektem była strona wyraźnie szybsza na telefonie i stabilna przy wczytywaniu. Nie trzeba było jej przebudowywać ani zmieniać hostingu — co potwierdza regułę z początku artykułu: przyczyny są zwykle prozaiczne.

Samodzielnie czy z wykonawcą

Część poprawek z tego artykułu da się wykonać samodzielnie: przeskalowanie zdjęć, usunięcie nieużywanych wtyczek i skryptów, opóźnione wczytywanie obrazków. Wymaga to cierpliwości i kopii zapasowej przed każdą zmianą.

Zmiany w motywie, sposobie ładowania skryptów i krojów pisma oraz konfiguracja pamięci podręcznej wymagają już wiedzy technicznej. Źle wykonane potrafią zepsuć wygląd strony albo działanie formularzy.

Rozsądnie jest zacząć od pomiaru i listy przyczyn, a potem zdecydować, co zrobić samemu. Taką listę przygotowujemy w ramach audytu strony WordPress — także dla firm spoza Lublina, bo cały pomiar odbywa się zdalnie. Zobacz na przykład audyt strony WordPress w Zamościu.

Krótkie podsumowanie

Wskaźniki szybkości brzmią technicznie, a ich przyczyny są prozaiczne. W dziewięciu przypadkach na dziesięć wystarczy uporządkować zdjęcia, podać ich wymiary i usunąć skrypty, których nikt już nie używa.

Warto natomiast wiedzieć, kiedy przestać. Poprawa z pięciu sekund do dwóch zmienia wszystko; walka o ostatnie dwie dziesiąte sekundy kosztuje tyle samo i nie zmienia nic.