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

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

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

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

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

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

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

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

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

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

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

Одна стоит учитывать, что 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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