Recommendations - only load CSS, or use the miniaturization process?

Question

In the context of improving overall site performance (loading and rendering speed), there seems to be a contradiction between the following two best practices:

• Just remove the CSS that you need for the page you're viewing. (Because too many CSS rules cause slow rendering)

• Always reduce CSS and merge it into a single file. (Since more requests mean slower page loading)

Now I will say that I decided to follow rule 1.

The following issues appear:

What if 2 pages use the same set of CSS rules?

In this case, I need to put these rules in a separate file and link to this file from both pages.

However, if I have a lot of these “general rules,” I may end up with a lot of separate files from each page, and thus a violation of rule 2.

For example, page A may depend on CSS 1 and 2, while pages B and C depend on CSS 2, and page D depends on CSS 1.

In this case, it is impossible to have exactly one CSS per page or even several CSS per page, as some pages will need to share some CSS files with other pages.

But we cannot solve this problem by combining all the CSS for each page into a separate CSS file on the page?

We could, but it would create other problems.

CSS, , , , , CSS .

CSS , , CSS .

, CSS , , , .

, ?

:

1. CSS, .

, / CSS .

, , , :

• CSS, , , .

• CSS , , , , , , .

?

Answer 1

, .

, .

, , css , . , , site_general logged_in .

, :

• css YUI Compressor ( )
• apache ( - ) deflate css
• , , !

CSS Clean

, , - a Firefox, .

( !)

, , .parent div.myclass , div.parent .myclass. CSS . , ID # , . , , , ,... Google .

Firefox - , , .

Apache , 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>

, !

Answer 2

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

Edit:

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.

http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html

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/

Answer 3

Mr.Jonathaxxx..

, , , , - . , ..

• CSS, . ( CSS ).

, .

- . , . / . , . . , /. .

CSS.

CSS , CSS .

, , . CSS . 2 3 , .

[EDIT]

The default CSS file will always be cached and will be used among all pages / views of the application.

Answer 4

There are always tradeoffs. If you find that you make a lot of CSS files and there are too many dependencies, so keeping track of which CSS file for inlcude becomes difficult, it would be better to make one (or no more than two) CSS files and minimize them. Hope your CSS files are not crazy - big.