Оптимизация под Core Web Vitals

Google объявил, что обновление начнется в середине июля и полностью вступит в силу в августе 2021 года. Обновление объединит новые сигналы, Core Web Vitals и предыдущие сигналы, связанные с опытом взаимодействия пользователя с сайтом.

Если взглянуть в прошлое, впечатление пользователя от страницы всегда было важно для Google, ведь оно позволяет убедиться, что посетители при взаимодействии с сайтом достигают своих целей. В 2015 году Google начал принимать во внимание удобство использования сайта с мобильного устройства. С 2018 года скорость загрузки стала для Google одним из факторов, влияющих на рейтинг поиска с мобильных устройств.

В 2020 году компания представила Core Web Vitals. Это набор метрик, оценивающих опыт пользования страницей большинства посетителей, перешедших на сайт. Эти метрики станут частью алгоритма поискового рейтинга Google в июне 2021 года.

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

Мы считаем, что инициатива нацелена на поощрение сайтов с лучшим пользовательским опытом. Она привнесет больше прозрачности в деятельность по SEO-оптимизации, потому что использование этих метрик в качестве фактора поиска публично раскрыто.

Страницы со стабильной и быстрой производительностью заставляют посетителей оставаться на сайте дольше, помогают достигать целей и даже имеют более высокий процент конверсий. Согласно исследованию Google, пользователи на 24% реже покидают сайты, соответствующие Core Web Vitals.

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

Core Web Vitals — набор метрик, разработанных Google, для оценки наиболее важных элементов опыта взаимодействия с веб-сайтом. На данный момент он оценивает три ключевые переменные: загрузка (Largest Contentful Paint), интерактивность (First Input Delay) и визуальная стабильность (Cumulative Layout Shift).

Простыми словами, Largest Contentful Paint (LCP) оценивает, сколько времени требуется самому большому элементу страницы, например большому баннеру внизу страницы, чтобы загрузиться. Под большими элементами подразумеваются:

• элементы img
• элементы image внутри svg
• элементы video
• элементы с фоновыми изображениями
• блочные элементы

В идеале LCP должен быть меньше 2,5 секунд.

First Input Delay (FID) определяет, как быстро пользователь может взаимодействовать с сайтом. Эта метрика учитывает время, необходимое браузеру для запуска обработчика события в ответ на действие пользователя: клик, нажатие, использование настраиваемых элементов управления JavaScript. Хороший рейтинг FID — меньше 100 мс. С этой метрикой паблишеры имеют проблемы реже всего. Однако, можно попасть в красную зону, если у вас есть много фоновых процессов, например, если вы используете много плагинов WordPress, работающих без остановки.

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

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

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

Core Web Vitals показывают текущий слепок эффективности вашего сайта в недавнем прошлом: окно Google — 28 дней. Вы должны брать в расчет, что для оценки оптимизаций нужно время для расчета метрик.

Сейчас Google поддерживает метрики Core Web Vitals через несколько инструментов: Lighthouse, PageSpeed и Chrome DevTools. Core Web Vitals могут измеряться сторонними средствами, использующими стандартные API, так что вы можете использовать подобные инструменты.

Самый простой способ протестировать свой сайт и узнать актуальный рейтинг — отчет PageSpeed от Lighthouse. В апреле Google добавил новый отчет по Page Experience в Search Console. Он отслеживаете все сигналы пользовательского опыта.

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

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

К несчастью, на Core Web Vitals могут повлиять элементы сайтов вроде тяжелых рекламных форматов, формы лид-магнитов или регистрации на рассылку.

В MGID мы вложили значительные ресурсы и оптимизировали рекламные решения для загрузки страницы и производительности браузера. Другие рекламные платформы могли отстать в применении новейших разработок. Стоит тщательно проверить и убедиться, что они достаточно оптимизированы под хороший рейтинг.

Мы уже внедрили некоторые улучшения и дополнительные возможности в наши виджеты, чтобы подготовиться к обновлению Core Web Vitals:

Самым распространенным камнем преткновения с Core Web Vitals, а точнее с LCP рейтингом, являются размеры изображений и файлов. Можно изменить размер изображений на правильное количество пикселей перед загрузкой на CMS платформу, чтобы избежать проблем. Также можно преобразовать изображения в формат WebP, использующий алгоритм сжатия неподвижных изображений. Последняя опция предпочтительней, потому что позволяет плавно подстроить размер пикселей к различным размерам экрана с лучшей степенью сжатия в сравнении с другими форматами.

После загрузки изображений на сервер доступны дополнительные инструменты для дальнейшего сжатия. Некоторые из них идут в формате плагинов к WordPress, например, reSmush.it, EWWW Image Optimizer, ShortPixel Image Optimizer и WP Smush. Также можно сжать изображения на своем сайте ретроспективно для улучшения пользовательского опыта на уже существующих страницах.

Чтобы ускорить свой веб-сайт, удалите ненужные скрипты и плагины. Вы можете использовать Google Tag Manager для сторонних скриптов, от которых невозможно отказаться. Установите триггер Window Loader, который отсрочит загрузку некритичных скриптов до полной загрузки всех основных элементов.

Загрузку веб-сайта могут замедлить определенные темы оформления и скачущая верстка. Это ухудшит рейтинг CLS. Можно предварительно проверить различные темы в лабораторных условиях и выбрать одну с лучшим рейтингом. Обычно это тема с наименьшим количеством фоновых изображений.

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

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

Можно применить отложенную загрузку не только для рекламы, но и для больших элементов веб-сайта, не показываемых пользователю изначально. Эта возможность оптимизации используется для отсрочки загрузки элементов до прокрутки до определенного места на странице. Отложенная загрузка может значительно улучшить First Input Delay (интерактивность) на веб-сайте. MGID виджеты поддерживают эту функцию.

Производительность хостинга и медленное время ответа сервера — другие распространенные причины плохого рейтинга Core Web Vitals. Для небольших веб-сайтов с проблемами загрузки может быть достаточно использовать плагины кэширования, например, WP Cache или WP Rocket. Для больших паблишинговых проектов с аудиторией из разных регионов рекомендуется сотрудничать с провайдерами CDN. Они поддерживают собственную сеть серверов и размещают копии веб-контента ближе к конечным пользователям.

С новым обновлением опыт пользования страницей станет более важным для паблишеров для достижения высокого рейтинга SEO и получения органического трафика. Google четко определил новые сигналы рейтинга. Теперь паблишеры могут приоритезировать их в оптимизации.

В большинстве случаев паблишеры должны найти правильный баланс между продвинутыми динамическими элементами, стилями и производительностью страницы при оптимизации Core Web Vitals. Большие фоновые изображения высокого качества, видео вверху страницы и динамические формы регистрации определенно могут замедлить веб-сайт.

В MGID опыт взаимодействия с нашими рекламными элементами всегда является основным приоритетом. Мы всегда отслеживаем новейшие идеи и технологии и внедряем лучшие решения браузеров, улучшающие производительность HTML, JavaScript и CSS.