Лучшие практики - Только загружают CSS, в котором Вы нуждаетесь или используете процесс минификации?
В контексте улучшения полной производительности сайта (загружающая и представляющая скорость) там, кажется, противоречие между применяющим двух лучших методов:
Только снизьте CSS, в котором Вы нуждаетесь для просмотренной страницы. (Поскольку слишком много правил CSS вызывают медленный рендеринг),
Всегда уменьшайте CSS и комбинируйте его в один файл. (Поскольку больше запросов означает более медленную загрузку страницы),
Теперь скажите, что я решаю следовать правилу 1.
Следующие проблемы подходят:
Что, если 2 страницы совместно используют 1 набор правил CSS?
В этом случае я должен поместить те правила в отдельный файл и ссылку что файл от обеих страниц.
Однако, если я начинаю иметь много этих "общих правил", я мог бы закончить тем, что сослался на большое количество отдельных файлов от каждой страницы, и таким образом, повредив правило 2.
Например, страница A могла бы зависеть от CSS 1 и 2, в то время как страницы B и C и зависят от CSS 2 и страницы D, зависит от CSS 1.
В этом сценарии невозможно иметь точно один CSS на страницу или даже несколько CSS на страницу, так как некоторые страницы должны будут совместно использовать некоторые файлы CSS с другими страницами.
Но разве мы не можем решить эту проблему путем объединения всего CSS для каждой страницы в отдельный файл CSS на страницу?
Мы могли, но это создаст другие проблемы.
Если две страницы совместно использовали один фрагмент CSS, даже если мы сжимаем ад из него, мы все еще собираемся загрузить тот фрагмент неоднократно, каждый раз, когда мы запрашиваем страницу, кто CSS, содержит тот фрагмент.
Поскольку мы сжали CSS страницей, мы позволили дублированиям происходить, где фрагмент CSS совместно используется на две или больше страницы.
Кэширование браузера делает нас отрицательный результат здесь, потому что к браузеру, каждый файл CSS имеет различное имя файла и является таким образом отдельным файлом, даже если некоторые из них содержат содержание, которое является тем же.
Таким образом, какое правило мы должны нарушить?
Тот, который я вычеркнул бы:
1. Необходимо только снизить CSS, в котором Вы нуждаетесь для просмотренной страницы.
Я думаю, что это намного более просто и более практично, чтобы уменьшать/комбинировать ад из всего CSS для моего сайта и снизить его сразу.
Что касается проблем производительности это могло бы создать, я думаю, что они уменьшены следующими фактами:
Современные браузеры становятся быстрее при обработке правил CSS, настолько симпатичных скоро, не будет иметь значения, если у Вас будет много правил в памяти, которые не используются.
Кэширование всего Вашего CSS улучшит скорость намного больше, чем какое-либо улучшение, которое Вы получили бы от игнорирования ненужных правил, которые собираются быть загруженными так или иначе, когда пользователь просматривает к страницам, которые требуют тех правил.
Я прямо здесь?
4 ответа
Как всегда, оба случая верны.
Ваше решение должно быть связано с бенчмаркингом ваших потребителей.
Но я бы, вероятно, придерживался только одного файла css до тех пор, пока это возможно. А если ваш сайт вырастет до таких экстравагантных размеров, что вам понадобится два разных файла, попробуйте использовать их в двух совершенно разных разделах сайта site_general и logged_in, например.
Тем не менее, некоторые вещи могут помочь вам:
- сжимайте css с помощью YUI Compressor (дает мне лучшие результаты)
- используйте apache (или что-то еще) deflate ваших css файлов
- и самое важное из всего, убедитесь, что файл кэшируется пользователем!
Следите за чистотой CSS
После нескольких запусков разработки сайта вам может пригодиться Dust-Me Selectors - расширение для Firefox, которое проверяет ваш сайт на наличие неиспользуемых селекторов.
Используйте селекторы с умом (скорость рендеринга!)
Вероятно, все селекторы работают справа налево, поэтому .parent div.myclass быстрее, чем div.parent .myclass. При написании CSS помните об этом. Также помните, что ID # намного быстрее, чем классы. Кроме того, как обычно, избегайте универсальных селекторов, не наводите курсор на элементы без ссылок, ... В Google есть отличная статья об этом.
В дополнение к этому запустите Расширение Firefox - Page Speed , которое даст вам очень подробную информацию о медленных селекторах и многом, многом другом.
Apache Deflating Example deflating меньше, чем gzipping, как Джефф так любезно сообщил нам в своем блоге.
LoadModule deflate_module modules/mod_deflate.so
<FilesMatch "\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
Пример кэширования Apache
# Set up caching on media files for 1 month as recommended by page speed
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
ExpiresDefault A2629744
Header append Cache-Control "public, proxy-revalidate"
Header append Vary "Accept-Encoding: *"
</FilesMatch>
Надеюсь, это поможет!
1. Вы должны использовать Gzip
alt text http://shup.com/Shup/376348/1106472221-My-Desktop.png
http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method
http://paulstamatiou.com/how-to-optimize-your-css-even-more
Для asp.net
http://web2asp.net/2009/01/introduction-one-of-big-complaints.html
Редактировать:
2. И эффективно писать CSS селекторы
http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
https://developer.mozilla.org/en/Writing_Efficient_CSS
3. И комбинирование
RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
4. Прочитайте предложения из ответов на этот вопрос Проблемы производительности CSS
Мне не нравится иметь несколько CSS файлов для каждой страницы. Достаточно 4-5 файлов CSS.
1. Common.css (with reset and common layout and typography and Form styling)
2. pagespecific.css (css of home and other landing pages)
3. print.css
<---- ie only css --- >
4. ie6.css
5. ie7.css
<--- >
А удаление белого пространства из CSS затруднит редактирование через FTP.
Вот хорошая статья об одном css или нескольких css. http://css-tricks.com/unique-pages-unique-css-files/
Это очень красивый вид, мистер Джонатакс ..
Да, я согласен с вами, оба приведенных выше пункта являются основными. Мой единственный комментарий относительно вашего первого пункта, который ...
- Вы должны использовать только тот CSS, который вам нужен для того, чтобы страница была просмотрено. (Поскольку слишком много правил CSS замедляет рендеринг).
Думаю, мы тоже сможем этого добиться.
В веб-приложении у нас будет общий каркас для всех представлений приложений. Можно сказать это Мастер-страница. Все наши разные страницы / просмотры берут его на вооружение. Таким образом, все страницы выглядят одинаково. В таком случае, почему мы не можем сделать одну таблицу стилей только для этого. Таким образом, его можно использовать для всех страниц / просмотров.Это может быть файл макета.
Это один файл CSS.
Затем мы можем сгенерировать другой CSS для элементов управления на странице или связать стили элемента управления также в файле CSS макета.
После любых стилей, которые могут быть у разных страниц, мы можем создать для них другой файл. Это не увеличит количество файлов CSS для одной страницы. Максимум на странице будет 2 или 3 таблицы стилей, которые полностью актуальны.
[EDIT]
Файл CSS по умолчанию всегда будет кэшироваться и использоваться для всех страниц / представлений приложения.
Всегда есть компромиссы. Если вы создаете много CSS-файлов и существует слишком много зависимостей, так что отследить, какой CSS-файл нужно включить, становится сложно, лучше сделать один (или максимум два) CSS-файла и минифицировать их. Надеюсь, ваши CSS-файлы не очень большие.