Как проверить скорость загрузки сайта?

Скорость загрузки страниц — один из параметров, по которым поисковые системы Яндекс и Google ранжируют сайт. Кроме того, скорость загрузки прямо влияет на поведенческие характеристики посетителей и, следовательно, показатели конверсии (иначе говоря, вашу прибыль - ave SEO!). По данным Google, показатель конверсии мобильной страницы выше на 15%, если скорость загрузки не превышала 2 секунд. Сайт может быть бесконечно прекрасен как с точки зрения UI, так и с точки зрения функционала, однако если страницы прогружаются более 6 секунд — вряд ли пользователь будет им пользоваться.

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

В мае 2021 года Google представил новую группу факторов, по которым происходит ранжирование сайта — Web Vitals. Нас интересуют три ключевых фактора (Core Web Vitals), два из которых как раз оценивают скорость сайта и его ответ на действия пользователя, а третий отвечает за стабильность контента страниц:

— Largest Contentful Paint (отрисовка основного контента). Время, за которое загружается самый крупный элемент страницы. Оптимальный показатель — до 2,5 секунд.

— First Input Delay (задержка первого ввода). Время с первой попытки пользователя взаимодействовать с контентом сайта до момента, когда сайт способен обработать это обращение. Оптимальный показатель — до 100 милисекунд.

— Cumulative Layout Shift (совокупное смещение макета). Визуальная стабильность контента. Чем ниже значение, тем менее явно будет заметно смещение остального контента при резкой загрузке тяжёлого (например, картинки высокого разрешения). Оптимальный показатель — до 0,1.

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

— PageSpeed Insights. Подопечный Google, который может промониторить скорость загрузки страниц сайта. Делает это как для ПК, так и для мобильных устройств. Кроме того, по окончании анализа предоставит вам рекомендации по оптимизации сайта. Из минусов: рекомендации достаточно общие, поэтому их внедрение необязательно принесёт реальный результат;

Результаты анализа на примере сайта Старты

— WebPageTest. Ещё один сервис, который достаточно подробно анализирует скорость загрузки сайта. Проводит три теста и анализирует сайт по нескольким параметрам: скорость ответа сервера (First Byte Time), постоянство HTTP-соединения (Keep-alive Enabled), zip-сжатие информации при передаче с сервера (Compress Transfer), изображения (Compress Images) и кэширование (Cache static content). В отчёте предоставляет так называемый «водопад» — скорость загрузки каждого элемента страницы. Из минусов: интерфейс на английском языке.

Результаты анализа на примере сайта Старты

— Pingdom. Удобный сервис, который замеряет скорость загрузки контента сайта. Показывает точный вес изображений, кода и шрифтов. Единственный из перечисленных сервисов, который позволяет выгрузить результаты проверки в формате json. Из минусов: английский язык, детальный обзор только контентной части.

Результаты анализа на примере сайта Старты

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

Невероятно, но факт — скорость загрузки страницы зависит не только от количества и тяжести контента, и даже скрипты тут не при чём. Если мы проследим за процессом загрузки от момента ввода пользователем URL до просмотра контента страницы, получим следующие этапы:

1. DNS-запрос браузера по имени сайта;
2. ТСР-подключение к серверу, на котором находится сайт;
3. Установка соединения http или https;
4. Запрос нужной страницы и загрузка HTML-кода;
5. Парсинг HTML и загрузка внешних ресурсов, связанных со страницей (картинки, виджеты и пр.);
6. Загрузка финальной версии страницы и исполнение JavaScript-кода.

Исходя из выделенных этапов можно выделить три основных источника, на которых и происходит «подвисание» страниц сайта: связь с сервером, проблемы в коде и контент.

Связь с сервером

В первую очередь стоит проверять скорость ответа сервера на пользовательские запросы — т. е. время, которое прошло с момента взаимодействия с интерфейсом сайта и загрузки первого байта. Сделать это можно с помощью вышеупомянутых сервисов, а также с помощью Я.Метрика и Google Analytics (в отчётах: «Стандартные отчеты» / «Мониторинг» / «Время загрузки страниц»). Самый же простой способ это сделать — расширение для браузера (инструменты разработчика) (Ctrl+Shift+I).

Что делать?

Если время ответа сервера превышает все разумные пределы, вам стоит… Сменить хостинг. Такое случается, если вы приобрели тариф, который не соответствует содержимому вашего сайта. Например, проплатили хостинг, который рассчитан на лендинг, но увлеклись и создали для компании корпоративный сайт с тяжёлым контентом. 

Скорость загрузки и код

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

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

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

Большое количество символов в коде прямо влияет на производительность сайта. Поэтому логично, что лишние пробелы, теги и элементы стоит убрать. Сделать это можно с помощью специальных сервисов (например, IksWeb). Принцип прост: находясь на нужной странице, открываем консоль разработчика (F12 или Ctrl+F12), находим местоположение папки с файлами CSS, копируем код и прогоняем через оптимизатор. Не забудьте только вернуть код на место через админку сайта.

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

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

1. Открываем программу Notepad+ и вставляем код:

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType application/javascript "access plus 5 days"

ExpiresByType text/javascript "access plus 5 days"

ExpiresByType text/css "access plus 5 days"

ExpiresByType image/gif "access plus 5 days"

ExpiresByType image/jpeg "access plus 5 days"

ExpiresByType image/png "access plus 5 days"

</IfModule>

2. Сохраняем файл под именем .htaccess и снова загружаем в корневую папку сайта вместо старого (если был).

Контент

Разобравшись с технической частью, имеет смысл позаботиться о контенте сайта — например, в статьях блога.

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

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

Если на сайте присутствуют gif и видео - элементы, их можно перевести в формат WebM, который поддерживают все популярные браузеры. Опять же, с помощью компрессоров.

Ещё вы можете сжать содержимое сайта в формат GZip, который уменьшает размер до 70%. Сделать это можно путём вставки кода в уже упомянутый файл .htaccess:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

Либо же можете подключить на сайт специальный плагин, который сделает всю работу за вас. Например, W3 Total Cache для сайтов на движке WordPress.

Резюмируем. Мы рассмотрели базовые работы над сайтом, которые помогут оптимизировать скорость его загрузки, увеличить юзабилити и, следовательно, увеличить шансы на попадание в ТОП поисковой выдачи. Конечно, есть и другие, более специфичные методы — но без специалиста они могут навредить сайту. Если вы проделали рассмотренные манипуляции, но ускорить страницы сайта не получилось — вы всегда можете обратиться к нам, чтобы получить оценку и способы решения проблемы.