Увидев в ленте FB пост о сравнении скорости загрузки сайтов различных авиакомпаний и aviata.kz, решил что отличным продолжением темы “Скорости загрузки сайтов”, будет провести более глубокое исследование на тему клиентской оптимизации, взяв за основу предоставленную выборку, но немного дополнив её.
Сначала поговорим о цифрах, потом разберём каждый сайт отдельно.
Сайты авиакомпаний:
Агрегаторы авиабилетов:
Часть 1. Цифры
Основным (и самым простым) параметром при загрузке страницы является её объём. Он влияет на время загрузки документа (стилей и скриптов) в браузер пользователя.
Вес страницы (Кб)
Суммарный вес страницы, включая скрипты, стили и изображения. Чем он меньше тем лучше, особенно на мобильных устройствах.
Вес JS-кода (Кб)
Скрипты, которые делают страницу “умнее” =). Их чрезмерное использование может пагубно сказываться на скорости работы сайта.
Вес CSS-кода (Кб)
Стили определяют структуру и вид документа.
Скорость ответа сервера (мс)
Время, в течение которого браузер ожидает ответа от сервера. Зависит от провайдера, сети, настроек на сервере (кеширование и т.д.), загруженности сервера, а также, что самое важное, скорости работы backend-а. Также есть термин, определяющий этот параметр - “TTFB - Time To First Byte”. Другими словами, это то, насколько быстро сервер формирует HTML для вашего пользователя.
Загрузка DOM (мс)
Следующим шагом является получение HTML от сервера. На этот параметр влияет скорость сети и размер данных.
Начало прорисовки (мс)
После того как браузер получит HTML, скачает стили и скрипты, он будет готов к отображению страницы в браузере. Этот параметр называется “firstPaint”.
Завершение загрузки (мс)
Параметр “pageLoadTime” фиксирует время полной загрузки страницы, с учётом всех стилей, скриптов и изображений.
Подробный разбор проектов
Продолжение следует…