Core Web Vitals: Largest Contentful Paint, First Input Delay и Cumulative Layout Shift в Google

Google назвал три главные метрики для оценки пользовательского опыта: Largest Contentful Paint, First Input Delay и Cumulative Layout Shift. Я решил тщательно разобраться в сути этих метрик.

60% от рекомендованных значений вполне достаточно.

По заявлениям Google, метрики будут запущены не ранее 2021 года. У владельцев сайтов есть как минимум пол года на оптимизацию под грядущий апдейт.

Конгломерат UX метрик в Google назвали «Core Web Vitals». Core Web Vitals применимы ко всем веб-страницам.

В компании также отметили, что те метрики, что составляют Core Web Vitals на данный момент, со временем будут меняться. Сейчас фокус на трёх аспектах UX (User Experience):

Largest Contentful Paint (LCP)

Метрика измеряет производительность загрузки. Для предоставления хорошего пользовательского опыта LCP должна составлять до 2,5 сек от начала загрузки страницы. Распространенные причины слабой производительность загрузки:

• Медленное время отклика сервера
• Рендер-блокировка JavaScript и CSS
• Медленное время загрузки ресурсов
• Отрисовка на стороне клиента

Подробнее: https://web.dev/lcp/

First Input Delay (FID)

FID измеряет время с момента первого взаимодействия пользователя со страницей (т. е. когда они щелкают ссылку, нажимают на кнопку или используют пользовательский элемент управления с поддержкой JavaScript) к тому моменту, когда браузер действительно способен реагировать на это взаимодействие.

Подробнее: https://web.dev/fid/

Cumulative Layout Shift (CLS)

Метрика измеряет визуальную стабильность. Тут важно, чтобы элементы не появлялись неожиданно после того, как страница уже отрисована. Пример плохого пользовательского опыта, связанного с CLS:

 

Неожиданное перемещение содержимого страницы обычно происходит из-за загрузки ресурсов асинхронно или DOM элементы динамически добавляются на страницу поверх существующих. Причинами могут быть:

• Изображение или видео с неизвестными размерами;
• Шрифт который отображает больше или меньше, чем его резервный вариант;
• Стороннее объявление или виджет, который динамически изменяет размер самого себя.

Для ускорения сайта используйте изображения в оптимизированном формате WebP, к слову, я создал сервис для конвертации изображения из JPEG PNG в WebP

CLS измеряет общую сумму всех баллов движения макета для каждого случая неожиданного сдвига элементов, который происходит в течение всего цикла жизни страницы.

Сдвиг верстки происходит каждый раз, когда видимый элемент меняет свое положение с одного кадра к следующему.

Подробнее о метрике можно почитать здесь: https://web.dev/cls/

Эталонные показатели метрик

• Largest Contentful Paint (LCP): 2.5 секунд
• First Input Delay (FID): 100 миллисекунд
• Cumulative Layout Shift (CLS): менее 0.1

Расширение «Core Web Vitals» для Google Chrome

Чекнуть любую страницу сайта на все три метрики можно с помощью официального расширения для Google Chrome:

https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

Все инструменты, в которых можно оценить метрики:

---

 

Результат проверки главной страницы моего сайта:

Если показатели зеленые то все окей, красные — нужно оптимизировать.

Комментарий Джона Мюллера на английском:

Вопросы и ответы по Core Web Vitals & Page Experience

Как подогнать сайт под значения Core Web Vitals?

Оптимизировать сайт под CWV можно самостоятельно, используя рекомендации https://web.dev/vitals/#recommendations-for-improving-your-scores

Но можно просто использовать AMP-страницы — технологию, с помощью которой сайт будет соответствовать пороговым значениям метрик. Не забудьте, что медленный отклик сервера и не оптимизированные изображения могут этому помешать.

Как улучшить показатели LCP/CLS/FID? 

Информация доступна на сайте: web.dev/fast/. Много технических нюансов: Google предоставил рекомендации, их лучше отдать веб-разработчику.

Метрики Core Web Vitals являются сигналами ранжирования? 

С мая 2021 году начнут.

В Google верят, что в перспективе работа над улучшением пользовательского опыта по всем сайтам будет критически важной для поддержания здоровой экосистемы интернета.

Джон Мюллер о роли Core Web Vitals в SEO

Как включить русские субтитры в YouTube:

1. В правом нижнем углу кликаем на шестеренку ⚙
2. Кликаем на пункт «Субтитры»
3. Выбираем «Английский»
4. Скролим до пункта «Перевести»
5. Выбираем русский
6. Profit