Как оптимизировать количество запросов к серверу?

Question

[Александр]

Приветствую! Есть промо блок в виде мозаики мелких (50x50) картинок, общим количеством 120 штук. Получается это лишних 120 запросов к веб-серверу. При загрузке страницы ощущаются "тормоза" и видно как прогружаются построчно все картинки (занимает до секунды времени). Как можно оптимизировать этот момент?

Объединить все картинки в одну - не вариант, потому что после загрузки они анимируются скриптами (рандомно меняются друг с другом).

Пример:


Спасибо!

Answer 1

[maxaon]

Первый вариант. Сделайте не один поддомен, а 10, поскольку браузеры огранчивают количесво одновременных запросов к серверу.
Второй вариант. Объедените картинки в спрайты и позиционируйте их.
Третий вариант. Создавайте картинки на стороне клиента спомощью JS. Преобразуйте картинки в BASE64, запишите в несколько файлов (не забудьте gzip) и вставляйте js'ом через data.
Четвертый вариант. Сделайте одну большую картинку, разместите по центру. Далее загружайте маленькие картинки и наклабывайте сверху.
Еще вариантов масса - фантазируйте.

Comments

[Александр]

Ух ты, вариант с большой картинкой перекрывающей загрузку мелкий - по-моему отличная идея. Спасибо! Пойду практиковаться.

[Александр]

Попробовал. Общая фотография получается весом в 350-450КБ (и ничем не жмется). Так что получается нужно теперь грузить в два раза бОльший объем фотографий (маленькие + одну общую). Кажется не идеальным вариантом. Думаю..

[maxaon]

@librown Вы ее там не в PNG храните?

[Александр]

@maxaon Общая картинка (1000x300) в png получается 600КБ, в jpg,gif - 250 кб. Возможно ради "скорости" откажусь от динамической смены картинок и этой анимации, и буду просто выбирать рандомные 120 картинок на сервере - попробую на GD объединить их в одну и просто отдавать браузеру. Будет статический фон. Сильно много времени на такую маленькую задачу тратить - тоже не вариант. Спасибо, за предложение варианты! Многого не знал.

Answer 2

[Степан]

Попробуйте перекинуть всю статику на поддомен и прикрутите его к cloudflare.com.

Answer 3

[Ilya Evseev]

Сначала надо разобраться, что тормозит - браузер или сервер?
1) Что говорит Firebug? Картинки выкачиваются за одно соединение? Pipelining используется?
2) Что является сервером? Nginx? Если да, то кэширование статики включено? Как ни странно, с кэшированием даже статика отдаётся быстрее.