В прошлом году мы уже публиковали материал о грядущем обновлении Core Web Vitals Google. И теперь, когда обновление вступило в силу, мы решили перевести еще одну полезную статью, посвященную основным показателям Core Web Vitals — метрик пользовательского опыта.
Перевод статьи с портала amsivedigital.com.
Core Web Vitals — это относительно новый показатель Google, который измеряет характеристики страниц на основе фактических данных об их использовании. В основе этого отчета лежат три метрики: LCP, FID и CLS. Если URL-адрес содержит недостаточно данных по какой-либо из этих метрик, страница будет ранжироваться в соответствии с наиболее низкими показателями.
Почему это важно?
Ранее представители Google заявили, что с 2021 года новые метрики определенно станут фактором ранжирования сайтов:
«Мы продолжаем работу и сегодня кратко расскажем об изменениях рейтинга в поисковой сети, которые включают показатели качества страницы. Мы готовы представить новый сигнал, который объединяет Core Web Vitals с уже существующими сигналами, чтобы обеспечить целостную картину пользовательского опыта при посещении веб-страницы».
Поэтому, если вы не хотите, чтобы ваш сайт потерял в рейтинге, стоит обратить на новые метрики самое пристальное внимание. Следует также отметить, что теперь Google позволяет страницам без AMP ранжироваться в Top Stories, чего ранее не было. Вот что об этом говорят в самой компании:
«В рамках этого обновления мы включим показатели качества страницы в критерии ранжирования для Top Stories при поиске с мобильных устройств, а также удалим из требований обязательное использование технологии AMP. Тем не менее Google продолжает поддерживать AMP и по-прежнему будет ссылаться на такие страницы».
Давайте рассмотрим подробнее каждый из показателей Core Web Vitals, узнаем, что они собой представляют и каким образом их можно измерить.
Первая метрика: Largest Contentful Paint (LCP)
Google дает LCP следующее определение:
«Метрика Largest Contentful Paint (отрисовка самого крупного контента) указывает на время отрисовки самого большого изображения или текстового блока в области просмотра».
По сути, LCP — это самый большой видимый блок вашей страницы, который появляется к моменту завершения процесса загрузки. Ниже вы можете видеть предоставленный Google пример загрузки сайта CNN:
Рисунок 1. Пример загрузки сайта CNN
Как видно на примере, элементы видоизменяются в процессе загрузки страницы, но только на последнем экране мы видим самый большой элемент, который считается LCP.
Чтобы почувствовать разницу, давайте взглянем на еще один пример, где LCP загружается значительно быстрее:
Рисунок 2. Пример загрузки сайта Google
На этом примере мы видим, что LCP появляется в зоне просмотра задолго до завершения загрузки страницы. Такой вариант гораздо предпочтительнее.
Хорошим показателем считается, если LCP появляется в течение первых 2,5 секунд загрузки страницы. Если этот процесс занимает от 2,5 до 4 секунд, то страница нуждается в улучшении. Более 4 секунд — это плохая реализация. Вот как Google визуально представляет эту метрику:
Рисунок 3. LCP
Вы можете измерить LCP различными способами, но теперь это доступно в PageSpeed Insights или через расширение Chrome.
Дополнительную информацию см. в статье Google о Largest Contenful Paint.
Вторая метрика: First Input Delay (FID)
Показатель FID помогает определить первое впечатление пользователя о вашем сайте. Google предлагает нам следующее определение этой метрики Core Web Vitals:
«FID (задержка после первого ввода) – время между первым взаимодействием пользователя со страницей (нажатием на ссылку, кнопку, интерактивный элемент JavaScript) и ответом браузера».
Необходимо уточнить, что этот показатель не измеряется до тех пор, пока пользователь не попытается взаимодействовать со страницей. Поскольку действия пользователя в определенное время могут сильно повлиять на оценку, Google придерживается подхода на основе компиляции данных, чтобы собирать показатели от различных пользователей за определенный период.
Пример ниже демонстрирует, как происходит более длительная задержка после первого ввода:
Рисунок 4. Длительная задержка после первого ввода
На этом примере страница становится видимой относительно рано благодаря загрузке стилей. Но есть несколько задач основного потока, которые могут выполняться с задержкой, если в это время произошел первый ввод пользователя.
Рисунок 5. Загрузка стилей
На приведенном выше примере пользователь попытался взаимодействовать со страницей во время одной из более длительных задач основного потока. Поэтому ему пришлось ждать завершения задачи, прежде чем браузер смог ответить.
Основная причина низкой оценки — чрезмерный или плохо оптимизированный JavaScript, который выполняется на ранней стадии процесса загрузки страницы. Разделение кода или предварительная загрузка меньшего объема JavaScript — хорошие способы минимизировать эту проблему.
Хороший показатель времени — менее 100 мс. Результаты от 100 мс до 300 мс требуют улучшения, а значения выше 300 мс оцениваются как неудовлетворительные.
Рисунок 6. FID
Вы можете измерить FID различными способами, в том числе в PageSpeed Insights или через расширение Chrome. Однако имейте в виду, что в этом случае моделированное тестирование невозможно, поскольку для определения результата требуется реальное взаимодействие пользователя с сайтом.
Дополнительную информацию см. в статье Google о First Input Delay.
Третья метрика: Cumulative Layout Shift (CLS)
Cumulative Layout Shift — это новая метрика, основанная на одной из самых раздражающих функций интернета: смещении контента. Google дает ей следующее определение:
«CLS (совокупное смещение макета) позволяет определить суммарное значение смещения во всех непредвиденных случаях за все время посещения страницы».
Если вы заходите на страницу, и во время просмотра контента внезапно выскакивает реклама, которая сдвигает текст или изображения, это говорит о плохой реализации CLS.
Этот показатель предназначен для ранжирования сайтов с точки зрения удобства использования. Иными словами, страницы с более приятным пользовательским опытом будут иметь и более высокий рейтинг.
Хорошим показателем CLS считается значение менее 0,1. Результаты от 0,1 до 0,25 требуют улучшения, а значения выше 0,25 оцениваются как неудовлетворительные.
Рисунок 7. CLS
Вы можете повысить удобство использования сайта, если снизите показатель CLS, вызванный рекламными объявлениями, которые загружаются через JavaScript и радикально меняют макет страницы. Еще нужно поработать с полноэкранными объявлениями, которые появляются вскоре после посещения страницы и полностью блокируют видимый контент.
При необходимости вы можете уменьшить сдвиг контента с помощью ожидаемых элементов, таких как раскрывающееся меню (т.к. это считается ожидаемым сдвигом макета и не учитывается метрикой, к тому же всегда инициируется пользователем).
Анимации и переходы, особенно вызванные преобразованием CSS, — еще один отличный способ избежать смещения макета.
Вам может быть интересно почитать перевод статьи о том, как найти и исправить сдвиги макета с помощью инструментов разработчика Chrome, чтобы улучшить показатель CLS. — Примеч. Ant-Team.ru.
Вы можете измерить CLS различными способами, но теперь это доступно в PageSpeed Insights или через расширение Chrome.
Дополнительную информацию см. в статье Google о Cumulative Layout Shift.
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых материалов.
