Core Web Vitals: Uważasz, że Twoja strona jest szybka? Google niekoniecznie się z tym zgadza

Śledzisz wydajność swoich stron, słyszałeś o Core Web Vitals, ale przy tylu dostępnych narzędziach trudno wiedzieć, gdzie kliknąć, co sprawdzić i kiedy. Spokojnie — uporządkujemy to razem.

Czym są Core Web Vitals?

Przez lata mierzyło się wydajność stron za pomocą wskaźników takich jak TTFB czy liczba żądań JavaScript. Ale wraz z pojawieniem się HTTP/2, wzrostem popularności frameworków front-endowych i rozwojem przeglądarek, te metryki straciły na znaczeniu. To nie jest już tylko kwestia surowej szybkości, lecz odczucie użytkownika.

Dlatego Google wprowadził Core Web Vitals : trzy wskaźniki, które w konkretny sposób oddają to, co użytkownik postrzega podczas przeglądania strony. Czy ładuje się szybko? Czy jest stabilna? Czy reaguje dobrze po kliknięciu?

Oto trzy główne metryki:

• INP (Interakcja do następnego renderowania) : od marca 2024 INP zastąpił FID. Mierzy opóźnienie między interakcją użytkownika (kliknięcie, dotknięcie) a momentem, w którym strona wyświetla reakcyjną odpowiedź wizualną. To istotny sygnał dotyczący responsywności.

• LCP (Największy renderowany element treści) : mierzy moment, w którym największy widoczny element strony (często obraz lub nagłówek) w pełni pojawia się w oknie. Dobry LCP często zależy od szablonu, urządzenia lub nawet od detalu, takiego jak wyskakujące okienko zgody.

• CLS (Skumulowane przesunięcie układu) : wskaźnik oceniający stabilność wizualną. Wykrywa nieoczekiwane przesunięcia układu podczas całego czasu życia strony, nie tylko podczas ładowania. Typowo przycisk, który przesuwa się w chwili, gdy ktoś miał na niego kliknąć.

CrUX: prawdziwe liczby od prawdziwych użytkowników

To, co narzędzie do pomiaru wydajności pokazuje lokalnie, niekoniecznie odzwierciedla doświadczenie Twoich odwiedzających. To testy laboratoryjne, w standardowym środowisku. Ale Google patrzy na coś innego: dane z prawdziwego świata. I to właśnie tutaj CrUX wchodzi w grę.

CrUX, aby Raport doświadczeń użytkowników Chrometo publiczna baza danych zasilana przez użytkowników przeglądarki Chrome. Zbiera metryki wydajności rzeczywiste, w codziennych warunkach przeglądania: typowy smartfon, niestabilne połączenie 4G, otwarte w tle karty itp.

Te dane nazywane są „terenowe”, w przeciwieństwie do danych „laboratoryjne”, generowane lokalnie za pomocą narzędzi takich jak Lighthouse. Dane CrUX to te, których Google używa do oceny Twoich Core Web Vitals w swoim algorytmie. Innymi słowy, dobry wynik PageSpeed niczego nie gwarantuje, jeśli dane CrUX są złe. To one naprawdę mają znaczenie.

Możesz zobaczyć te dane:

• Przez PageSpeed Insights, jeśli Twój adres URL otrzymuje wystarczający ruch
• W Search Console, z raportem poświęconym „Core Web Vitals”
• Lub w sposób bardziej zaawansowany za pomocąAPI CrUX lub BigQuery, jeśli potrzebujesz przeprowadzać analizy na dużą skalę

Warto zauważyć, że CrUX nie obejmuje wszystkich stronPotrzebna jest pewna ilość ruchu, aby URL pojawił się w bazie. Dla nowych, słabo odwiedzanych lub bardzo niszowych stron niektóre strony po prostu nie będą mierzone. Ale na poziomie ustabilizowanej witryny to doskonałe odzwierciedlenie rzeczywistego doświadczenia użytkownika.

11 narzędzi do mierzenia i monitorowania Twoich Core Web Vitals

Istnieje wiele narzędzi do mierzenia Core Web Vitals, ale nie wszystkie służą temu samemu celowi. Niektóre przydają się do jednorazowych audytów, inne do ciągłego monitorowania, a niektóre są przeznaczone do głębszej integracji technicznej. Ta tabela pomoże ci się w tym odnaleźć, w zależności od twoich potrzeb i poziomu.

4 narzędzia polecane przez eksperta od wydajności sieci

Chrome DevTools

Niezbędne do zobaczenia tego, co naprawdę widzi użytkownik i zrozumienia dlaczego dlaczego strona zachowuje się źle. Idealne do szybkiej analizy LCP lub CLS.

Chrome DevTools to idealne narzędzie do debugowania Core Web Vitals w warunkach laboratoryjnych dzięki zakładce „Performance”.
Pozwala analizować potencjalne dane, które mogłyby zostać wysłane do BigQuery, aby zasilić Chrome UX Report. Oprócz precyzyjnego wskazania elementu LCP, jest też jednym z najlepszych narzędzi do diagnozowania w czasie rzeczywistym KPI mierzonych w całym cyklu życia strony, takich jak CLS i INP.

Aymeric Bouillat

Treo.sh

Idealne do śledzenia zmiany Core Web Vitals w czasie, z przejrzystym interfejsem, bez gubienia się w technicznym dashboardzie.

Treo.sh daje przewagę poprzez szybkie identyfikowanie szablonów najbardziej dotkniętych przez słabe wyniki Core Web Vitals, co ułatwia priorytetyzację działań dla każdego KPI. Jego prawdziwa siła tkwi w dynamicznym wykrywaniu adresów URL z danymi dla konkretnej domeny.

Aymeric Bouillat

DebugBear

Perfekcyjne do ciągłego monitorowania, wykrywania regresji i włączania wydajności do workflow produktu lub CI/CD.

DebugBear, który pozwala śledzić zarówno dane CrUX, jak i laboratoryjne przez API PageSpeed Insights, jest idealny do obserwowania postępów KPI Webperf w zależności od wprowadzanych poprawek technicznych na stronie. Oferuje również zaawansowane rekomendacje, które sprzyjają ładowaniu zasobów krytycznych nad linią załamania w widoku „Waterfall” (kaskadowe ładowanie plików).

Aymeric Bouillat

RUMvision (porównanie CWV z konkurentami)

Mierz, analizuj i poprawiaj szybkość swojego serwisu oraz kluczowe wskaźniki webowe dzięki danym odwiedzających w czasie rzeczywistym.

Wiedzieć, że strona wydaje się szybka i zapewnia dobrą użyteczność, to dobrze, ale jeszcze lepiej jest wiedzieć, jak wypadasz na tle konkurencji. To właśnie umożliwia CWV compare competitors — dowiesz się, jak strona pozycjonuje się względem wcześniej zidentyfikowanych witryn z tej samej branży. Idealne w ramach audytów Web perf.

Aymeric Bouillat

Dziękujemy Aymerci Bouillat za podzielenie się doświadczeniem i poradami

Narzędzia są ważne. Użytkownicy — jeszcze ważniejsi.

Dobre wskaźniki nie mają na celu Cię stresować, lecz prowadzić. Prawdziwym wyzwaniem nie jest uzyskanie 100/100 w Lighthouse, lecz zrozumienie, jak użytkownicy doświadczają Twojej strony każdego dnia na swoich urządzeniach.

Core Web Vitals dają konkretne punkty odniesienia, aby zidentyfikować, co naprawdę przeszkadza w doświadczeniu użytkownika. Nie trzeba wszystkiego mierzyć ani śledzić dziesięciu dashboardów: skup się na stronach, które mają znaczenie, używając narzędzi, które kontrolujesz. Dobry punkt wyjścia to już duża część drogi.

Artykuł „Core Web Vitals: Uważasz, że Twoja strona jest szybka? Google niekoniecznie się z tym zgadza” został opublikowany na stronie Abondance.