Opublikowano: 4 maja 2020 r.
Optymalizacja wygody użytkowników to klucz do długotrwałego sukcesu każdej strony internetowej. Niezależnie od tego, czy jesteś właścicielem firmy, marketerem czy deweloperem, wskaźniki internetowe pomogą Ci ocenić wygodę korzystania z Twojej witryny i ustalić, co jeszcze możesz w niej poprawić.
Przegląd
Web Vitals to inicjatywa Google służąca zapewnieniu ujednoliconych wskazówek dotyczących mierników jakości, które gwarantują doskonałe wrażenia użytkownika w sieci.
Przez lata Google udostępniło wiele narzędzi do pomiaru i raportowania skuteczności. Niektórzy deweloperzy są ekspertami w korzystaniu z tych narzędzi, ale inni uważają, że duża liczba narzędzi i danych utrudnia im pracę.
Właściciele witryn nie muszą być ekspertami w dziedzinie skuteczności, aby zrozumieć, jak wygodnie korzysta się z ich witryn. Inicjatywa Web Vitals ma na celu uproszczenie tego procesu i pomoc witrynom w skupieniu się na najważniejszych wskaźnikach, czyli na Core Web Vitals.
Core Web Vitals
Core Web Vitals to podzbiór Web Vitals, który dotyczy wszystkich stron internetowych. Powinny być mierzone przez wszystkich właścicieli witryn i będą widoczne we wszystkich narzędziach Google. Każdy ze wskaźników Core Web Vitals reprezentuje odrębny aspekt wrażeń użytkownika, jest możliwy do zmierzenia lokalnie i odzwierciedla rzeczywiste wrażenia użytkownika w kontekście kluczowego wyniku zorientowanego na użytkownika.
Elementy składowe Core Web Vitals będą z czasem ewoluować. Obecny zestaw skupia się na 3 aspektach wrażeń użytkownika – ładowaniu, interaktywności i stabilności wizualnej – i obejmuje następujące dane (oraz ich odpowiednie progi):
- Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Aby zapewniać użytkownikom dobre wrażenia, LCP powinno następować w ciągu 2,5 sekundy od rozpoczęcia ładowania strony.
- Interakcja do kolejnego wyrenderowania (INP): mierzy interaktywność. Aby zapewniać użytkownikom dobre wrażenia, wartość INP stron powinna utrzymywać się na poziomie 200 milisekund lub niższym.
- Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualną. Aby zapewniać użytkownikom dobre wrażenia, wartość CLS stron powinna utrzymywać się na poziomie 0,1 lub niższym.
Aby mieć pewność, że osiągasz zalecany cel w zakresie tych wskaźników dla większości użytkowników, dobrym progiem do zmierzenia jest 75 percentyl wczytywania stron, podzielony na urządzenia mobilne i komputery.
Narzędzia oceniające zgodność z Core Web Vitals powinny uznawać stronę za zgodną, jeśli spełnia ona zalecane cele w 75 percentylu dla wszystkich 3 wskaźników Core Web Vitals.
Cykl życia
Dane dotyczące Core Web Vitals przechodzą przez cykl życia składający się z 3 faz: eksperymentalnej, oczekującej i stabilnej.
Każda faza ma na celu poinformowanie deweloperów, jak powinni myśleć o poszczególnych danych:
- Eksperymentalne wskaźniki to potencjalne Core Web Vitals, które mogą jeszcze ulec znacznym zmianom w zależności od wyników testów i opinii społeczności.
- Oczekujące Core Web Vitals to przyszłe Core Web Vitals, które przeszły etap testowania i zbierania opinii oraz mają dobrze określony harmonogram przejścia do stanu stabilnego.
- Stabilne dane to obecny zestaw Core Web Vitals, które Chrome uważa za niezbędne do zapewnienia doskonałych wrażeń użytkownika.
Core Web Vitals znajdują się na następujących etapach cyklu życia:
Eksperymentalna
Gdy dane są początkowo opracowywane i wprowadzane do ekosystemu, są uważane za dane eksperymentalne.
Celem fazy eksperymentalnej jest ocena przydatności danych, najpierw przez zbadanie problemu, który ma zostać rozwiązany, a następnie przez ewentualne wprowadzenie zmian w danych, które nie rozwiązały problemu. Na przykład interakcja do kolejnego wyrenderowania (INP) została początkowo opracowana jako dane eksperymentalne, aby bardziej kompleksowo rozwiązać problemy z wydajnością w czasie działania w internecie niż opóźnienie przy pierwszym działaniu (FID).
Faza eksperymentalna cyklu życia Core Web Vitals ma również na celu zapewnienie elastyczności w rozwoju wskaźnika przez identyfikowanie błędów, a nawet wprowadzanie zmian w jego pierwotnej definicji. Jest to też faza, w której opinie społeczności są najważniejsze.
Oczekuje
Gdy zespół Chrome stwierdzi, że dane eksperymentalne otrzymały wystarczającą liczbę opinii i udowodniły swoją skuteczność, stają się danymi oczekującymi. Na przykład w 2023 r. INP awansowało ze statusu danych eksperymentalnych do statusu danych oczekujących, aby ostatecznie wycofać FID.
Dane oczekujące pozostają w tej fazie przez co najmniej 6 miesięcy, aby ekosystem miał czas na dostosowanie się. Opinie społeczności pozostają ważnym aspektem tej fazy, ponieważ coraz więcej deweloperów zaczyna korzystać z tych danych.
Stabilny
Gdy dane kandydujące do podstawowych wskaźników internetowych zostaną sfinalizowane, stają się danymi stabilnymi. Wtedy dane mogą stać się podstawowymi wskaźnikami internetowymi.
Dane stabilne są aktywnie obsługiwane i mogą podlegać poprawkom błędów oraz zmianom definicji. Stabilne Core Web Vitals nie będą się zmieniać częściej niż raz w roku. Wszelkie zmiany w podstawowych wskaźnikach internetowych będą wyraźnie komunikowane w oficjalnej dokumentacji danych oraz w dzienniku zmian. Core Web Vitals są też uwzględniane we wszystkich ocenach.
Narzędzia do pomiaru i raportowania Core Web Vitals
Google uważa, że Core Web Vitals mają kluczowe znaczenie dla wszystkich wrażeń użytkownika w internecie. Dlatego zobowiązuje się do udostępniania tych danych we wszystkich swoich popularnych narzędziach. W sekcjach poniżej znajdziesz informacje o tym, które narzędzia obsługują podstawowe wskaźniki internetowe.
Narzędzia do pomiaru Core Web Vitals w rzeczywistych warunkach
Raport na temat użytkowania Chrome zbiera anonimowe dane pomiarowe od prawdziwych użytkowników dotyczące każdego podstawowego wskaźnika internetowego. Te dane umożliwiają właścicielom witryn szybką ocenę skuteczności bez konieczności ręcznego instrumentowania analityki na stronach. Umożliwiają też korzystanie z narzędzi takich jak Narzędzia deweloperskie w Chrome, PageSpeed Insights i raport dotyczący Core Web Vitals w Search Console.
| LCP | INP | CLS | |
| Raport na temat użytkowania Chrome | |||
| Narzędzia deweloperskie w Chrome | |||
| PageSpeed Insights | |||
| Search Console (raport Core Web Vitals) |
Dane udostępniane przez Raport na temat użytkowania Chrome umożliwiają szybką ocenę skuteczności witryn, ale nie zawierają szczegółowych danych telemetrycznych dotyczących poszczególnych wyświetleń strony, które są często niezbędne do dokładnego diagnozowania, monitorowania i szybkiego reagowania na regresje. Dlatego zdecydowanie zalecamy, aby witryny skonfigurowały własne monitorowanie rzeczywistych użytkowników.
Pomiar Core Web Vitals w JavaScript
Każdy z Core Web Vitals można mierzyć w JavaScript za pomocą standardowych interfejsów API.
Najłatwiejszym sposobem na pomiar wszystkich Core Web Vitals jest użycie biblioteki JavaScript web-vitals, czyli małej, gotowej do wykorzystania w środowisku produkcyjnym otoczki wokół podstawowych interfejsów API, która mierzy każdy wskaźnik w sposób dokładnie odpowiadający sposobowi raportowania przez wszystkie wymienione wcześniej narzędzia Google.
Dzięki bibliotece web-vitals pomiar każdego wskaźnika można wykonać, wywołując jedną funkcję. Szczegółowe informacje o użyciu i interfejsie API znajdziesz w dokumentacji.
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Po skonfigurowaniu witryny do używania biblioteki web-vitals do pomiaru i wysyłania danych Core Web Vitals do punktu końcowego analityki kolejnym krokiem jest agregowanie i raportowanie tych danych, aby sprawdzić, czy Twoje strony spełniają zalecane progi w przypadku co najmniej 75% wizyt.
Niektórzy dostawcy usług analitycznych mają wbudowaną obsługę Core Web Vitals, ale nawet ci, którzy jej nie mają, powinni udostępniać podstawowe funkcje wskaźników niestandardowych, które umożliwiają pomiar Core Web Vitals w ich narzędziu.
Deweloperzy, którzy wolą mierzyć te dane bezpośrednio za pomocą podstawowych interfejsów API, mogą zamiast tego korzystać z tych przewodników po danych, aby uzyskać szczegółowe informacje o implementacji:
Dodatkowe wskazówki dotyczące pomiaru tych danych za pomocą popularnych usług analitycznych lub własnych narzędzi analitycznych znajdziesz w artykule Sprawdzone metody pomiaru Web Vitals w rzeczywistych warunkach.
Narzędzia laboratoryjne do pomiaru Core Web Vitals
Chociaż wszystkie Core Web Vitals są przede wszystkim danymi zbieranymi w rzeczywistych warunkach, wiele z nich można też mierzyć w laboratorium.
Pomiar w laboratorium to najlepszy sposób na testowanie skuteczności funkcji podczas tworzenia – zanim zostaną one udostępnione użytkownikom. Jest to też najlepszy sposób na wykrywanie regresji wydajności, zanim się pojawią.
Do pomiaru Core Web Vitals w środowisku laboratoryjnym można używać tych narzędzi:
| LCP | INP | CLS | |
|---|---|---|---|
| Narzędzia deweloperskie w Chrome | |||
| Lighthouse | (użyj zamiast tego TBT) |
Chociaż pomiar w laboratorium jest istotnym elementem zapewniania doskonałych wrażeń użytkownika, nie zastępuje on pomiaru w rzeczywistych warunkach.
Skuteczność witryny może się znacznie różnić w zależności od możliwości urządzenia użytkownika, warunków sieciowych, innych procesów działających na urządzeniu oraz sposobu interakcji użytkownika ze stroną. W rzeczywistości na wynik każdego z podstawowych wskaźników internetowych Core Web Vitals może wpływać interakcja użytkownika. Tylko pomiar w rzeczywistych warunkach może dokładnie odzwierciedlić pełny obraz sytuacji.
Zalecenia dotyczące poprawy wyników
W tych przewodnikach znajdziesz konkretne zalecenia dotyczące optymalizacji stron pod kątem każdego z Core Web Vitals:
Istnieje wiele sposobów na poprawę Core Web Vitals, a każde podejście ma różny poziom wpływu, trafności i łatwości użycia w każdej sytuacji. Krótką listę najważniejszych zaleceń zespołu Chrome znajdziesz w artykule Najskuteczniejsze sposoby poprawy Core Web Vitals.
Inne Web Vitals
Core Web Vitals są najważniejsze do zrozumienia i zapewnienia doskonałych wrażeń użytkownika, ale istnieją też inne dane pomocnicze.
Te inne dane mogą służyć jako przybliżenie lub jako dodatkowe dane dla trzech Core Web Vitals, aby pomóc w uchwyceniu większej części wrażeń lub w diagnozowaniu konkretnego problemu.
Na przykład dane czas do pierwszego bajtu (TTFB) i pierwsze wyrenderowanie treści (FCP) są ważnymi aspektami wczytywania i są przydatne w diagnozowaniu problemów z LCP (odpowiednio długie czasy odpowiedzi serwera lub zasoby blokujące renderowanie).
Podobnie dane takie jak łączny czas blokowania (TBT) są danymi laboratoryjnymi, które mają kluczowe znaczenie dla wykrywania i diagnozowania potencjalnych problemów z interaktywnością , które mogą wpływać na INP. Nie są one jednak częścią zestawu Core Web Vitals, ponieważ nie można ich mierzyć w rzeczywistych warunkach ani nie odzwierciedlają one wyniku zorientowanego na użytkownika.
Zmiany w Web Vitals
Web Vitals i Core Web Vitals to najlepsze dostępne obecnie sygnały, które deweloperzy mogą wykorzystać do pomiaru jakości wrażeń w internecie. Nie są one jednak doskonałe i należy się spodziewać przyszłych ulepszeń lub dodatków.
Core Web Vitals dotyczą wszystkich stron internetowych i są dostępne w odpowiednich narzędziach Google. Zmiany w tych danych będą miały szeroki wpływ, dlatego deweloperzy powinni oczekiwać, że definicje i progi Core Web Vitals będą stabilne, a aktualizacje będą zapowiadane z wcześniejszym powiadomieniem i będą się pojawiać w przewidywalnym, rocznym cyklu.
Pozostałe Web Vitals są często specyficzne dla kontekstu lub narzędzia i mogą być bardziej eksperymentalne niż Core Web Vitals. Dlatego ich definicje i progi mogą się zmieniać częściej.
Wszystkie zmiany w Web Vitals będą wyraźnie udokumentowane w tym publicznym CHANGELOG.