Как уменьшить HTTP-запросы css?

Как уменьшить HTTP-запросы css?

1 большой файл css

или один файл css, который импортирует все остальные css

это то же самое?

В чем преимущество использования этого

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

Ответы

Ответ 1

1 большой файл css или один файл css, который импортирует все остальные css это то же самое?

Нет, поскольку клиенту все равно необходимо загрузить каждый файл CSS (по одному HTTP-запросу)

Некоторые ссылки, чтобы узнать больше об уменьшении HTTP-запросов:

Если вы используете Firefox, я настоятельно рекомендую Firebug, который предлагает представление с подробной информацией о HTTP-запросах.
EDIT:
Как отмечает flybywire в комментариях: YSlow - расширение Firefox, которое интегрируется с Firebug для анализа производительности веб-страницы

3 простых вещи, которые я бы поставил первым:

  • Объединить глобальный CSS (то, что вы использовать на каждой странице)
  • Сжатие CSS (с YUI компрессор или какой-либо онлайн-инструмент).
  • Ввести содержимое страницы (вещи, которые не страниц)

Большинство из этих вещей также применимы к файлам Javascript.

Ответ 2

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

Ответ 3

Если вы используете asp.net mvc - просмотрите этот подход. Все еще работает как шарм. В основном - он использует httphandler для объединения, сжатия и кэширования файлов активов.

Но это asp.net специфично. Не могу сказать, помогает ли это.

Offtopic:

Тот же метод, который вы можете применить к файлам javascript (отлично, чтобы иметь хорошие структурированные js файлы и все еще - чтобы избежать многих HTTP-запросов).

Для изображений - просмотрите spriting. Этот букмарклет может быть весьма полезен.

Ответ 4

Вы хотите уменьшить количество HTTP-запросов или их размер?

Я бы рекомендовал поместить все наиболее используемые селектора в один большой файл CSS (вместе со всеми вашими используемыми библиотеками/плагинами) и минимизировать его с помощью онлайн оптимизаторов/минимизаторов

Ответ 5

Если вы собираетесь обслуживать свои файлы css из веб-фермы или это сайт с большим объемом, я бы предложил посмотреть: http://code.google.com/p/talifun-web/wiki/CrusherModule Он использует наблюдателя файлов для поиска изменений в файлах css/js. Файлы Css/js относятся к наборам файлов, указанным в файле web.config. Когда изменение обнаружено в одном из компонентов js/css файлов, он создает новый munged css или jss для набора файлов.

Он также имеет простой элемент управления для вывода ссылок на файл css/js. Элемент управления добавит запрос с хешем файла, поэтому вам гарантируется правильное содержимое файла.

Это означает, что вы можете напрямую работать с файлом munged с IIS. Затем вы можете использовать кеширование в режиме ядра. Также означает, что вам не нужно беспокоиться о ошибках реализации поддержки HTTP-заголовка:

  • ETag
  • Истекает
  • Last-Modified
  • Если-Match
  • If-None-Match
  • If-Modified-Since
  • Если-Unmodified-С
  • Unless-Modified-Since

Лучше сжать все ваши файлы js/css в один гигантский файл для всего веб-сайта, а затем динамически обслуживать только нужные файлы js/css для этой страницы. Браузеры могут кэшировать один гигантский файл, а затем больше не придется беспокоиться о загрузке css/js с вашего сайта.

Ответ 6

Вы можете использовать объединитель запросов HTTP, чтобы указать список общих файлов css, которые должны быть доставлены в виде одного мини файла css в браузер. Это уменьшит размер, а также значительно снизит количество запросов.

Хороший пример этой работы в контексте .Net: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

Ответ 7

Я написал несколько сообщений в блоге об этом. См. Нагнетание CSS в PHP. Несмотря на то, что он написан для PHP, принципы универсальны.

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

Наконец, вы всегда должны использовать GZip CSS (и Javascript), если клиент принимает его.