Google Core Web Vitals и что нужно делать, чтобы избежать потери трафика

Заметили резкое падение посещаемости сайта за последний год? Вероятным виновником является обновление Google Core Web Vitals.

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

Звучит знакомо? Продолжайте читать, если это относится к вашему опыту или если вы хотите защитить свой веб-трафик от штрафов в результате будущих обновлений Core Web Vitals (CWV).

Эта статья основана на одном из наших популярных вебинаров. Посмотреть видео и скачать слайды:

Как обновление Google Core Web Vitals изменило правила SEO

Когда дело доходит до SEO, есть много вещей, которые вы не можете контролировать. Вы не можете контролировать Google. Вы не можете контролировать, кто заходит на ваш сайт или какие страницы они посещают.

Но вы можете контролировать архитектуру, разработку и скорость вашего сайта.

Что такое Core Web Vitals?

Core Web Vitals (CWV) — это способ Google измерить, что поисковая система считает важным для производительности веб-сайта, то есть скорость и отзывчивость. Есть три элемента:

1. Крупнейшая отрисовка содержимого (LCP) — сколько времени требуется для загрузки страницы? Обычно измеряется в секундах или, если ваш сайт исключительно медленный, в десятках секунд.
2. Задержка первого ввода (FID) — сколько времени требуется, прежде чем веб-сайт начнет реагировать на щелчок пользователя или взаимодействие? Обычно измеряется в миллисекундах.
3. Кумулятивное смещение макета (CLS) — насколько сайт меняется при загрузке? Обычно измеряется в секундах.

Google измеряет эти элементы двумя способами. Лабораторные данные , когда вы вводите свою веб-страницу в часть программного обеспечения или инструмент тестирования (подробнее об этом позже). И данные поля , основанные на реальных действиях пользователей на вашем сайте.

Google не будет иметь или использовать данные полей для каждой страницы, но будет определять, что он измеряет, на основе объема трафика. Чем выше объем, тем больше вероятность того, что будут актуальные полевые данные. Кроме того, Google может объединять эти данные по всему сайту. Это скопление может вызвать много обострений. Почему? Если у вас много посетителей от людей с плохой связью, таких как мобильные телефоны с подключением 3G или места в мире, где еще нет оптоволокна, этот трафик может исказить данные. Таким образом, для Google ваш сайт может показаться медленным, даже если для других пользователей это нормально, а лабораторные данные показывают, что у вас высокопроизводительный сайт.

Почему CWV важны?

Это пример сайта, который пострадал от обновления CWV и потерял половину своего трафика за три месяца. Ой. Эти данные поступают из Google Search Console (подробнее об этом позже).

Google наказывает медленные сайты, потому что пользователям не нравятся медленные сайты. Что Google пытается сделать с CWV, так это сделать Интернет более ориентированным на пользователя, и это хорошо. Пользовательский опыт имеет значение, когда вы продаете вещи. Показатели конверсии падают на каждую дополнительную секунду времени загрузки до пяти секунд, а затем падают на 4,42 процента. Короче говоря, если ваш сайт загружается за шесть секунд, а сайт вашего конкурента загружается за одну секунду, у них будет более высокий коэффициент конверсии, чем у вас.

Обновление Core Web Vitals просто расставило приоритеты по этим факторам, когда дело доходит до SEO-игры. Если вы хотите продолжать играть, вы должны признать, что правила изменились. Затем адаптируйтесь.

Как измерить основные веб-жизненные показатели вашего сайта

Увидеть проблему — это первый шаг к ее решению. К сожалению, не существует единого инструмента, который решит все ваши проблемы с измерением и оптимизацией CWV.

То, что вы пытаетесь сделать, это проверить, влияет ли изменение чего-либо на вашем веб-сайте на трафик, верно? Итак, вы вносите изменения, ждете, пока реальные пользовательские данные соберутся в течение месяца или двух (лабораторные данные могут только предсказывать), а затем ждете, пока Google заметит.

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

1. Консоль поиска Google

Google Search Console **** – это бесплатный инструмент, который вы обязательно должны использовать, если вам нужны реальные данные о CWV на вашем сайте в целом. Сколько страниц хорошо оцениваются? Сколько нуждаются в улучшении? Сколько баллов плохо? Зеленый, желтый, красный. Это единственное место, где вы можете получить собственный отчет Google на этом уровне.

Вы можете попросить Google провести официальную проверку вашего сайта, нажав «Повторить проверку», и Google начнет собирать или проверять полевые данные в течение нескольких недель. Говорят, что до 28 дней.

Да, вы не ослышались. Обновление данных занимает месяц. Это очень медленная петля обратной связи.

2. Кликио

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

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

Предупреждение о вреде для здоровья: инструмент показывает интерпретацию Clickio данных Google. Он НЕ показывает вам то, что видит Google. Это лучший опережающий индикатор, который мы нашли для решения потенциальных проблем CWV без необходимости ждать месяцами, чтобы получить какую-либо обратную связь, и он обеспечивает хорошую степень детализации , например данные по странам. Но это не настоящие данные Google. Поскольку это данные в режиме реального времени , вам нужно подождать некоторое время, чтобы накопилось достаточно значимых данных, прежде чем вы сможете с уверенностью сказать, сработало ли внесенное вами изменение или нет. Это не мгновенно, но и вам не нужно ждать целый месяц, чтобы он обновился.

3. Google Аналитика

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

4. Студия данных Google

Google Data Studio показывает процент производительности вашего сайта для каждого из основных веб-показателей. По сути, это история изменений во времени. Улучшения, в идеале.

Было бы замечательно, если бы это было в реальном времени. Если бы вы могли просмотреть последние 28 дней в непрерывном порядке, вы бы знали, что то, что вы делаете, имеет эффект. К сожалению, Google обновляет этот ежемесячно с опозданием в середине следующего месяца. Это еще более медленная обратная связь, чем в Google Search Console. Таким образом, это моментальный снимок ретроспективных данных. Полезно для отслеживания прогресса, но медленно.

5. Web.dev — Маяк

Web.dev, сайт, принадлежащий Google, предоставляет инструмент с открытым исходным кодом под названием Lighthouse. Этот инструмент предоставляет лабораторные данные на отдельных страницах. Вы вводите URL-адрес, и он сообщает вам доступность производительности, лучшие практики, оценку SEO и т. Д. Вы можете увидеть больше данных, если вы нажмете «Просмотреть древовидную карту» в приложении.

В данных есть некоторая изменчивость, поскольку данные могут немного меняться в зависимости от вашего браузера, времени суток, кэширования или других видов «интернет-погоды». Тем не менее, это все еще довольно хорошо.

6. Web.dev — статистика PageSpeed

Google PageSpeed ​​Insights — это место, где вы получите данные полей на уровне страницы. Опять же, вы вводите URL-адрес, и он предоставит вам данные поля для LCP, CLS, FID и так далее. Однако вам нужен определенный объем трафика на страницу, чтобы получить приличные полевые данные.

7. GTmetrix

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

Мы предлагаем использовать этот инструмент и инструменты web.dev в сочетании, чтобы измерить, какие изменения сработали на каждой странице.

8. Отладчик

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

Как оптимизировать свой веб-сайт, чтобы улучшить Core Web Vitals

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

1. Перезагрузите свой сайт

Это не перестройка или изменение дизайна вашего сайта. Он просто перемещает его куда-то еще. Как правило, мы видим улучшение производительности примерно на 30 процентов для сайтов, которые мы переносим с WordPress на HubSpot.

Если вы придерживаетесь WordPress, перенос вашего сайта в специализированную хостинговую компанию, такую ​​​​как WP Engine, которая действительно знает о производительности, может иметь большое значение.

Разместив свой сайт на HubSpot (или WP Engine), вы получите следующие преимущества:

• Кэширование — ускоряет загрузку сайтов после первого посещения. Обычному сайту WordPress потребуется плагин для кэширования, но в HubSpot он уже встроен.
• Сеть доставки контента (CDN), например Akamai, доставляет файлы пользователю с локального сервера, даже если ваш веб-сайт размещен в другом месте.
• CloudFlare DNS — в основном, это помогает ускорить работу сервера доменных имен.

2. Отключите код социальных сетей HubSpot.

Если вы уже пользуетесь HubSpot, самый быстрый выигрыш — отключить код HubSpot для социальных сетей в своем блоге. HubSpot оставляет эти кнопки включенными по умолчанию, что раздражает. Это удалит около 450 килобайт кода JavaScript с каждой страницы вашего блога.

Сделайте снимок скорости страницы и времени загрузки до и после в GTmetrix и web.dev. Это действительно приятно.

3. Сжимайте изображения

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

Но позже благонамеренные маркетологи добавят избранные изображения в блоги и страницы и вдруг. Бам. Ваш сайт замедляется из-за файла изображения размером 40 МБ, который мог бы украсить борт большого самолета.

Сжимайте изображения до размера <250 КБ, в идеале — до 100 КБ. Конвертируйте изображения в jpg или используйте svgs везде, где это возможно. Будьте особенно осторожны с логотипами, особенно с логотипами в нижнем колонтитуле, поскольку они есть на каждой странице вашего сайта.

Опять же, если у вас есть HubSpot, Articulate создала инструмент под названием Fizz+Ginger для сжатия изображений в сообщениях блога и на страницах веб-сайтов в HubSpot.

4. Избегайте встраивания

Это снимок экрана со страницы нашего сайта со встроенной презентацией, встроенным видео YouTube, всплывающим окном, изображениями и некоторыми активными социальными сетями. Все это в сумме составило шесть мегабайт просто… материала. Убрав как можно больше этого, страница загружалась намного быстрее. Например, мы заменили встроенные видео миниатюрами со ссылками.

5. Упростите свои маркетинговые инструменты

Маркетинговые инструменты добавляют вес страницы. Такие вещи, как Hot Jar или Lucky Orange, которые отслеживают использование страниц, или отслеживают призывы к действию, или Диспетчер тегов Google — наличие этих инструментов на вашем сайте полезно, но они имеют свою цену. Цена — это производительность. Так что использовать их нужно экономно и разумно.

6. Включите AMP

Есть стандарт от Google, который называется ускоренными мобильными страницами или AMP. С AMP вы получаете молниеносное время загрузки. Если пользователь нажимает на результат поиска в браузере Google, ему будет показана AMP-версия страницы с серверов Google.

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

7. Оптимизируйте свой код

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

• Минимизация Javascript и CSS
• Отложенная загрузка Javascript
• Ленивая загрузка по умолчанию
• Самоусиливание (например, не показывать избранные изображения блога на мобильных устройствах)
• Надлежащие методы кодирования в процессе разработки
• Минимальное использование плагинов и внешнего кода

Пользовательский опыт — метрика веб-сайта будущего

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

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

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