Как проверить скорость загрузки сайта — на что влияет скорость загрузки сайта и как ее улучшить

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

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

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

Медленный сайт ухудшает впечатление от взаимодействия с брендом, что может отразиться на уровне доверия и лояльности клиентов. Опрос Unbounce показал, что 70% потребителей готовы отказаться от покупки, если сайт интернет-магазина медленно загружается. С каждой секундой ускорения работы сайта коэффициент конверсии увеличивается в среднем на 17%. 

Статистика о влиянии скорости работы сайта на конверсию

Основные метрики скорости загрузки

Разберем важные метрики скорости загрузки страницы:

• Time To First Byte, TTFB. Скорость, с которой сервер отвечает на запрос пользователя и начинает передачу первых данных на его компьютер. Хороший показатель — TTFB до 0,8 секунды. Все, что выше этого значения, лучше оптимизировать. 
• First Contentful Paint, FCP. Время, за которое браузер начинает отображать первое содержимое страницы. В этот момент пользователь уже начинает видеть что-то на экране, даже если загрузка сайта не завершена. Оптимальный показатель — FCP меньше 1,8 секунды. Если значение от 1,8 до 3 секунд, нужны небольшие доработки, а если выше 3 секунд, то страница плохо оптимизирована.  
• Largest Contentful Paint, LCP. Время, необходимое для отрисовки основного контента на странице — видео, текстового блока, фотографий или других важных материалов. Отличный LCP — менее 2,5 секунд, средний — от 2,5 до 4 секунд, плохой — выше 4 секунд. 
• Interaction to Next Paint, INP. Время между первым пользовательским взаимодействием (нажатием кнопки, скроллом или жестом на сенсорном экране) и моментом, когда страница ответила на него. INP показывает, насколько быстро сайт реагирует на запросы. Значение меньше 200 миллисекунд говорит о хорошей оптимизации. 
• Cumulative Layout Shift, CLS. Время, в течение которого интерфейс страницы может меняться в процессе загрузки — например, когда картинки сдвигаются, а на их месте появляется текст или кнопки. Хороший CLS — 0,1 секунды и меньше.

Информация о рекомендуемых показателях взята из руководства Google. 

Ключевые метрики скорости загрузки сайта

От чего зависит скорость загрузки сайта

К снижению скорости загрузки могут привести следующие факторы:

• Неоптимизированные изображения. Чем больше размер и вес файлов, тем медленнее они загружаются. Если таких картинок много, производительность сайта падает.
• Сложные CSS-анимации. Визуальные эффекты привлекают внимание посетителей. Но если их в избытке, то страница может загружаться медленнее, чем обычно. 
• Многочисленные ошибки в верстке. Чем чище и оптимизированнее код, тем быстрее работает сайт. Верстка, содержащая ошибки или лишние элементы, может снизить производительность ресурса.
• Особенности движка (Content Management System или CMS). Некоторые CMS могут генерировать избыточный код и создавать множество лишних запросов к серверу, тем самым замедляя загрузку страницы. 
• Качество сервера, на котором расположен проект. Хостинг напрямую влияет на скорость загрузки страниц. Если сервер медленно отвечает на запросы, то значения TTFB и других метрик будут далеки от идеала.   
• Местоположение сервера. Чем ближе он к пользователю, тем быстрее будет загружаться сайт. Поэтому выбирайте хостинг, сервера которого расположены в той же стране, где находится большая часть вашей аудитории. 
• Избыточное количество скриптов и плагинов. Некоторые дополнения полезны и улучшают пользовательский опыт, но если таких плагинов много, то количество запросов к серверу возрастает и скорость работы сайта снижается. 

Любой из этих факторов может повлиять на производительность, поэтому при оптимизации сайта уделяйте внимание каждому из них.   

Неоптимизированные изображения и скрипты замедляют работу проекта

Влияет ли скорость загрузки на SEO-продвижение

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

Несмотря на эти заявления, нельзя сказать, что скорость загрузки напрямую влияет на позиции сайта в выдаче. Обе поисковые системы учитывают этот фактор лишь как один из множества. Быстрая работа ресурса может уменьшить показатель отказов, увеличить количество просмотров страниц и время, которое человек проводит на сайте. Все это положительно сказывается на поведенческих факторах и в перспективе — на позициях сайта в выдаче. Следовательно, влияние скорости загрузки сайта на SEO не прямое, а скорее косвенное. Главную роль продолжает играть контент и авторитетность ресурса. Если сайт не интересен посетителям и не содержит полезной информации, то одна лишь быстрая загрузка страниц не выведет его в ТОП выдачи. И наоборот, если проект качественный и имеет хорошие поведенческие факторы, то незначительные недочеты в его оптимизации вряд ли приведут к падению позиций.

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

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

Google PageSpeed Insights

PageSpeed Insights — бесплатный сервис для проверки скорости загрузки сайта от Google. Анализирует мобильные и десктопные версии страниц и дает рекомендации по их улучшению. Проверяет такие показатели, как LCP, INP, CLS, FCP, FID (с марта 2024 года включен в INP), TTFB. Скорость работы можно оценить по цветной шкале: если показатель находится в пределах зеленых значений, то все в порядке и сайт загружается быстро. 

Проверка скорости в PageSpeed Insights

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

PageSpeed Insights проверяет SEO-оптимизацию

Доступные улучшения показаны в разделе «Диагностика». Чтобы повысить скорость загрузки сайта, Google Page Speed рекомендует уменьшать размер изображений, удалять неиспользуемые коды JavaScript, настраивать кеширование объектов. 

Рекомендации PageSpeed Insights

PR-CY

PR-CY — российский сервис аналитики, где можно проверить скорость загрузки и SEO-оптимизацию страниц, позиции в поисковых системах. Инструмент оценивает метатеги, размер и формат изображений, оптимизацию кода страницы, структуру, наличие редиректов, задержки со стороны сервера и все основные метрики, о которых было сказано выше. 

Проверка в PR-CY

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

Рекомендации PR-CY по доработке сайта

WebPageTest

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

Сервис WebPageTest

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

Настройка параметров проверки в WebPageTest

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

Результаты WebPageTest

Loading.express

Loading.express — сервис для оценки производительности мобильной версии страниц. Определяет, как быстро загружается сайт, сколько HTTP-запросов передается серверу и какой вес у проверяемой страницы. 

Сервис Loading.express

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

Результаты Loading.express

Webvitals.ru

Webvitals.ru — дополнительный сервис от Loading.express. Отображает историю значений основных метрик: LCP, CLS, TTFB, FCP, INP. Доступна статистика за последние несколько месяцев. 

Сервис Webvitals.ru

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

Проверка истории по сервису Webvitals.ru

Отчеты веб-аналитики: Яндекс.Метрика и Google Analytics

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

В Яндекс.Метрике посмотреть информацию о производительности ресурса можно в разделе «Отчеты» → «Мониторинг» → «Время загрузки страниц». 

Проверка скорости сайта по Яндекс.Метрике

В отчете показано, насколько быстро сайт загружается в разных регионах, сколько времени проходит до отрисовки страницы, есть ли редиректы. Метрики называются иначе, чем в Google PageSpeed Insights: «Время до отрисовки» обозначает задержку до загрузки первого контента (FCP), а «Время до загрузки Doom» — задержку до интерактивного взаимодействия (INP). 

В Google Analytics информация о производительности ресурса находится в разделе «Отчеты» → «Поведение» → «Скорость загрузки сайта». 

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

Статистика скорости загрузки в Google Analytics

Отчет «Ускорение загрузки» показывает средние значения по всем страницам. Для каждого URL есть рекомендации от сервиса PageSpeed для повышения производительности.  

Рекомендации PageSpeed в Google Analytics

Как повысить скорость загрузки

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

• Уменьшите количество HTTP-запросов. При загрузке каждого элемента страницы, будь то изображение, скрипт или стиль, создается запрос к серверу. Для сокращения числа таких запросов объединяйте изображения с помощью CSS-спрайтов, группируйте JavaScript и CSS.
• Минимизируйте CSS и JS-файлы. Сократить код можно путем удаления пустых строк, комментариев и пробелов из этих документов. Минимизированные файлы работают так же, как и обычные, но весят на 10-20% меньше. 
• Загружайте JS-файлы в конце. Файлы скриптов лучше размещать в конце страницы перед закрывающим тегом </body>, чтобы их загрузка не тормозила отрисовку основного контента. 
• Отключите лишние плагины, счетчики и библиотеки. Оставьте только необходимые модули и системы аналитики, а остальные уберите из кода страницы. 
• Используйте CDN (Content Delivery Network, сеть доставки контента). Это сеть серверов, которые находятся в разных странах и городах, но тесно взаимосвязаны друг с другом. Они дублируют информацию с главного сервера и подключаются к передаче данных, если на сайт зашел посетитель из ближайшего к ним региона. Допустим, основной сервер находится в Москве, а дополнительный — в Красноярске. Когда на сайт зайдет посетитель из Красноярска или ближайших областей, контент загрузится не с основного, а с дополнительного сервера, так как географически он находится ближе.  
• Оптимизируйте изображения. Картинки перед добавлением рекомендуется уменьшать в размерах и сжимать с помощью сервисов TinyPNG, Optimizilla или других компрессоров. Эти инструменты урезают вес изображения без потери качества. Там, где не нужны большие картинки, используйте превью. 
• Используйте Gzip-сжатие. При таком методе сервер сжимает файлы HTML, CSS и JavaScript и передает их в браузер клиента в виде архива. Затем браузер их распаковывает и загружает страницу на компьютере пользователя. Сжатая информация передается быстрее, поэтому способ эффективен для улучшения производительности сайта. 
• Настройте кеширование. При загрузке сайта браузер сохраняет данные в свой кэш. Если пользователь перейдет на другую страницу сайта, то программа не станет заново запрашивать информацию у сервера, а загрузит файлы из собственной памяти. Для настройки кеширования укажите браузеру, какую информацию ему следует сохранять. Это можно сделать через файл htaccess.
• Сократите количество редиректов. Каждый редирект требует дополнительного запроса к серверу, что может замедлить загрузку страницы. Поэтому следует ссылаться на ресурсы напрямую, минимизируя количество перенаправлений.

В заключение

Скорость загрузки сайта — важный показатель, который может повлиять на количество отказов, конверсию и пользовательский опыт. Проверить метрики производительности можно с помощью специальных сервисов и систем аналитики. Если показатели окажутся низкими, постарайтесь по возможности устранить найденные недочеты — оптимизируйте медиаконтент и код страницы, включите кеширование и Gzip-сжатие, перенесите сайт на более быстрый сервер или подключите CDN.