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

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

О практической работе

subjectПоследнее обновление: мая 2, 2022
account_circleАвторы: Philip Walton

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 на веб-страницу

  1. В текстовом редакторе создайте файл 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>

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

  1. В элементе <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. Измерьте основные веб-жизненные показатели веб-страницы в инструментах разработчика Google Chrome.

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

74044d63a2f32916.png

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

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

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

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

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

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

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

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

  1. Обновите веб-страницу. Метрика 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 показателей.

Учить больше