В какой момент лучше иметь больше HTTP-запросов, если это означает, что размер страницы снижается? Например, если у меня есть изображение размером 20 КБ, сколько размера я должен будет уменьшить, прежде чем имеет смысл использовать два изображения?
HTTP-запросы против размера файла?
Ответ 1
Практический ответ - никогда, особенно если речь идет об относительно незначительных объемах данных, таких как килобайт или два.
Настоящим врагом производительности веб-страницы является не количество переданных байтов; скорее это задержка сети. Давайте возьмем ваш пример и рассмотрим соединение со скоростью 5 Мбит/с (средняя скорость соединения в США немного выше) с временем пинга до вашего сервера 80 мс:
1x 20 kB files: 80ms latency + 31ms transfer time = 111ms
2x 4 kB files: 160ms latency + 13ms transfer time = 173ms
Эта "оптимизация" просто стоит не менее 62 мс при прочих равных переменных. В реальном мире я бы поспорил, что производительность будет еще хуже из-за таких вещей, как дополнительная загрузка сервера.
Также учтите, что теперь вы используете дополнительный один из ограниченного числа параллельных запросов, которые браузер будет делать (где-то между 2 и 8 в зависимости от браузера) для половины изображения, а не что-то более ценное, например скрипт, CSS или другие неприспыляемое изображение. Это замедлит общее время загрузки вашей страницы.
Кроме того, у меня есть подозрение, что вся ваша предпосылка ошибочна. В целом, разбиение изображения на два файла не может действительно привести к меньшему общему размеру файла, поскольку каждый формат контейнера изображений содержит данные заголовка; например, файл PNG имеет как минимум 57 байтов служебной информации перед любыми фактическими данными изображения. Кроме того, дополнительный HTTP-запрос означает дополнительный & plusmn; 800-900 байтов служебных данных по проводу.
Я подозреваю, что вы обнаружите, что один правильно сжатый PNG будет не больше, чем общий размер двух PNG, составляющих одно и то же изображение.
(источник: josh3736.net)
(1027 байт)
(источник: josh3736.net)
(источник: josh3736.net)
(730 + 809 = 1539 байт)
Несмотря на то, что первый одиночный PNG имеет "мертвое" прозрачное пространство размером 150x100 пикселей, он на 33% меньше, чем два PNG, представляющих одно и то же изображение. (Не обращайте внимания на то, что я не могу правильно выровнять теги <img>, чтобы два примера выглядели одинаково.)