Исследование скорости загрузки сайтов

Исследование скорости загрузки сайтов Все пользуются приложениями в телефоне. Они работают очень быстро, и пользователи привыкают к такой скорости. Это создаёт определённые ожидания к скорости загрузки сайтов. Хотя загрузка веб-страницы в пределах 2 секунд считается приемлемой, в идеале она должна быть такой же быстрой, как и приложения на телефоне.

Мы исследовали скорость загрузки 10 000 самых популярных сайтов в интернете, чтобы понять, к каким показателям времени надо стремиться.

Условия тестирования

Список самых популярных доменов мы взяли у рейтинга Alexa. Он доступен для скачивания здесь или у нас.

Оборудование и ПО:

  • Браузер Chrome 94.
  • VPS сервер на 2 ядра 4 потока Intel Xeon Processor (Skylake, IBRS) 2294.640 MHz
  • Скорость соединения 10 гигабит.
  • Минимальный пинг до какого-либо из сайтов был 53 миллисекунды.

Методика:

  • Страницы загружаются поочерёдно.
  • При расчёте времени загрузки страницы мы используем следующую формулу: время загрузки страницы браузером - (пинг до сайта - время минимального возможного пинга для нашего сервера) × 2. Это позволяет сравнивать сайты, расположенные на дальних серверах, с “близкими” сайтами.
  • Мы делаем скриншот, чтобы проверить корректность загружаемой страницы.
Эта страница выбора языка. По ней сложно судить о скорости работы сайта.
Эта страница выбора языка. По ней сложно судить о скорости работы сайта.

Анализ и выводы

Что мы узнали:

  • Средневзвешенное время загрузки страниц (50% сайтов с той и другой стороны) равно 2 секундам.
  • Самые быстрые сайты - это сайты на 1 экран ya.ru, google.com.
  • В период от 1 до 3 секунд загружается 51.5% исследованных сайтов.
  • За 1 секунду и менее загружается 21.7% страниц и они производят в среднем из 37 файлов.

Как ускорить страницу до 1 секунды?

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

Почти всегда можно ограничиться 7 файлами:

  • HTML код страницы.
  • Изображение логотипа.
  • Кросс-страничный JavaScript. Сгруппируйте весь код, отвечающий за работу сквозных элементов страницы: меню, валидации форм, фреймворки (jQuery и т.д.). Для функций, специфичных для конкретной страницы вставляйте код прям в HTML страницу.
  • Кросс-страничный CSS. По аналогии с предыдущим пунктом.
  • 2 файла шрифтов: обычный текст и заголовок. Больше не нужо. Обязательно оптимизируйте в нашем инструменте.
  • Шрифт с глифами. Все иконки для кнопок.

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

Описание полученных данных

Мы получили данные, состоящие из 2 таблиц: domains и check. Скачать копию можно здесь.

Описание полей таблицы domains:

  • id - порядковый номер записи.
  • domain - оригинальный домен из рейтинга Alexa.
  • link - реальная работающая ссылка. Некоторые сайты открываются только по http или перенаправляют на домен с приставкой www.
  • status - в зависимости от результатов загрузки мы присваиваем статус.

Статусы поля domains.status:

  • end - успешное завершение. Только эти сайты участвуют в статистике. Такой статус получили 7623 сайта.
  • access_denied - закрыт доступ. Скорее всего, не прошли DDOS защиту.
  • trival_page - сайт показывает тривиальную страницу: форма авторизации, выбор языка, подтверждение возраста, страница-заглушка и т.д.
  • error - ошибка. Наша система не смогла корректно определить момент полной загрузки страницы и мы на скриншоте увидели либо пустую, либо частично загруженную страницу, либо лоадбар, означающий запуск преднамеренного процесса подгрузки страницы, либо 404 страницу.

Описание полей таблицы check:

  • id - порядковый номер записи.
  • domain_id - ссылка на поле domains.id.
  • ping - время задержки до сервера. Иногда может быть пустым, если сервер анализируемого сайта блокирует эту функцию.
  • html_received - время получения HTML кода страницы.
  • first_paint - время отображения первого контента.
  • end_of_loading - окончательная загрузка.
  • number_of_files - количество файлов из которых состоит страница.
  • check_date - дата загрузки страницы.
  • performance - лог браузера, который можно получить, выполнив код window.performance.getEntries();. В качестве файлов мы учитываем, когда entryType записи равен resource.
Используя услуги сайта, вы соглашаетесь с нашей политикой файлов cookie. Мы и наши партнеры работаем по всему миру и используем файлы cookie, в том числе для аналитики, персонализации и рекламы. Согласен
X