Optymalizacja pod kątem jakości obsługi jest kluczem do długoterminowego sukcesu każdej witryny w sieci. Niezależnie od tego, czy jesteś właścicielem firmy, sprzedawcą czy programistą, Web Vitals może pomóc ci określić ilościowo komfort korzystania ze strony i zidentyfikować możliwości poprawy.
Przegląd
Web Vitals to inicjatywa Google mająca na celu zapewnienie ujednoliconych wskazówek dotyczących sygnałów wysokiej jakości, które są niezbędne do zapewnienia doskonałego komfortu użytkowania w Internecie.
Przez lata Google udostępniał szereg narzędzi do pomiaru i raportowania wydajności. Niektórzy programiści są ekspertami w korzystaniu z tych narzędzi, podczas gdy inni uważają, że bogactwo zarówno narzędzi, jak i wskaźników jest trudne do nadążenia.
Właściciele witryn nie powinni być guru wydajności, aby zrozumieć jakość usług, jakie zapewniają swoim użytkownikom. Inicjatywa Web Vitals ma na celu uproszczenie krajobrazu i pomoc stronom w skupieniu się na najważniejszych parametrach - Core Web Vitals .
Core Web Vitals
Podstawowe Web Vitals to podzbiór Web Vitals, które mają zastosowanie do wszystkich stron internetowych, powinny być mierzone przez wszystkich właścicieli witryn i będą widoczne we wszystkich narzędziach Google. Każdy z podstawowych elementów sieci Web reprezentuje odrębny aspekt doświadczenia użytkownika, jest mierzalny w terenie i odzwierciedla rzeczywiste wrażenia krytyczne dla użytkownika .
Wskaźniki składające się na Core Web Vitals będą ewoluować z czasem. Obecny zestaw na 2020 r. Koncentruje się na trzech aspektach doświadczenia użytkownika - ładowaniu , interaktywności i stabilności wizualnej - i obejmuje następujące wskaźniki (i ich odpowiednie progi):
- Largest Contentful Paint (LCP) : mierzywydajność ładowania . Aby zapewnić dobrą obsługę, LCP powinien wystąpić w ciągu 2,5 sekundy od pierwszego załadowania strony.
- Opóźnienie pierwszego wejścia (FID) : mierzy interaktywność . Aby zapewnić dobrą obsługę, strony powinny mieć FID mniejszy niż 100 milisekund .
- Cumulative Layout Shift (CLS) : mierzy stabilność wizualną . Aby zapewnić dobrą obsługę, strony powinny utrzymywać CLS poniżej 0,1.
Dla każdego z powyższych wskaźników, aby upewnić się, że osiągasz zalecany cel dla większości użytkowników, dobrym progiem do zmierzenia jest 75. percentyl ładowania strony, podzielony na urządzenia mobilne i stacjonarne.
Aby dowiedzieć się więcej na temat badań i metodologii stojących za tymi zaleceniami, zobacz: Definiowanie progów metryki Core Web Vitals
Narzędzia do pomiaru i raportowania podstawowych sieci Web Vitals
Google uważa, że podstawowe elementy sieci Web mają kluczowe znaczenie dla wszystkich doświadczeń internetowych. W rezultacie zobowiązuje się do wyświetlania tych wskaźników we wszystkich swoich popularnych narzędziach . W poniższych sekcjach opisano, które narzędzia obsługują Core Web Vitals.
Narzędzia terenowe do pomiaru podstawowych parametrów sieci Web
Chrome User Experience Report zbiera anonimowe dane pomiarowe prawdziwego użytkownika na każdym rdzeniu sieci Vital. Te dane umożliwiają właścicielom witryn szybką ocenę ich wydajności bez konieczności ręcznego instrumentowania analiz na swoich stronach, a także narzędzia takie jak PageSpeed Insights i raport Core Web Vitals Search Console .
| LCP | FID | CLS | |
| Raport o wrażeniach użytkowników Chrome | ✔ | ✔ | ✔ |
| PageSpeed Insights | ✔ | ✔ | ✔ |
| Search Console (raport Core Web Vitals) | ✔ | ✔ | ✔ |
Aby uzyskać wskazówki, jak korzystać z tych narzędzi i które narzędzie jest odpowiednie dla danego przypadku użycia, zobacz: Pierwsze kroki z pomiarem Web Vitals
Dane dostarczone w raporcie User Experience Chrome to szybki sposób oceny wydajności witryn, ale nie zawiera szczegółowych danych telemetrycznych na stronie, które są często niezbędne do dokładnego diagnozowania, monitorowania i szybkiego reagowania na regresje. W związku z tym zdecydowanie zalecamy, aby strony ustanowiły własne monitorowanie rzeczywistych użytkowników.
Zmierz podstawowe parametry sieciowe w JavaScript
Każdy z podstawowych elementów sieci Web może być mierzony w JavaScript za pomocą standardowych internetowych interfejsów API.
Najłatwiejszym sposobem zmierzenia wszystkich podstawowych parametrów sieci Web jest użycie biblioteki JavaScript web-vitals , małego, gotowego do produkcji opakowania wokół internetowych interfejsów API, który mierzy każdą metrykę w sposób, który dokładnie odpowiada sposobowi, w jaki są raportowane przez wszystkie Narzędzia Google wymienione powyżej.
W bibliotece web-vitals pomiar każdej metryki jest tak prosty, jak wywołanie pojedynczej funkcji ( szczegółowe informacje na temat użycia i interfejsu API można znaleźć w dokumentacji ):
import {getCLS, getFID, getLCP} 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});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);Możesz także raportować na temat każdego z podstawowych elementów sieci Web bez pisania kodu przy użyciu rozszerzenia przeglądarki Chrome . To rozszerzenie wykorzystuje bibliotekę web-vitals do mierzenia każdej z tych danych i wyświetlania ich użytkownikom podczas przeglądania sieci.
To rozszerzenie może być pomocne w zrozumieniu wydajności własnych witryn, witryn konkurentów i całej sieci.
| LCP | FID | CLS | |
|---|---|---|---|
| web-vitals | ✔ | ✔ | ✔ |
| Rozszerzenie Web Vitals | ✔ | ✔ | ✔ |
Ewentualnie programiści, którzy wolą mierzyć te metryki bezpośrednio za pomocą bazowych internetowych interfejsów API, mogą zapoznać się z tymi przewodnikami dotyczącymi metryk, aby uzyskać szczegółowe informacje na temat implementacji:
Aby uzyskać dodatkowe wskazówki dotyczące pomiaru tych wskaźników za pomocą popularnych usług analitycznych (lub własnych wewnętrznych narzędzi analitycznych), zobacz: Najlepsze praktyki pomiaru Web Vitals w terenie
Narzędzia laboratoryjne do pomiaru podstawowych parametrów sieci Web
Chociaż wszystkie podstawowe parametry sieci Web to przede wszystkim pomiary terenowe, wiele z nich można również zmierzyć w laboratorium.
Pomiary laboratoryjne to najlepszy sposób na przetestowanie wydajności funkcji podczas programowania - zanim zostaną one udostępnione użytkownikom. Jest to również najlepszy sposób na wyłapanie regresji wydajności, zanim one wystąpią.
Do pomiaru Core Web Vitals w środowisku laboratoryjnym można użyć następujących narzędzi:
| LCP | FID | CLS | |
|---|---|---|---|
| Chrome DevTools | ✔ | ✘ ( zamiast tego użyj TBT ) | ✔ |
| Latarnia morska | ✔ | ✘ ( zamiast tego użyj TBT ) | ✔ |
Narzędzia takie jak Latarnia morska, które ładują strony w symulowanym środowisku bez użytkownika, nie mogą mierzyć FID (nie ma danych wejściowych użytkownika). Jednak metryka całkowitego czasu blokowania (TBT) jest mierzalna laboratoryjnie i jest doskonałym wskaźnikiem zastępczym dla FID. Optymalizacje wydajności, które poprawiają TBT w laboratorium, powinny poprawić FID w terenie (patrz zalecenia dotyczące wydajności poniżej).
Podczas gdy pomiary laboratoryjne są istotną częścią dostarczania wspaniałych doświadczeń, nie zastępują pomiarów w terenie.
Wydajność witryny może się znacznie różnić w zależności od możliwości urządzenia użytkownika, jego warunków w sieci, tego, jakie inne procesy mogą być uruchomione na urządzeniu oraz tego, jak wchodzą w interakcję ze stroną. W rzeczywistości każda z podstawowych miar Web Vitals może mieć wpływ na wynik interakcji użytkownika. Tylko pomiar pola może dokładnie uchwycić pełny obraz.
Zalecenia dotyczące poprawy wyników
Po zmierzeniu podstawowych parametrów sieci Web i zidentyfikowaniu obszarów wymagających poprawy, kolejnym krokiem jest optymalizacja. Poniższe przewodniki zawierają szczegółowe zalecenia dotyczące optymalizacji stron dla każdej z podstawowych funkcji Web Vitals:
Inne Web Vitals
Podczas gdy podstawowe parametry sieci Web są kluczowymi wskaźnikami służącymi zrozumieniu i zapewnieniu doskonałego komfortu użytkowania, istnieją również inne istotne wskaźniki.
Te inne Web Vitals często służą jako proxy lub dodatkowe wskaźniki dla Core Web Vitals, aby pomóc uchwycić większą część doświadczenia lub pomóc w zdiagnozowaniu konkretnego problemu.
Na przykład miary Czas do pierwszego bajtu (TTFB) i pierwsza farba pełnego zadowolenia (FCP) są istotnymi aspektami ładowania i oba są przydatne w diagnozowaniu problemów z LCP ( odpowiednio długi czas odpowiedzi serwera lub zasoby blokujące renderowanie ) .
Podobnie wskaźniki, takie jak całkowity czas blokowania (TBT) i czas do interaktywnego (TTI), są wskaźnikami laboratoryjnymi, które są niezbędne do wychwytywania i diagnozowania potencjalnych problemów z interaktywnością , które będą miały wpływ na FID. Nie są one jednak częścią zestawu Core Web Vitals, ponieważ nie można ich zmierzyć w terenie, ani nie odzwierciedlają wyników ukierunkowanych na użytkownika .
Evolving Web Vitals
Web Vitals i Core Web Vitals reprezentują najlepsze dostępne sygnały, które programiści mają dzisiaj do pomiaru jakości doświadczenia w Internecie, ale sygnały te nie są doskonałe i należy oczekiwać przyszłych ulepszeń lub dodatków.
Te podstawowe sieci Vitals są istotne dla wszystkich stron i biorące udział w poprzek odpowiednich narzędzi Google. Zmiany tych wskaźników będą miały szeroko zakrojony wpływ; dlatego programiści powinni oczekiwać, że definicje i progi Core Web Vitals będą stabilne, a aktualizacje będą miały wcześniejsze powiadomienie i przewidywalną roczną kadencję.
Inne Web Vitals są często specyficzne dla kontekstu lub narzędzia i mogą być bardziej eksperymentalne niż Core Web Vitals. Jako takie, ich definicje i progi mogą się zmieniać z większą częstotliwością.
Dla wszystkich Web Vitals zmiany zostaną wyraźnie udokumentowane w tym publicznym CHANGELOGU .
