Насколько важен спрайт для производительности на сайте с высоким трафиком?

Question

Некоторые сайты с высоким трафиком, кажется, имеют почти сумасшедшие спрайт-изображения с почти всем в одном большом изображении.

Какую разницу это будет иметь для сайтов с высоким трафиком по сравнению с трудностями в обслуживании в долгосрочной перспективе?

Я знаю, что это может быть чем-то вроде вопроса "как долго это кусок строки", но мне интересно понять любой опыт повышения производительности, который люди получили от такого упражнения.

Answer 1

Используя спрайты, вы уменьшаете количество или http-запросы с сервера.

Изображения составляют подавляющее большинство запросов http, и Yahoo считает, что около 80% времени, необходимого для загрузки содержимого страницы, тратится на ненужные запросы http.

Если вы взяли что-то простое, например домашнюю страницу amazon.com, потенциально может быть более 50 изображений, которые будут загружаться каждый раз, когда пользователь (без сохраненного кэша) заходит на свою домашнюю страницу.

Если вы считаете, что Amazon должен посещать миллионы пользователей каждый день.

Создавая спрайт из всех изображений, пользователь должен загрузить только один файл вместо пятидесяти.

Сокращение времени отклика сервера и улучшение результата для конечного пользователя.

Answer 2

Несколько лет назад я сделал несколько чисел для наименьшего размера .GIF - 43 байта. Чтобы отправить это изображение 1x1, было отправлено 246 байтов протокола HTTP, не говоря уж о том, что по крайней мере для исходного запроса (больше, если был также файл cookie). Есть также издержки пакета TCP / IP. Помимо всего этого, хотя время поездки туда и обратно. Скорость света все еще конечна, и ее необходимо учитывать, особенно для накладных расходов, связанных с несколькими запросами.

Короткая версия: меньше загруженных элементов означает более быстрый сайт. Даже если окончательное изображение спрайта больше, чем все объединенные изображения, вы все равно существенно выиграете, уменьшив количество наборов накладных расходов и циклов.

Answer 3

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