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

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

Amazon провела эксперимент, в ходе которого было установлено, что каждые 100 мс (0,1 с) задержка приводит к снижению продаж на 1%.

 

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

 

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

 

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

 

Основные компоненты скорости сайта

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

Полный процесс загрузки сайта (первое посещение) выглядит следующим образом:

  1. DNS-запрос по имени сайта.
  2. Подключение к серверу по IP (TCP соединение).
  3. Установление безопасного соединения при использовании HTTPS (соединение TLS).
  4. Запрос HTML-страницы по URL и ожидание сервера (HTTP-запрос).
  5. Загрузка HTML.
  6. Разбор HTML-документа на стороне браузера, построение очереди запросов в ресурсах документа.
  7. Загрузка и анализ CSS-стилей.
  8. Загрузка и выполнение JS-кода.
  9. Начало рендеринга страницы, выполнение JS-кода.
  10. Загрузка веб-шрифтов.
  11. Загрузка изображений и других элементов.
  12. Завершение рендеринга страницы, выполнение отложенного JS-кода.

 

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

 

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

 

Измерение скорости сайта

Главный вопрос: что нужно измерять? Существует множество показателей скорости сайтов, но базовых показателей не так много.

 

  • Время до первого байта (TTFB - время до первого байта). Это время от начала процесса загрузки до получения первой порции данных с сервера. Это основной показатель для оптимизации сервера.
  • Начало рендеринга страницы (начало рендеринга, первая закраска). Метрика показывает время до конца периода «белого экрана» в браузере, когда страница начинает рисовать.
  • Загрузка основных элементов страницы (время загрузки). Это включает в себя загрузку и интерпретацию всех ресурсов для работы со страницей, после этой отметки индикатор загрузки страницы перестает вращаться.
  • Полная загрузка страницы. Это время до окончания основной активности браузера, все основные и отложенные ресурсы загружаются.

Эти основные показатели измеряются в секундах. Также полезно иметь оценку объема трафика для третьей и четвертой метрик. Для оценки влияния скорости соединения на время загрузки необходимо знать трафик.

 

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

 

Одним из самых мощных инструментов является панель разработчика в браузере. Наиболее продвинутый функционал панели - в Chrome. На вкладке «Сеть» вы можете получить метрики для времени загрузки всех элементов, включая сам HTML-документ. Когда вы наводите курсор на элемент, вы можете видеть, сколько времени затрачивается на каждый шаг в получении ресурса. Чтобы оценить полную картину процесса загрузки страницы, вы можете использовать вкладку «Производительность» , которая дает полную информацию до момента декодирования изображений.

 

Если вам необходимо проверить скорость работы сайта без полной детализации, полезно начать аудит сайта на   вкладке «Аудиты» . Это будет проводиться с использованием плагина Lighthouse. В отчете мы получаем оценку скорости для мобильных устройств (как в целых точках, так в соответствии с нашими основными показателями), так и в нескольких других отчетах.

 

Чтобы быстро оценить оптимизацию клиента, вы можете использовать сервис Google PageSpeed ​​Insights или Sitechecker (мы используем API Google PageSpeed ​​Insights). Наконец, полезно проанализировать время загрузки сайта для реальных пользователей. Для этого существуют специальные отчеты в системах веб-аналитики.

 

  1. Яндекс.Метрика о скорости страницы

Используйте этот путь, чтобы найти отчет.

Яндекс.Метрика> Отчеты> Стандартные отчеты> Мониторинг> Время загрузки страницы

 

  1. Отчет о скорости страницы Google Analytics

Используйте этот путь, чтобы найти отчет.

Google Analytics> Поведение> Скорость сайта> Рекомендации по скорости

 

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

 

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

Поделиться
В поисках подрядчика по разработке сайта?
Заходите в наш online каталог Веб-студий и выбирайте партнера по ряду критериев: балл, портфолио, отзывы, кейсы и статьи. Или организуйте тендер в данном каталоге, выбрав понравившиеся вам компаниии.
Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения от лучших веб-студий Украины.
В каталоге 1700+ диджитал-агентств, готовых помочь в реализации ваших задач. Выберайте и экономьте до 30% своего времени и бюджета! Это бесплатно и займет менее 3-х минут.
Создать тендер
Не пропусти IT новости!
А также актуальные IT: мероприятия, курсы, кейсы и интересные статьи.
Telegramm канал: @itcases
Подписка на рассылку
Получайте одно письмо в неделю с самыми важными новостями.
Bug