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

Эта страница переведена с помощью Cloud Translation API.

Измеряйте Core Web Vitals веб-страницы с помощью библиотеки web-vitals

1. Прежде чем начать

В этой лабораторной работе вы узнаете, как измерить Core Web Vitals веб-страницы с помощью библиотеки JavaScript web-vitals vitals.

Google рекомендует измерять Core Web Vitals, чтобы они попадали в 75-й процентиль загрузок страниц, сегментированных на мобильных и настольных устройствах.

Core Web Vitals включает эти три показателя, которые применяются ко всем веб-страницам и дают вам критическое представление о пользовательском опыте:

Самая большая содержательная краска (LCP). Измеряет производительность загрузки и должно происходить в течение 2,5 секунд после начала загрузки страницы.
Задержка первого ввода (FID). Измеряет интерактивность и должно происходить в течение 100 миллисекунд.
Совокупный сдвиг макета (CLS). Измеряет визуальную стабильность и должен быть в пределах 0,1.

Предпосылки

Что ты будешь делать

Добавьте библиотеку web-vitals на веб-страницу.
Измерьте Core Web Vitals веб-страницы в инструментах разработчика Google Chrome.
Необязательно: сообщите основные веб-показатели веб-страницы в Google Analytics.

Что вам понадобится

Текстовый редактор на ваш выбор, например Sublime Text или Visual Studio Code.
Веб-браузер на основе Chromium, например Google Chrome или Microsoft Edge (дополнительную информацию о том, зачем вам нужен веб-браузер на основе Chromium, см. в разделе Поддержка браузеров).

2. Добавьте библиотеку web-vitals на веб-страницу.

В текстовом редакторе создайте файл web-vitals-test.html и введите в него следующий HTML-код:

веб-виталы-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>

Этот код создает веб-страницу, которую вы используете для этой лаборатории кода.

В элементе <body> HTML-кода после второго элемента <p> введите этот сценарий модуля, а затем сохраните файл:

веб-виталы-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>

Этот скрипт модуля загружает библиотеку 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>

Все современные браузеры поддерживают скрипты модулей, которые хорошо подходят для кода, использующего только новые API, например те, которые необходимы для измерения Core Web Vitals. Браузеры, не поддерживающие модули или API-интерфейсы Core Web Vitals, не будут пытаться загрузить этот скрипт.

3. Измерьте Core Web Vitals веб-страницы в инструментах разработчика Google Chrome.

В веб-браузере откройте сохраненный файл.
Щелкните правой кнопкой мыши веб-страницу, а затем щелкните Проверить в диалоговом окне.
На панели инструментов разработчика Google Chrome щелкните вкладку Консоль и выберите Параметры консоли . > Сохранить журнал . Этот параметр обеспечивает сохранение журналов при обновлении веб-страницы.

Перейдите на вкладку Сеть , а затем нажмите кнопку стрелку раскрывающегося меню дроссельной заслонки и выберите Медленный 3G . Этот параметр имитирует медленное сетевое соединение.

Вкладка «Сеть» с выбранным параметром «Медленный 3G» в раскрывающемся меню «Дросселирование».

Вернитесь на вкладку « Консоль » и щелкните в любом месте веб-страницы. Показатели LCP и FID распечатываются на вкладке Console .

Вкладка «Консоль» после печати метрик LCP и FID.

Обновите веб-страницу. Метрика CLS печатается на вкладке Console .

Вкладка «Консоль» после печати метрики CLS.

Вернитесь на вкладку « Сеть » и нажмите кнопку раскрывающуюся стрелку раскрывающегося меню дросселирования и выберите Fast 3G . Этот параметр имитирует быстрое сетевое соединение.
Вернитесь на вкладку « Консоль », а затем щелкните в любом месте веб-страницы. Показатели LCP и FID снова печатаются на вкладке « Консоль », но они стали лучше, чем раньше.

Вкладка «Консоль» после повторной печати метрик LCP и FID.

Обновите веб-страницу. Метрика CLS снова печатается на вкладке « Консоль », но она стала лучше, чем раньше.

Вкладка «Консоль» после повторной печати метрики CLS.

4. Необязательно: сообщите об основных веб-показателях веб-страницы в Google Analytics.

В файле web-vitals-test.html после оператора импорта сценария модуля введите эту sendToGoogleAnalytics() , а затем сохраните файл:

веб-виталы-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);

Этот код отправляет Core Web Vitals в Google Analytics, где вы можете просмотреть их в отчете Top Events:

Отчет «Лучшие события» в Google Analytics

Теперь ваш файл выглядит как этот фрагмент кода:

веб-виталы-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. Поздравления

Поздравляем! Вы узнали, как измерять и составлять отчеты о основных веб-показателях web-vitals показателей.

Учить больше

Веб-виталы