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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У поисковой системы Google есть алгоритм Core Web Vitals, который анализирует показатели:

  • LCP (Largest Contentful Paint) - время отрисовки крупного контента на странице в области просмотра. Отсчет времени загрузки начинается с момента, когда пользователь запрашивает URL страницы. Самым крупным элементом может являться изображение, видео, или блочный элемент с текстовым контентом.

  • FID (First Input Delay) - время реакции браузера на взаимодействие пользователей с сайтом (например, сколом или нажатием на кнопку). Данный показатель позволяет оценить, на сколько эффективная страница и с какой скоростью реагируют интерактивные элементы на страницы.

  • CLS - значение смещения контента при загрузке страницы. Если смещения нет, то значение будет равно нулю.

Оптимальные значения показателей для высокой скорости загрузки:

  • CLS не выше 0,1
  • LCP не выше 2,5 сек.
  • FID не выше 100 мс

Проверить данные показатели можно с помощью сервиса Google - https://pagespeed.web.dev/ и сервиса https://www.webpagetest.org/.
Рекомендации по улучшению скорости загрузи страниц
Рекомендации по улучшению скорости загрузи страниц

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

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

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

С помощью webpack-bundle-analyzer вы сможете вручную выявить проблемы, замедляющие скорость загрузки страниц. 
2
Настроить кэширование и gzip сжатие скриптов и стилей
Включить кэширование и gzip сжатие скриптов и стилей можно на стороне хостинга, обратившись к провайдеру, либо самостоятельно через файл .htaccess.
3
Настроить отложенную загрузку lazy load для изображений
Lazy load - это способ отложенной загрузки изображений, в результате которого изображения загружаются не сразу с загрузкой страницы, а по мере скроллинга страницы до соответствующего изображения, либо по клику. 

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

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

Также рекомендуем для улучшения индексации заполнять у изображений теги alt и title и отражать в данных тегах основное содержание изображений.  
4
Сжать размер больших изображений и использовать современные форматы
Рекомендуемый размер для изображений на сайте - 100-200 кб. Большое количество тяжелых изображений на странице может значительно снижать скорость загрузки страницы.
5
Настроить отложенную загрузку скриптов
Скрипты будут загружаться после полной загрузки страницы. Это позволит увеличить скорость загрузки страниц.

Стоит проверить, чтобы весь контент на странице загружался вместе загрузкой страницы и был доступен для индексации.
6
Убрать лишние стили или загружать их динамически
7
Убрать лишние счетчики аналитики 
Пример: счетчики систем аналитики и панелей веб-мастеров (Яндекс Метрика, Google Analytics, Яндекс Вебмастер и Google Search Console) можно добавить в Google Tag Maneger и разместить в коде сайта только один код (вместо 4).
8
Перенести счетчики аналитики в footer
Перенос счетчиков системы аналитики в подвал сайта может положительно повлиять на скорость загрузки страницы.

Такой подход часто вызывает споры между SEO-специалистами и аналитиками, так как при размещении счетчиков в конце страницы данные аналитики в некоторых случаях могут не собраться (например, при низкой скорости загрузки страницы).
9
Вынести стили, которые используются для каркаса первого экрана страницы в inline и сделать предзагрузку оставшихся стилей
10
Предзагружать шрифты, используемые на странице
Предзагрузку шрифтов можно настроить с помощью атрибута preload. 

Атрибут preload указывает браузеру на контент, который необходимо загрузить заранее. Таким образом браузер обнаружит важный контент в начале загрузки страницы. 
11
Контент сторонних ресурсов (например, онлайн консультант) загружать отдельно, например при скроле или первом движении мыши
12
Использовать меньше сторонних библиотек. По возможности отказаться от Jquery и других библиотек и использовать нативный JS
13
Если не обойтись без Jquery, разместить её как можно ниже
Рекомендуем настроить загрузку страницы таким образом, чтобы сначала загрузился основной контент страницы, а затем скрипты, стили, библиотеки и прочие элементы веб-страницы.

Это позволит не только ускорить загрузку страницы, но и улучшить индексацию контента.
14
Всплывающие окна загружать через несколько секунд после загрузки страницы, либо отказаться от всплывающих окон.
По возможности рекомендуем вообще отказаться от всплывающих окон. Такой функционал, кроме снижения скорости загрузки страниц, может привести к росту количества отказов. 
15
Использовать CDN-сеть
CDN (Content Delivery Network) - сеть доставки содержимого веб-страницы, предназначенная для оперативной доставки контента до пользователей. 

CDN хорошо справляется с задачей по передаче адаптивных изображений, что экономит время и ресурсы на загрузке больших изображений. 
16
Увеличить скорость ответа сервера
Выявить проблемы со скоростью ответа сервера можно с помощью сервиса webpagetest.org.
17
Настроить Last-Modified
Last-Modified - это http-заголовок, который содержит информацию о дате и времени последнего изменения страницы.

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

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

Подробнее о заголовке - https://last-modified.com/ru/last-modified-header
18
Уменьшить количество http-запросов, объединив несколько файлов / стилей / скриптов в один
Рекомендуем стремиться к минимизации и комплектации кода страницы. Если возможно объединить несколько небольших файлов со скриптами или стилями в один - рекомендуем это сделать. 

Сокращение количества компонентов на странице позволит уменьшить количество http-запросов и, соответственно, увеличить скорость загрузки страницы. 
Пожалуйста, оцените статью
Читайте далее
Автор статьи
Дмитрий Лашманов
SEO-специалист
Опыт работы в SEO 4 года
60+ реализованных проектов

Дополнительные курсы:

SEO в СНГ - Rush Academy
SEO на запад - Rush Academy
UX/UI-дизайн - Skillbox
Школа экспертов Нетологии