Что такое Core Web Vitals и как увеличить скорость загрузки страниц

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

Core Web Vitals — это группа факторов ранжирования поисковой системы Google, которые были запущены в работу в мае 2021 года.

Что такое Core Web Vitals

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

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

Core Web Vitals — это группа факторов ранжирования поисковой системы Google, которые были запущены в работу в мае 2021 года.

Параметры метрики Core Web Vitals

LCP (Largest Contentful Paint) — скорость загрузки основного контента веб-страницы. Основной контент — это самый большой элемент на странице: текст, видео, картинка. Гугл сравнивает разницу между загрузкой основного контента и остальных элементов веб-страницы.

FID (First Input Delay) — время ожидания до начала взаимодействия пользователя с сайтом. Чем дольше пользователю приходится ждать момента, когда можно начать взаимодейтствовать со страницей (скроллить, кликать по ссылкам, наживать на кнопки) тем ниже лидогенерация и выше показатель отказов.

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

Как Core Web Vitals влияют на ранжирование

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

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

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

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

К каким показателям Core Web Vitals необходимо стремиться

Согласно данным сайта https://web.dev/ необходимо стремиться к следующим показателям:

Largest Contentful Paint (LCP): Скорость загрузки основного контента: измеряет производительность загрузки. Чтобы обеспечить удобство работы пользователей, показатель LCP должен быть в пределах 2,5 секунды от начала загрузки страницы.

First Input Delay (FID): Время ожидания до первого взаимодействия с контентом: измеряет интерактивность. Чтобы обеспечить удобство работы пользователей, показатель FID у страниц не должен превышать 100 миллисекунд.

Cumulative Layout Shift (CLS): Совокупное смещение макета: измеряет визуальную стабильность. Чтобы обеспечить удобство работы пользователей, показатель CLS не должен превышать 0,1.

Как оценить метрики Core Web Vitals на своем сайте

Оценить метрики на собственном сайте можно с помощью https://search.google.com/ в отчете Основные интернет-показатели.

Также проверить показатели на своем сайте можно через инструмент Google https://pagespeed.web.dev/.

Что такое скорость загрузки страниц

Скорость загрузки страниц – это время, за которое загружается контент на страницах сайта.

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

От скорости загрузки зависит поведение пользователей на сайте. Низкая скорость может приводить к увеличению количества отказов, что в свою очередь негативно скажется на продажах.

Почему скорость загрузки страниц является важным фактором ранжирования

Скорость загрузки страниц с 2010 года является фактором ранжирования в Google.

Данный фактор оказывает большое влияние на поведение пользователей (например, при низкой скорости загрузки страниц увеличивается количество отказов).

Соответственно скорость загрузки страниц влияет на лояльность пользователей (от скорости загрузки может зависеть совершит ли пользователь целевое действие на сайте и станет ли постоянным посетителем сайта).

Также скорость загрузки влияет на аналитику. Чем быстрее загружается страница – тем больше данных о пользователях попадает в системы аналитики.

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

Как быстро должна загружаться страница

Официальной информации от поисковых систем об оптимальном времени загрузки страницы нет.

Одна из наиболее распространенных рекомендаций – это скорость загрузки страниц за 3 секунды.

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

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

Как выявить проблемы со скоростью загрузки страниц

Как увеличить скорость загрузки страниц

Для увеличния скорости загрузки страниц рекомендуем рассотреть следующие гипотезы:

Проверять размер и количество chunks с помощью webpack-bundle-analyzer

Если проект собирается с помощью сборщика модулей webpack, перед релизом рекомендуем проверить количество и размер фрагментов кода chunks с помощью инструмента webpack-bundle-analyzer.

Анализ позволит выявить большие модули и лишние фрагменты кода и модули, которые загружаются неправильно.

С помощью webpack-bundle-analyzer вы сможете вручную выявить проблемы, замедляющие скорость загрузки страниц. 

Настроить кэширование и gzip сжатие скриптов и стилей

Включить кэширование и gzip сжатие скриптов и стилей можно на стороне хостинга, обратившись к провайдеру, либо самостоятельно через файл .htaccess.

Настроить отложенную загрузку lazy load для изображений

Lazy load – это способ отложенной загрузки изображений, в результате которого изображения загружаются не сразу с загрузкой страницы, а по мере скроллинга страницы до соответствующего изображения, либо по клику. 

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

При настройке Lazy load необходимо убедиться, что все изображения доступны для индексации до момента загрузки изображения.

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

Сжать размер больших изображений и использовать современные форматы

Рекомендуемый размер для изображений на сайте – 100-200 кб. Большое количество тяжелых изображений на странице может значительно снижать скорость загрузки страницы.

Настроить отложенную загрузку скриптов

Скрипты будут загружаться после полной загрузки страницы. Это позволит увеличить скорость загрузки страниц.

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

Убрать лишние счетчики аналитики 

Пример: счетчики систем аналитики и панелей веб-мастеров (Яндекс Метрика, Google Analytics, Яндекс Вебмастер и Google Search Console) можно добавить в Google Tag Manager и разместить в коде сайта только один код (вместо 4).

Перенести счетчики аналитики в footer

Перенос счетчиков системы аналитики в подвал сайта может положительно повлиять на скорость загрузки страницы.

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

Предзагружать шрифты, используемые на странице

Предзагрузку шрифтов можно настроить с помощью атрибута preload. 

Атрибут preload указывает браузеру на контент, который необходимо загрузить заранее. Таким образом браузер обнаружит важный контент в начале загрузки страницы. 

Использовать меньше сторонних библиотек. По возможности отказаться от Jquery и других библиотек и использовать нативный JS

Если не обойтись без Jquery, разместить её как можно ниже

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

Это позволит не только ускорить загрузку страницы, но и улучшить индексацию контента.

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

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

Использовать CDN-сеть

CDN (Content Delivery Network) – сеть доставки содержимого веб-страницы, предназначенная для оперативной доставки контента до пользователей. 

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

Увеличить скорость ответа сервера

Выявить проблемы со скоростью ответа сервера можно с помощью сервиса webpagetest.org.

Настроить Last-Modified

Last-Modified – это http-заголовок, который содержит информацию о дате и времени последнего изменения страницы.

Если страница не менялась, то роботы не будут повторно переходить на страницу. Тогда страница сохранится в кэше и пользователям не нужно будет заново жать загрузки страницы.

Это экономит время на загрузке страницы, а также краулинговый бюджет (сокращает нагрузку на роботов и ускоряет индексацию других страниц).

Подробнее о заголовке – https://last-modified.com/ru/last-modified-header

Уменьшить количество http-запросов, объединив несколько файлов / стилей / скриптов в один

Рекомендуем стремиться к минимизации и комплектации кода страницы. Если возможно объединить несколько небольших файлов со скриптами или стилями в один – рекомендуем это сделать. 

Сокращение количества компонентов на странице позволит уменьшить количество http-запросов и, соответственно, увеличить скорость загрузки страницы. 

Заключение

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