Как уменьшить HTTP-запросы css?
1 большой файл css
или один файл css, который импортирует все остальные css
это то же самое?
В чем преимущество использования этого
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
1 большой файл css или один файл css, который импортирует все остальные css это то же самое?
Нет, поскольку клиенту все равно необходимо загрузить каждый файл CSS (по одному HTTP-запросу)
Некоторые ссылки, чтобы узнать больше об уменьшении HTTP-запросов:
Если вы используете Firefox, я настоятельно рекомендую Firebug, который предлагает представление с подробной информацией о HTTP-запросах.
EDIT:
Как отмечает flybywire в комментариях: YSlow - расширение Firefox, которое интегрируется с Firebug для анализа производительности веб-страницы
3 простых вещи, которые я бы поставил первым:
Большинство из этих вещей также применимы к файлам Javascript.
Импорт стиля по-прежнему вызывает HTTP-запрос. Я рекомендую использовать только один файл CSS. Вы можете объединить несколько файлов CSS с помощью импорта с серверной стороны, чтобы отправить один файл без управления всеми вашими правилами CSS из одного файла.
Если вы используете asp.net mvc - просмотрите этот подход. Все еще работает как шарм. В основном - он использует httphandler для объединения, сжатия и кэширования файлов активов.
Но это asp.net специфично. Не могу сказать, помогает ли это.
Offtopic:
Тот же метод, который вы можете применить к файлам javascript (отлично, чтобы иметь хорошие структурированные js файлы и все еще - чтобы избежать многих HTTP-запросов).
Для изображений - просмотрите spriting. Этот букмарклет может быть весьма полезен.
Вы хотите уменьшить количество HTTP-запросов или их размер?
Я бы рекомендовал поместить все наиболее используемые селектора в один большой файл CSS (вместе со всеми вашими используемыми библиотеками/плагинами) и минимизировать его с помощью онлайн оптимизаторов/минимизаторов
Если вы собираетесь обслуживать свои файлы 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-заголовка:
Лучше сжать все ваши файлы js/css в один гигантский файл для всего веб-сайта, а затем динамически обслуживать только нужные файлы js/css для этой страницы. Браузеры могут кэшировать один гигантский файл, а затем больше не придется беспокоиться о загрузке css/js с вашего сайта.
Вы можете использовать объединитель запросов HTTP, чтобы указать список общих файлов css, которые должны быть доставлены в виде одного мини файла css в браузер. Это уменьшит размер, а также значительно снизит количество запросов.
Хороший пример этой работы в контексте .Net: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx
Я написал несколько сообщений в блоге об этом. См. Нагнетание CSS в PHP. Несмотря на то, что он написан для PHP, принципы универсальны.
В основном ваша цель - уменьшить внешние HTTP-запросы. Вы можете сделать это с помощью комбинации сочетания ваших файлов CSS и/или версий ваших файлов CSS и использования будущего заголовка Expires.
Наконец, вы всегда должны использовать GZip CSS (и Javascript), если клиент принимает его.