Влияет ли наличие большого количества фоновых изображений в css на производительность?

Question

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

У меня есть сайт, который использует пользовательскую систему сборки для объединения всех css, сжатия их ( yui compressor), создания css-спрайтов автоматически (smartsprites), и в итоге я получаю CSS размером 9 КБ для всей страницы сюда входят все css для фоновых изображений, наконец, они было около 60 ( несколько переходов на один и тот же спрайт, не уверен, сколько именно)

Мне было интересно, является ли поведение браузеров по умолчанию загружать изображения по мере необходимости ( когда они соответствуют селектору) или загрузите их все.

Прямо сейчас firebug в firefox, похоже, предполагает, что все они были загружены.Какие методы, по вашему мнению, я бы использовал, чтобы избежать проблемы и / или смягчить ее.

Редактировать:Я неправильно прочитал firebug, загружаемые изображения принадлежат lightview который скрыт, но фоновые изображения соответствуют dom.

Answer 1

Нет, на самом деле лучше поместить их в CSS, чем в разметку.

Вызовы изображений не будут блокировать страницу, и по мере загрузки изображений они будут отображаться на странице, поэтому в целом рекомендуется загружать их с помощью CSS.Не говоря уже о том, что этот дизайн также более гибкий.

(Само собой разумеется, что каждое из этих изображений будет занимать пропускную способность и дополнительные HTTP-запросы)

Answer 2

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

Answer 3

(Побочная тема.На самом деле я не отвечаю на ваш вопрос.Но это может быть интересно или даже актуально.)

Я думаю, что еще одним возможным виновником является то, что "некоторые пользователи" всегда будут чувствовать, что ваш сайт работает "слишком медленно".(Может быть, это скорее Психическое Расстройство, чем проблема с переполнением стека?Что эти пользователи считают быстрым сайтом?Могут ли они привести примеры?Насколько быстры их соединение и компьютер?Где они находятся и где расположен ваш сервер?Что именно так это медленно?Процесс регистрации?Смотрите видео в формате HD?Прокручивать окно?Загружаете Firefox?В конце концов, это люди..не так ли?)

Answer 4

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

Что может произойти, так это то, что изображение, на которое вы указываете, очень большое.Конечно, он должен быть загружен только один раз (преимущество метода sprite), но если он составляет несколько сотен КБ, это, безусловно, может вызвать некоторые проблемы с производительностью.

Answer 5

Есть хороший плагин для firefox под названием Yslow, который дает вам некоторую полезную информацию об оптимизации производительности.Он показывает обнаруженные проблемы с производительностью и дает ссылки на статьи, предлагающие улучшения.http://developer .yahoo.com/yslow/

Немного информации о лучших практиках http://developer .yahoo.com/performance/rules.html