Влияет ли наличие множества background-image в css на производительность?

Question

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

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

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

Прямо сейчас Firebug в Firefox, кажется, предполагает, что они все были загружены. Какие методы вы бы посоветовали использовать, чтобы избежать проблемы, или смягчить его.

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

Answer 1

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

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

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

Answer 2

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

Я думаю, что другим возможным виновником является то, что «некоторые пользователи» всегда будут чувствовать, что ваш сайт «слишком медленный». (Может, это скорее психическое расстройство, чем переполнение стека? Что эти пользователи считают быстрым сайтом? Могут ли они привести примеры? Как быстро у них соединение и компьютер? Где они и где находится ваш сервер? * точно медленно? Процесс регистрации? Просмотр видео в HD? Прокрутка окна? Загрузка Firefox? В конце концов, это люди .. n'est pas?)

Answer 3

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

Answer 4

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

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

Answer 5

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

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