Скорость загрузки сайта – один из технических параметров, критически важный для поисковой оптимизации. Оптимальная производительность вашей онлайн-площадки увеличивает вовлеченность, помогает удержать пользователей и получить больше конверсий. Поэтому одна из первоочередных задач вебмастера – обеспечить быструю загрузку сайта и минимизировать процент отказов. Что значит скорость загрузки сайта, почему она может быть низкой, и как это исправить – расскажем здесь.
Что такое скорость загрузки сайта?
Скорость загрузки сайта показывает сколько времени придется ждать пользователям, прежде, чем сайт откроется полностью со всеми изображениями, формами, баннерами и т. д.
Почему сайт должен быстро открываться?
- Сайт с низкой скоростью не займет высокие позиции.
- Быстрая загрузка уменьшает нагрузку на сервер.
- Чем быстрее грузится страница — тем больше будет конверсий.
Как определить скорость загрузки сайта?
Проверить данный параметр можно с помощью онлайн-сервиса PageSpeed Insights. Это быстро и бесплатно. Алгоритм Lighthouse позволяет выяснить производительность онлайн-ресурса у реальных пользователей мобильных и десктопных устройств. Надо понимать, что сама по себе оценка Гугла в PageSpeed Insights ни на что не влияет. Однако сервис прямо указывает вебмастеру на проблемы, которые нужно устранить и дает рекомендации для ускорения сайта.
Есть много других сервисов для проверки данного параметра, но в отличие от них, PageSpeed Insights максимально точно показывает время ответа сервера.
Время ответа сервера может колебаться в зависимости от нагрузки на него в данный момент. Рекомендуем сделать несколько замеров и ориентироваться на среднее значение. Обратите внимание: гугловский сервис кэширует результат на 30 секунд, соответственно, замеры надо делать с интервалом не менее 30 секунд.
К слову, если обнаружите значительные колебания, то рекомендуем поменять хостинг. Если ваш провайдер экономит на оборудовании, время загрузки может увеличиваться на 100-150 мс. Сегодня многие хостинг-провайдеры предлагают пробный период, в течение которого можно бесплатно тестировать сайт.
Узнать время ответа сервера можно с помощью инструментов браузера. Откройте вкладку “Сеть” (комбинация клавиш для быстрого запуска – Ctrl+Shift+I) и перезагрузите страницу с очисткой кэша браузера, там же отображается время загрузки html-файла.
Показатели скорости загрузки сайта
Производительность сайта оценивают с помощью таких метрик:
- Time To First Byte (TTFB) – время ответа сервера.
Показывает, сколько прошло времени с момента отправки запроса до получения первых данных браузером. Google требует, чтобы это значение не превышало 200 мс.
- First Contentful Paint (FCP) – время отрисовки страницы.
Показывает, за какой промежуток времени отображается на мониторе первый контент (очертания страниц и изображений). Он не должен превышать 1,8 сек.
- Largest Contentful Paint (LCP) – время отрисовки основного контента.
Промежуток времени, за который на видимой области страницы отображается самый крупный элемент (видео, фото, фрагмент текста). Норма LCP – до 2,5 сек. Обратите внимание: при запуске сайта с мобильных и десктопных устройств самый большой элемент страницы будет разным, а еще пользователь может попасть на сайт по якорной ссылке и сразу попасть на середину страницы – в каждом случае скорость будет разной.
Есть также дополнительные показатели производительности, которые вы увидите в сервисах:
- Total Blocking Time (TBT) – промежуток времени, в который пользователь не может взаимодействовать с сайтом (кликнуть, ввести текст, скачать файл). Показатель не должен превышать 200 мс.
- Cumulative Layout Shift (CLS) – коэффициент, который определяет визуальную стабильность страницы. Например, пользователь читает текст, а в это время подгружается баннер и смещает контент или кнопки. Чем быстрее он “подвинет” текст, тем лучше, в идеале – до 0,1 сек.
- Time To Interactive (TTI) – интервал времени, за который сайт полностью загрузится и будет готов к просмотру. Нормальный показатель не должен превышать 5 сек.
Кстати, недавно Google представил новую метрику для оценки скорости отклика сайта – Interaction Next Paint (INP). Он будет использоваться вместо показателя First Input Delay (FID) из семейства Core Web Vitals с марта 2024 года. INP будет оценивать скорость отклика на основе данных из Event Timing API. Он фиксирует каждую задержку при взаимодействии пользователя со страницей и выдает одно, самое высокое значение (FID учитывал только первое взаимодействие). Низкий показатель INP говорит о том, что страница регулярно могла быстро реагировать на пользовательский запрос. То есть, чем ниже INP, тем выше пользовательский опыт. Пока трудно сказать, к чему приведет обновление. Одни в очередной раз прощаются с JS, другие более оптимистично смотрят в будущее – мол, ну и что? Всех одинаково пессимизируют, а значит – все останутся на своих местах и ничего не поменяется.
Причины низкой скорости загрузки сайта и способы устранения
- Не “чистый” код – одна из распространенных причин слабой производительности веб-ресурса. Лишние пробелы и пустые строки, встроенные стили и лишние комментарии, и прочие признаки “грязного” кодирования приводят к увеличению таблицы стилей сайта.
Как исправить: выполнить минимизацию (минификацию) кода – удалить лишние элементы, сжать. Там, где есть возможность, использовать только одну таблицу стилей CSS. Уменьшив размер файла, можно улучшить общее время загрузки и повысить эффективность поисковой оптимизации. Для минимизации кода можно использовать онлайн-инструменты. Если сайт сделан в WordPress или другом популярном конструкторе, можно использовать специальные плагины и расширения для минификации кода.
- Не настроено Gzip-сжатие, которое позволило бы сжимать файлы таким образом, чтобы можно было восстановить их без потерь.
Как исправить: включите сжатие текстовых ресурсов (JS, CSS, HTML), прописав Gzip в файле .htaccess. В отличие от других форматов сжатия, этот способ доступен в большинстве браузеров, легко настраивается и предлагает оптимальное соотношение степени и скорости сжатия.
- Изображения много весят. Для фотографий обычно используют JPEG-формат, для изображений с прозрачностью – PNG. При этом картинки в GIF и JPEG-форматах весят гораздо больше, чем PNG, и не позволяют сайту загружаться достаточно быстро. Формат TIFF лучше не использовать вообще.
Как исправить: проверьте, какие форматы изображений поддерживают большинство браузеров. Пересмотрите картинки, логотипы, фотографии, гифки на сайте и оставьте самые легкие. Мелкие элементы – например, иконки, можно отрисовать прямо в браузере в формате SVG, который не размазано выглядит в Full HD и даже с весом 1 кБ отлично отображается на экране. Можно автоматически оптимизировать изображения, используя специальные плагины.
- Не настроено кэширование. Скорость загрузки сайта будет меньше, если при повторном заходе на сайт браузер не будет заново скачивать все CSS, флэш-элементы, графику и JS-файлы, а достанет информацию из своего кэша.
Как исправить: корректно выставить http-заголовок Expires и добавить модуль mod_expires в файл .htaccess в корневой каталог сайта. В строках “years”/ “month”/ “weeks”/ “days”/ “hours”/ “minutes”/ “seconds” задайте время хранения кэша. Рекомендуем хранить временные копии страниц, стили и скрипты несколько месяцев.
- Используются редиректы. Если сайт переместился на новый адрес, страница отдает 301 или 302 редирект и только потом открывается нужный URL. На это может уйти и 20, и 30 секунд, которые пользователь точно не станет ждать.
Как исправить: используя краулер, просканировать сайты с неактуальным URL и заменить на новый адрес. Чаще всего редиректы находятся в шапке, “подвале” или боковой панели сайта.
- Много HTTP-запросов. Чрезмерное количество запросов возникает из-за множества CSS, JS-файлов и изображений. Чтобы их отобразить, браузер выполняет несколько запросов для каждого файла, из-за чего страница долго загружается.
Как исправить: опять-таки поможет минификация кода и изображений, используйте спрайты, чтобы уменьшить число http-запросов. Подключите LazyLoad – данная функция позволяет загружать изображение не сразу, а по мере скроллинга страницы пользователем.
- Не используется CDN. Content Delivery Network – сеть доставки контента, позволяет доставлять статические ресурсы к пользователю, используя меньше времени для загрузки. CDN кэширует файлы и загружает их из серверов, которые находятся в разных регионах.
Как исправить: подключите CDN, тогда пользователи будут обращаться к ближайшему кэширующему серверу в данной сети доставки контента. Это может сократить время загрузки сайта от пары минут до пары секунд.
- Высокое качество изображений. Картинки в Full HD-качестве загружаются в 3 раза дольше, чем 1000*1000px, но разница в качестве не будет заметна ни на десктопных, ни на мобильных устройствах. Кроме того, незагрузившиеся до конца изображения портят визуал и раздражают посетителей.
Как исправить: тестируйте разные форматы картинок, сжимайте до оптимального веса – менее 1Мб.
- Файлы CSS расположены внизу страницы. Если CSS-файлы находятся в конце, страница открывается в браузере по фрагментам, а не постепенно. Это происходит потому, что браузеры редко перерисовывают элементы, у которых изменится стиль после загрузки.
Как исправить: если разместить CSS-файлы в “шапке” сайта, блоки будут отображаться в логической последовательности – логотип, заголовок, описание, навигация, основная информация.
- Проблемы с JavaScript. Плагины JS и jQuery позволяют удобно “облагородить” страницу динамическим контентом. Но их неправильная реализация негативно отражается на производительности сайта. Для загрузки и выполнения JS и jQuery нужно время и несколько вызовов API для отображения данных, поэтому сайт будет загружаться долго.
Как исправить: выполните аудит JS-скриптов и оставьте только нужные, обеспечьте их асинхронную загрузку. Также попробуйте воспользоваться сервисами, которые позволяют использовать один скрипт для всех инструментов – Segment или Google Tag Manager.
P. S. Хорошая производительность сайта делает его удобным для пользователя, а значит, больше “нравится” поисковикам. Не игнорируйте этот технический показатель, регулярно мониторьте его и оптимизируйте скорость загрузки сайта всеми возможными способами. Это прямой путь к наращиванию трафика на сайт и увеличению дохода от его монетизации с пуш-рекламой или другими способами.
