12 мая 2021

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

Перевод. Источник – https://blog.asayer.io/

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

Возникает вопрос: как Google оценивает эти результаты?

Инструменты, например, 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. Обеспечив, чтобы браузер мог кэшировать файлы, возможно, с помощью сервис-воркера.

Хотите заказать сайт на JAMstack?
Напишите нам!

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 преследует благородную цель. Теперь у нас есть инструменты, которые измеряют показатели производительности страницы на основе реального опыта. Они помогут разработчикам сконцентрироваться на улучшениях, которые принесут наибольшую пользу их пользователям.

Нужен быстрый сайт на JAMstack?
Напишите нам!

Понравилась статья? Поделитесь с вашими друзьями!

Остались вопросы? Мы с радостью вам поможем!

Просто оставьте ваш email!
(обещаем, мы не присылаем спам)