Полное руководство по показателям Google Core Web Vitals

Инструменты, например, WebPageTest.org и средства DevTools, встроенные в браузер, могут выполнять такие технические измерения, как:

• Blocking time - время ожидания загрузки, поскольку другие ресурсы имеют более высокий приоритет.
• DNS Resolution - время, необходимое для преобразования имени хоста в IP-адрес
• Connect time - время, необходимое для создания TCP-соединения.
• Time to First Byte (TTFB) - время, необходимое для получения первого байта
• Receive time - время, необходимое для чтения всего ответа
• DOM load time - время, необходимое для загрузки содержимого HTML
• Page load time - время, необходимое для загрузки всех ресурсов страницы.
• Page weight - общий размер всех сжатых / несжатых ресурсов
• DOM elements - общее количество элементов на странице.
• First Contentful Paint (FCP) - время, затрачиваемое до того, как браузер отобразит начальный контент
• Speed Index ​​- как быстро отображается контент во время загрузки страницы.
• First Meaningful Paint (FMP) - время, за которые основное содержимое страницы становится видимым для пользователя
• Time to Interactive (TTI) - сколько времени проходит, прежде чем страница станет полностью интерактивной и сможет реагировать на действия пользователя.
• First CPU Idle - сколько времени требуется, чтобы страница стала интерактивной
• CPU utilization - работа ЦП, необходимая для страницы.

Хотя эти показатели полезны, они несколько абстрактны. Они не определяют, хорошее или плохое взаимодействие с пользователем обеспечивает страница. Например, страница может никогда не «завершить» загрузку, потому что она предоставляет функции в реальном времени, постоянно загружая небольшие ресурсы. Инструменты оценки регистрируют задержку, несмотря на то, что страница кажется быстрой и отзывчивой.

Core Web Vitals

Core Web Vitals от Google - это три показателя производительности, которые оценивают реальное взаимодействие с пользователем. Кажется ли сайт быстрым?…

1. Largest Contentful Paint (LCP) - показатель загрузки
2. First Input Delay (FID) - показатель интерактивности
3. Cumulative Layout Shift (CLS) - показатель визуальной стабильности

Оценки основаны на реальных пользовательских показателях за последние 28 дней, анонимно собранных из браузера Chrome. Производительность сети и устройств варьируется, поэтому средние оценки не всегда репрезентативны. Google использует 75-й процентиль, т. е. сортирует оценки от лучших к худшим, а затем берет результаты для трех четвертей случаев. У троих из четырех посетителей сайта будет именно такой или более высокий уровень производительности.

Эти сигналы будут применяться для ранжирования страниц с середины июня 2021 года. Они будут влиять на то, как ваши страницы будут отображаться в результатах поиска на мобильных устройствах, и алгоритмы для настольных компьютеров тоже скоро подключатся.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) измеряет производительность загрузки. Как быстро загружается контент страницы? Запустите отчет DevTools Lighthouse, и в разделе Performance отобразится оценка LCP. Раздел Largest Contentful Paint можно расширить, чтобы увидеть выбранный элемент. Страницы, у которых время LCP составляет 2,5 секунды или меньше, оцениваются как «хорошие». Время, превышающее 4,0 секунды, считается «плохим».

Улучшить этот показатель можно следующим образом:

1. Обновив сервер
2. Активировав сжатие на сервере и HTTP/2
3. Применяя кэширование, Jamstack или аналогичные методы для сокращения затратных вычислений на стороне сервера с использованием сети Content Delivery Network (CDN) для размещения ресурсов на серверах, географически более близких к пользователям
4. предварительная загружая критически важные ресурсы, чтобы они были готовы к загрузке быстрее
5. Сведя к минимуму количество сторонних запросов и перемещая ресурсы в ваш основной домен
6. Минимизировав количество и размер запрашиваемых файлов, особенно в верхней части файла HTML
7. Избегая операторов CSS @import
8. Используя асинхронный или отложенный JavaScript или подключая модули ES6 вместо транспилированного кода ES5, и
9. Обеспечив, чтобы браузер мог кэшировать файлы, возможно, с помощью сервис-воркера.

First Input Delay

First Input Delay (FID) измеряет интерактивность интерфейса. Насколько быстро страница реагирует на действие пользователя, такие как клики, касания, прокрутка и т. д.? Инструменты FID регистрируют время между действием пользователя и обработкой этого события браузером. Страницы, для которых время FID составляет 100 миллисекунд или меньше, считаются «хорошими». Время, превышающее 300 миллисекунд, считается «плохим».

Улучшить FID можно так:

1. Генерировать статический HTML-контент на стороне сервера, где это возможно
2. Внедрять методы прогрессивного улучшения, чтобы пользовательский интерфейс можно было использовать до запуска JavaScript
3. Минимизировать количество и размер запрашиваемых файлов
4. Удалять неиспользуемый CSS и JavaScript
5. Избегать чрезмерного использования дорогостоящих свойств CSS, таких как box-shadow и filter
6. Загружать JavaScript асинхронно, отложенно или с модулями ES6
7. Разделять длительные задачи JavaScript
8. Загружать сторонний JavaScript по запросу, например виджеты чата, интеграция с социальными сетями и т. д.
9. Задерживать загрузку менее важных скриптов, таких как аналитика и реклама, и
использовать веб-воркеров для выполнения задач в фоновом потоке.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) измеряет визуальную стабильность. Перемещается ли контент на странице неожиданно для пользователя? Показатель вычисляет оценку в тот момент, когда элементы перемещаются без предупреждения или взаимодействия с ними со стороны пользователя. Это часто происходит, когда вы читаете статью на мобильном устройстве, и контент выскакивает за пределы экрана. Это может быть вызвано загрузкой изображения или рекламы выше текущей позиции прокрутки. В крайнем случае это может заставить вас кликнуть неправильную ссылку или элемент управления.

CLS можно исследовать с помощью отладчика Cumulative Layout Shift (CLS) или параметра Layout Shift Regions на панели рендеринга DevTools (DevTools menu > More tools > Rendering). Сдвиги лейаута выделены синим цветом, поэтому может быть полезно установить более низкую скорость сети на панели Network.

Страницы с показателем CLS 0,1 или меньше считаются «хорошими». Оценка выше 0,25 считается «плохой».

Улучшения возможны за счет:

1. Резервирования области для изображений, видео и элементов iframe путем добавления атрибутов ширины и высоты HTML
2. Использования CSS свойства aspect-ratio для резервирования места
3. Возврата к общедоступным шрифтам ОС
4. Установки CSS font-display в optional при загрузке веб-шрифтов. В качестве альтернативы используйте swap и убедитесь, что резервный шрифт аналогичного размера предотвращает смещение макета.
5. Не вставлять элементы в верхнюю часть страницы, кроме случаев, когда это происходит в ответ на взаимодействие с пользователем.
6. Предварительной настройки элементов контейнера для более медленной загрузки стороннего контента, такого как реклама
7. Использования свойств CSS transform и opacity для более эффективной анимации, не вызывающей перезапуск лейаута.

Мониторинг фронтенда

Отладка веб-приложения в продакшн может быть сложной задачей и требовать много времени. Asayer - это инструмент мониторинга фронтенда, который воспроизводит все, что делают ваши пользователи, показывает, как приложение ведет себя при возникновении проблем. Это похоже на то, как если бы инспектор браузера был открыт, а вы смотрели через плечо пользователя. Asayer позволяет воспроизводить баги, агрегировать ошибки JS и отслеживать производительность приложения. Asayer предлагает плагины для отслеживания состояния хранилища Redux или VueX, а также для проверки запросов Fetch и запросов GraphQL.

Инструменты Core Web Vitals

Следующие инструменты вычисляют оценку Web Vitals на вашем локальном устройстве. Они могут анализировать сайты разработки, работающие на localhost или сетевых серверах:
Chrome DevTools Lighthouse. В меню браузера выберите More tools…, Developer tools, затем вкладку Lighthouse.
Шкала Timings отчета о производительности DevTools.
Расширение Chrome Web Vitals.

Локальные инструменты пытаются имитировать более медленные сети и скорость обработки. Онлайн-инструменты могут оценить производительность живых сайтов:

Google PageSpeed Insights
web.dev Measure

Наконец, вы можете измерить реальную производительность для пользователей на своем действующем сайте:

Консоль поиска Google, раздел Core Web Vitals. Данные доступны для сайтов с достаточно высокой посещаемостью.
Chrome User Experience Report. Можно запросить реальную статистику пользователя (требуется регистрация).
JavaScript библиотека web-vitals. Этот скрипт может записывать и публиковать реальные пользовательские данные в Google Analytics или на других конечных точках.

Другие факторы ранжирования

В обновлении Google за июнь 2021 года также будут оцениваться следующие показатели, помимо Core Web Vitals:

HTTPS. Устанавливает ли сайт безопасное соединение между браузером и сервером?
Удобство для мобильных устройств. Можно ли использовать сайт на устройствах с маленьким экраном?
Отсутствие навязчивых межстраничных объявлений. Всегда ли контент удобочитаем и не скрыт визуально всплывающими межстраничными объявлениями или баннерами, которые занимают чрезмерно много места на экране?
Безопасный просмотр. На сайте нет фишинговых страниц, вредоносных программ и других вредоносных загрузок?

Станет ли веб лучше?

Google имеет значительную власть над направлением развития веб. Компания не всегда действовала из лучших побуждений, но Core Web Vitals преследует благородную цель. Теперь у нас есть инструменты, которые измеряют показатели производительности страницы на основе реального опыта. Они помогут разработчикам сконцентрироваться на улучшениях, которые принесут наибольшую пользу их пользователям.