Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Ta strona została przetłumaczona przez Cloud Translation API.

Mierzenie podstawowych wskaźników internetowych strony dzięki bibliotece treści internetowych

1. Zanim zaczniesz

Z tego modułu dowiesz się, jak zmierzyć podstawowe wskaźniki internetowe na stronie internetowej za pomocą biblioteki JavaScript web-vitals.

Google zaleca pomiar podstawowych wskaźników internetowych i utrzymywanie się go w zakresie 75 percentyla czasu wczytywania strony podzielonego na segmenty na urządzeniach mobilnych i komputerach.

Podstawowe wskaźniki internetowe obejmują 3 rodzaje danych, które mają zastosowanie do wszystkich stron internetowych i dostarczają istotnych informacji o wygodzie użytkowników:

Największe wyrenderowanie treści (LCP). Mierzy wydajność wczytywania i powinna nastąpić w ciągu 2,5 sekundy od rozpoczęcia ładowania strony.
Opóźnienie przy pierwszym działaniu (FID). Mierzy interaktywność i powinna pojawić się w ciągu 100 milisekund.
Skumulowane przesunięcie układu (CLS) Mierza stabilność wizualną i powinna mieścić się w zakresie 0,1.

Wymagania wstępne

Co chcesz zrobić

Dodaj bibliotekę web-vitals do strony internetowej.
Mierzenie podstawowych wskaźników internetowych na stronie internetowej w Narzędziach Google dla programistów Google Chrome.
Opcjonalnie: zgłoś do Google Analytics podstawowe wskaźniki internetowe.

Czego potrzebujesz

wybrany edytor tekstu, np. Sublime Text lub Visual Studio Code.
Przeglądarka internetowa Chromium, np. Google Chrome lub Microsoft Edge (więcej informacji o tym, dlaczego potrzebujesz przeglądarki opartej na Chromium, znajdziesz w artykule Obsługa przeglądarek).

2. Dodawanie biblioteki parametrów internetowych do strony internetowej

W edytorze tekstu utwórz plik web-vitals-test.html, a potem wpisz w nim ten kod HTML:

web-vitals-test.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Ten kod tworzy stronę internetową, której używasz w tym ćwiczeniu.

W elemencie <body> kodu HTML po drugim elemencie <p> wpisz ten skrypt modułu i zapisz plik:

web-vitals-test.html.

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Skrypt modułu wczytuje bibliotekę web-vitals z sieci dystrybucji treści. Twój plik wygląda teraz tak:

web-vitals-test.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Wszystkie nowoczesne przeglądarki obsługują skrypty modułów, które dobrze nadają się do kodu korzystającego tylko z nowych interfejsów API, na przykład wymaganych do pomiaru podstawowych wskaźników internetowych. Przeglądarki, które nie obsługują modułów ani interfejsów API podstawowych wskaźników internetowych, nie będą próbowały załadować tego skryptu.

3. Mierzenie podstawowych wskaźników internetowych w Narzędziach Google dla programistów Google Chrome

Otwórz zapisany plik w przeglądarce.
Kliknij prawym przyciskiem myszy stronę internetową, a następnie w oknie kliknij Zbadaj.
W okienku Google Chrome Developer Tools kliknij kartę Console (Konsola) i wybierz Console settings (Ustawienia konsoli) > Preserve log (Zachowaj dziennik). To ustawienie powoduje, że dzienniki są odświeżane po odświeżeniu strony internetowej.

Kliknij kartę Network (Sieć), a następnie kliknij strzałkę rozwijania w menu ograniczania i wybierz Slow 3G. To ustawienie symuluje wolne połączenie sieciowe.

Karta Sieć z wolnym połączeniem 3G wybranym w menu Ograniczanie.

Wróć do karty Konsola i kliknij dowolne miejsce na stronie internetowej. Dane LCP i FID są drukowane na karcie Konsola.

Karta Konsola po wydrukowaniu wskaźników LCP i FID.

Odśwież stronę. Dane CLS zostaną wydrukowane na karcie Konsola.

Po wydrukowaniu wskaźnika CLS karta Konsola.

Wróć do karty Network (Sieć), a następnie kliknij strzałkę rozwijania w menu ograniczania i wybierz Fast 3G. To ustawienie symuluje szybkie połączenie sieciowe.
Wróć do karty Konsola i kliknij dowolne miejsce na stronie internetowej.Dane LCP i FID są drukowane na karcie Konsola, ale się poprawiły.

Po zmianie wskaźników LCP i FID karta Konsola wyświetli się ponownie.

Odśwież stronę. Dane CLS zostaną wydrukowane na karcie Konsola, ale poprawią się.

Po wydrukowaniu wskaźnika CLS karta Konsola jest wyświetlana ponownie.

4. Opcjonalnie: zgłoś do Google Analytics podstawowe wskaźniki internetowe

W pliku web-vitals-test.html za instrukcją importu skryptu modułu wpisz tę funkcję sendToGoogleAnalytics() i zapisz plik:

web-vitals-test.html.

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Ten kod wysyła podstawowe wskaźniki internetowe do Google Analytics, gdzie można je wyświetlać w raporcie Najczęstsze zdarzenia:

Raport Najczęstsze zdarzenia w Google Analytics

Twój plik wygląda teraz tak:

web-vitals-test.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Gratulacje

Gratulacje! Wiesz już, jak mierzyć i raportować podstawowe wskaźniki internetowe w bibliotece web-vitals.

Więcej informacji

Wskaźniki internetowe