Подборки

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

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

Чтобы не терять трафик и лиды, стоит следить за скоростью загрузки сайта. Узнайте, что это за показатель или сразу переходите к разбору сервисов для его проверки. Ещё полезно будет прочитать о том, что влияет на скорость загрузки, и про способы ускорения сайта.

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

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

Основные показатели скорости загрузки:

  • Время ответа сервера (Time To First Byte, TTFB). Сколько прошло от отправки запроса до получения браузером первых данных. В Google считают, что время ответа сервера не должно превышать 200 мс.
  • Время отрисовки страницы (First Contentful Paint, FCP). Сколько потребовалось, чтобы после перехода на экране появился первый контент: очертания страниц, границы фотографий. Нормальное значение — до 1,8 сек.
  • Время загрузки контента (Largest Contentful Paint, LCP). Сколько нужно ждать, чтобы прогрузился самый большой элемент страницы, например, фото или текстовый блок. Если до 2,5 секунд, то это хороший показатель.

Есть и другие метрики производительности, которые можно увидеть в сервисах для проверки скорости загрузки. Например:

  • Первичная блокировка (Total Blocking Time, TBT). Это период, когда на сайте ничего нельзя сделать: ни ввести текст, ни кликнуть на кнопку, ни скачать фото. Нормальное значение — 0–200 мс.
  • Совокупное смещение макета (Cumulative Layout Shift, CLS). Сколько времени интерфейс может внезапно меняться — например, когда картинки перемещаются вниз, а вместо них появляется текст, кнопка сдвигается и невозможно на нее кликнуть. Хороший показатель CLS — до 0,1 сек.
  • Время до интерактивности (Time to Interactive, TTI). Сколько нужно, чтобы сайт полностью загрузился и был готов к использованию. Норма — до 5 сек.

Все рекомендации — с портала Google Developers (web.dev).

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

На выбор пять функциональных сервисов для вебмастеров, SEO-специалистов и интернет-маркетологов.

 

Google PageSpeed Insights

Сайт: https://pagespeed.web.dev/.

Стоимость: бесплатно.

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

Проверяем скорость загрузки vk.com
Проверяем скорость загрузки vk.com

Важно: оценка PageSpeed ≠ фактор ранжирования в поиске Google. То есть выполнение всех рекомендаций не гарантирует, что сайт сразу взлетит в поисковой выдаче.

Pingdom Tools

Сайт: https://tools.pingdom.com/.

Стоимость: бесплатно или подписка от $15 в месяц.

Подойдет и для разовой проверки скорости, и для постоянного мониторинга. Сервис может проверять скорость загрузки каждые 30 минут и сообщать о проблемах. Если вы находитесь в России или Беларуси, купить подписку для постоянного мониторинга не получится. Будет доступна только разовая проверка скорости.

Такую оценку получил CoinmarketCap — самый популярный сервис для отслеживания стоимости криптовалют
Такую оценку получил CoinmarketCap — самый популярный сервис для отслеживания стоимости криптовалют

После проверки вы получите отчет, в котором можно посмотреть, как быстро загружаются отдельные элементы: текст, анимация, изображения. Также Pingdom Tools даст оценку производительности страницы от 0 до 100 и порекомендует, как ее улучшить.

Pingdom Tools

Loading.Express

Сайт: https://loading.express/.

Стоимость: бесплатно (платно — дополнительные услуги по аудиту юзабилити, ускорению сайта).

Создает подробный отчет с цифрами по FCP, CLS, TTFB и другим метрикам, скриншотами на разных этапах загрузки, весом различных элементов страницы и общей оценкой от 1 до 10 (хорошим результатом считается 9–10).

Центр финансовой культуры загружается медленно, но это не мешает ему обучать людей финансовой грамотности
Центр финансовой культуры загружается медленно, но это не мешает ему обучать людей финансовой грамотности

Преимущество Loading.Express в том, что можно выбрать для проверки сервер из Москвы, Санкт-Петербурга, Хабаровска, Новосибирска, Екатеринбурга, Киева, Минска или Нур-султана.

PR-CY

Сайт: https://pr-cy.ru/speed_test/.

Стоимость: бесплатно.

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

Проверка скорости загрузки PR-CY
Проверка скорости загрузки PR-CY

Минусы: долго загружаются результаты, нет выбора гео.

Sitespeed

Сайт: https://sitespeed.ru/.

Стоимость: бесплатно.

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

Отчет по скорости загрузки от Sitespeed
Отчет по скорости загрузки от Sitespeed

Полный отчет можно получить после того, как оставите email. Он придет отдельным письмом на почту, а также откроется на сайте Sitespeed после того, как вы кликните на кнопку «Отправить».

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

Анализ вторичной загрузки

В конце отчета будут рекомендации по улучшению скорости загрузки.

Что влияет на скорость загрузки

Разбираемся с ключевыми факторами.

 

Нагрузка на сервер

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

 

Тип хостинга

Другая возможная причина — провайдер разместил сайт на виртуальном хостинге, а не на физическом сервере. Минус shared-hosting в том, что на одном сервере располагается одновременно несколько сайтов. И если одному проекту понадобится больше системных ресурсов, то другие начнут работать медленнее.

 

Версия PHP

PHP — это серверный язык программирования, который используют, например, чтобы  создавать CMS и работать с формами на сайте. Чем выше версия PHP, тем быстрее обрабатываются запросы и загружаются страницы. Проверить версию можно через панель управления хостингом или php.net.

 

Вес сайта

Чем больше размер страницы, тем медленнее она загружается. Картинка в 200 КБ скачается гораздо быстрее, чем гифка в 5 МБ.

Узнать вес можно прямо в Google Chrome:

  • Зайдите в инструменты разработчика с помощью кнопки F12.
  • Перейдите на вкладку Networks.
  • Отключите кэш (disable cache) и посмотрите значение в нижнем левом углу.
Узнаем вес сайта на примере glvrd.ru
Узнаем вес сайта на примере glvrd.ru

Скрипты и плагины

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

 

CMS

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

Способы ускорения загрузки сайта

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

 

Сменить сервер

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

 

Сжать изображения

Большая часть времени уходит на то, чтобы загрузить визуальный контент. Оптимального размера нет: чем меньше, тем лучше. Но не в ущерб качеству.

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

Разница в размере фотографии: до сжатия и после (в TinyPNG)
Разница в размере фотографии: до сжатия и после (в TinyPNG)

Перенести видео на сторонние платформы

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

Если видео короткое, можно сохранить его и в GIF-формате. Но надо учитывать, что большие гифки тоже тяжело грузятся.

 

Отключить ненужные плагины

Используете много дополнительных инструментов — сайт может начать тормозить из-за увеличения веса и нехватки ресурсов сервера. Удаляйте ненужные плагины, модули и счетчики.