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

cls сдвиг страницы
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


 

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

Core Web Vitals

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

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

Вопросы и ответы по 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

Частный Senior SEO-специалист, занимаюсь продвижением клиентских сайтов с 2016 года. Специализируюсь на агрегаторах, корпоративных сайтах услуг и интернет-магазинах. Интересны крупные проекты.

Частный Senior SEO-специалист, занимаюсь продвижением клиентских сайтов с 2016 года. Специализируюсь на агрегаторах, корпоративных сайтах услуг и интернет-магазинах. Интересны крупные проекты.

Частный Senior SEO-специалист, занимаюсь продвижением клиентских сайтов с 2016 года. Специализируюсь на агрегаторах, корпоративных сайтах услуг и интернет-магазинах. Интересны крупные проекты.

Частный Senior SEO-специалист, занимаюсь продвижением клиентских сайтов с 2016 года. Специализируюсь на агрегаторах, корпоративных сайтах услуг и интернет-магазинах. Интересны крупные проекты.

Оцените статью:
( 8 оценок, среднее 3.5 из 5 )
SEO-специалист

Комментарии закрыты.

  1. SEOONLY.RU

    мерси!

  2. Demi Murych

    lcp и fid работают и влияют с 2018 года.
    lcp только было совокупностью двух других.
    fid депрекейдет и соро будет убран.

    cls действительно новая характеристика, но она никак не повлияет на всех тех, кто и так верстал страницы верно. то есть они у него не скакали как зайцы.

    как итог — очередной пердеж в лужу со стороны гугла.

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

    тепрь у оптимизаторов будет две статьи дохода, первая — лайт хаус, вторая виталс в консоли. при етом последняя никакого влияния оказывать не будет.

  3. Валерия

    Полезная информация спасибо.