Парсер Хабра: [Из песочницы] Переоптимизация… где предел?

понедельник, 30 сентября 2013 г.

[Из песочницы] Переоптимизация… где предел?

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

В эксперименте участвуют браузеры Chrome 23, Firefox 16, IE9. Пинг до сервера ~41ms, на сервере включен gzip, условия максимально приближены к боевым. Итак, что будем мереть/смотреть? Создадим тестовую страницу с подключенными к ней таблицами стилей. Тестовая страница представляет собой необходимый минимум (Doctype, html, head и body )Подключая стили разного размера будем замерять время загрузки страницы и время загрузки отдельного файла. На основе полученых данных сделаем выводы о том до каких пор файлы стоит склеивать.

Тест №1.

Размер одного файла — 2.1Kb

Gzipped(including http headers) — 451b

Количество подключенных файлов — 10

Chrome

onload = 208ms

connecting+waiting = ~83ms

receiving = ~2ms

FF

onload — 291ms

connecting+waiting = ~88ms

receiving = ~1ms

IE

onload — 417ms

connecting+waiting = ~190ms

receiving = <1ms

Chrome и FF показали почти одинаковый результат, время ожидания ответа приблизительно равно двойному ping (посылаем запрос — получаем ответ), а вот IE странно распаралелил запросы, из-за чего часть их них была вынуждена ждать окончания предыдущих. Время передачи данных намного меньше времени создания соеденения/ожидания ответа. В данном случае смысл склеивать файлы есть.

Склеиваем файлы, размер — 208Kb(1.14Kb gzipped), браузеры грузят страницу с такой скоростью:

Chrome — 142ms(-42%), FF — 165ms(-44%), IE — 389ms(-7%)

Тест №2.

Размер одного файла — 20.7Kb

Gzipped(including http headers) — 523b

Количество подключенных файлов — 10

Chrome

onload = 284ms

connecting+waiting = ~110ms

receiving = ~1ms

FF

onload — 352ms

connecting+waiting = ~90-130ms

receiving = ~1ms

IE

onload — 830ms

connecting+waiting = ~190ms

receiving = <1ms

Склеиваем файлы, размер будет 20.7Kb(523b gzipped), а браузеры загрузят страницу с такой скоростью:

Chrome — 203ms(-29%), FF — 208ms(-41%), IE — 680ms(-19%);

Тест №3.

Размер одного файла — 207Kb

Gzipped(including http headers) — 1.14Kb

Количество подключенных файлов — 10

Chrome

onload = 368ms

connecting+waiting = ~70-80ms

receiving = ~30ms

FF

onload — 1.03s

connecting+waiting = ~88ms

receiving = ~0ms (???Firebug issue?)

IE

onload — 5.55s

connecting+waiting = ~300ms

receiving = ~8.4ms

Если склеить файлы, размер будет 2.2Mb(8.2Kb gzipped), а браузеры загрузят страницу с такой скоростью:

Chrome — 401ms(+11%), FF — 919ms(-9%), IE — 1.29s(-77%);

Тест №4.(из области фантастики)

Размер одного файла — 4.9Мb

Gzipped(including http headers) — 17.3Kb

Количество подключенных файлов — 10

Chrome

onload = 6.3s

connecting+waiting = ~2s

receiving = ~2.3s

FF

onload — ~19s

connecting+waiting = ~600ms

receiving = ~0ms (???Firebug issue?)

IE

onload — 21s

connecting+waiting = ~4s

receiving = ~3s

Если склеить файлы, размер будет 48.5Mb(169.2Kb gzipped), а браузеры загрузят страницу с такой скоростью:

Chrome — 6.78s(+7%), FF — 19.65s(+3%), IE — 4.9s(-77%);

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

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: