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

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

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

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

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

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

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

Мы получили данные, состоящие из 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.