Core Web Vitals. Основы оптимизации сайта под новый фактор ранжирования

автор Alla Rud

Core Web Vitals один из сотен факторов ранжирования в поисковой сети. 11 ноября 2020 года Google объявил, интеграция Core Web Vitals и ранее существовавших сигналов ранжирования, связанных с UX  должна произойти в мае 2021 года. И вот не так давно это произошло.

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

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

✓Время отрисовки основного контента (LCP)

✓Задержка после первого ввода (FID)

✓Смещение пакета при отрисовке (CLS)


Почему важны показатели Core Web Vitals?

В связи с растущим значением удобства использования страниц, вот некоторые из факторов, которые Google считает важными:

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

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

У Google есть около 200 факторов ранжирования, которые необходимо учитывать, и удобство работы со страницей является одним из многих

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

Специалистам по маркетингу и тем, кто занимается разработкой сайтов, очень важно знать, каким образом Core Web Vitals может влиять на эффективность SEO-кампании. Это дает веб-мастерам и SEO-аналитикам представление о том, как оптимизировать сайт и как можно повлиять на результаты рейтинга. Для владельцев бизнеса понимание мотивации покупателя может помочь улучшить взаимодействие с пользователем на странице сайта через UX и UI возможности.

Как измерять основные показатели сайта?

Недавно Google создал новые тесты, отчеты и расширения для анализа производительности Core Web Vitals. Наиболее важные из них:

DevTools Chrome и отчет Chrome User Experience Report (CrUX) также могут помочь вам проанализировать LCP, CLS и FID.

Как оптимизировать сайт для Core Web Vitals

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

Анализ и отладка LCP

LCP измеряет время, необходимое для загрузки самого большого элемента содержимого. Этот элемент может быть изображением (включая фоновое изображение в CSS), видео или блоком текста. Все, что меньше 2,5 с, считается хорошей оценкой LCP. Если самый большой элемент  на странице загружается быстрее, чем 75% всех записанных страниц, страница проходит оценку LCP.

LCP PageSpeed ​​Insights. Простой способ проверить, какой элемент запускает эту метрику, - запустить страницу через PageSpeed ​​Insights, прокрутить вниз до раздела «Диагностика» и щелкнуть «Самый большой элемент Contentful Paint».

Диагностика PSI. То же самое можно сделать с помощью DevTools Chrome. Откройте страницу, которую вы хотите проанализировать, в Chrome, щелкните правой кнопкой мыши, выберите «Проверить» и перейдите в «Производительность».

Панель производительности в DevTools. Нажмите кнопку «Обновить» и дождитесь, пока Chrome проанализирует страницу. Когда отчет будет готов, вы увидите небольшой значок LCP в разделе «Сроки». Когда вы наводите на него курсор, он окрашивает самый большой элемент страницы в синий цвет.

Как улучшить время LCP

+ Выбирайте самый лучший хостинг для своего сайта и самый производительный тариф. Быстрое время отклика сервера важно для скорости сайта.

Если вы используете медленный общий хостинг, подумайте о переходе на выделенный тарифный план, например, VPS/VDS.

+ Реализуйте критический CSS.

+ Оптимизируйте изображения. Часто основной причиной медленных сайтов является необходимость сжатия изображений, изменения размера и преобразования в правильный формат.

Анализ и отладка CLS

CLS измеряет совокупное смещение макета при отрисовке. Неожиданные сдвиги макета происходят, когда содержимое на странице перемещается без ввода данных пользователем. Оценка CLS ниже 0,1 означает, что страница визуально стабильна. Если это верно для 75% записанных загрузок страниц, страница проходит оценку CLS.

Оценка CLS. Чтобы вычислить ваш показатель CLS, Google отвечает на два вопроса: Насколько сильно смещение повлияло на область просмотра? Насколько далеко перемещались элементы во время сдвига по сравнению с окном просмотра?

PageSpeed ​​Insights может показать вам, какие элементы влияют на CLS на странице. DevTools Chrome также помогает обнаруживать неожиданные сдвиги в макете.

Как исправить проблемы с CLS

+ Избегайте размещения рекламы и всплывающих окон над другим контентом. 

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

+ Зарезервируйте место для рекламы, iFrame и динамического контента. Подобно изображениям и видео, эти элементы также могут вызывать сдвиг макета, если для них не зарезервировано место. Используйте контейнеры правильных размеров и свойство overflow: hidden, чтобы контент не переполнял свой контейнер;

+ Оптимизируйте доставку шрифтов. 

Анализ и настройка FID

FID измеряет, сколько времени требуется браузеру, чтобы начать обработку первого взаимодействия пользователя со страницей. Этот показатель отслеживает задержки только после определенных действий, таких как щелчки или касания. Прокрутка и увеличение не влияют на FID. Чтобы попасть в зеленую зону, FID страницы должен быть меньше 100 мс для 75% всех загрузок страниц.

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

JavaScript (JS) обычно является основной причиной проблем с FID. Чрезмерное использование JS может привести к долгим задачам, которые представляют собой периоды времени, когда ваш пользовательский интерфейс может не реагировать на взаимодействие с пользователем. 

Пользователи мгновенно уходят и, в большинстве случаев, не возвращаются, если сайт разочаровал их при первом посещении.

Анализ основного раздела в DevTools. Вы можете найти все задачи длиной более 50 мс в разделе «Основные». Эти задачи окрашены в серый цвет с красной накладкой. Анализ «снизу вверх» позволяет группировать файлы по URL-адресам и точно определять причины задержек. WebPageTest - еще один отличный способ найти проблемные области. Вы сможете найти фрагменты кода, которые блокируют основной поток.  

Как исправить проблемы с FID

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

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

+ Отложите или удалите некритические сторонние скрипты. Сторонние скрипты иногда могут препятствовать своевременному выполнению ваших собственных скриптов. 

+ Оптимизируйте CSS. Хотя JS - главный злодей FID, CSS также по умолчанию блокирует рендеринг. Вот почему чрезмерное использование CSS также может навредить пользователю. Помимо внедрения Critical CSS, также стоит сократить неиспользуемый CSS на вашем сайте.  Информация о способах оптимизации сайта - перевод с nitropack.io. 

Влияние хостинг-провайдера на Core Web Vitals

Вот несколько важных факторов, которые позитивно повлияют на оптимизацию вашего сайта:

Если все эти пункты выполнены на вашем хостинг-провайдере, то это хороший показатель для Core Web Vitals. А если нет, то переходите на надежный и профессиональный хостинг от компании ГиперХост:

Хостинг от ГиперХост