Thread: loading style sheets

I was just wondering, in terms of speed, what would be better? create one GIANT style sheet for my whole website or create multiple style sheets for different sections of my site? and from what size would this start to be beneficial?

I can assume that loading one style sheet with a size of 20 KB would be more beneficial than loading 10 style sheets of each 2 KB ...

Originally Posted by epidemic

I was just wondering, in terms of speed, what would be better? create one GIANT style sheet for my whole website or create multiple style sheets for different sections of my site? and from what size would this start to be beneficial?

I can assume that loading one style sheet with a size of 20 KB would be more beneficial than loading 10 style sheets of each 2 KB ...

A single stylesheet of 20k is better than several smaller files, but considering stylesheets are only ever loaded once because they get cached by the browser, you have to ask is it worth the effort for the marginal gain? Regular users to your site will still have your stylesheet in cache so aren't going to notice any performance improvements after the first page view.

okay.. so basically it would be better to create one file? I'm estimating my stylesheet to be +- 50 KB when my site is finished.

Originally Posted by epidemic

okay.. so basically it would be better to create one file? I'm estimating my stylesheet to be +- 50 KB when my site is finished.

Unless your server is slow, I can't imagine 50KB would be an issue for load speed. That would be like adding a small image to the webpage.

Originally Posted by epidemic

okay.. so basically it would be better to create one file? I'm estimating my stylesheet to be +- 50 KB when my site is finished.

It could make sense to break them up if you're only going to serve some on certain sections or pages of the site. If you're going to server them all on all pages then it really only makes sense to put them in one file to reduce hits to the server.

You can serve compressed output but there is a bit of a tradeoff in that the client machine(your site's visitor's machine) will have to decompress, which probably isn't a big deal.

Code:

<IfModule mod_rewrite.c>

  RewriteEngine on


  #### COMPRESS JS ####
  RewriteCond %{HTTP:Accept-encoding} gzip
  RewriteCond %{HTTP_USER_AGENT} !Safari
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule ^(.*).js$ $1.js.gz [QSA,L]


  #### COMPRESS CSS ####
  RewriteCond %{HTTP:Accept-encoding} gzip
  RewriteCond %{HTTP_USER_AGENT} !Safari
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule ^(.*).css$ $1.css.gz [QSA,L]

</IfModule>

You need a compressed version of the file on your server in the same directory as the original file.

You can gzip it with:
gzip -c original_file_name.css > original_file_name.css.gz

I forgot something, without this in your .htaccess file too the above code won't work.

Code:

<files *.js.gz>
ForceType text/javascript
Header set Content-Encoding: gzip
</files>

<files *.css.gz>
ForceType text/css
Header set Content-Encoding: gzip
</files>

I'd prefer 1 giant stylesheet for the whole website because it would be space saving and of course, it's not confusing to look for codes

As other posters mentioned, one style sheet would be better, but I think in terms of maintanence it would be nightmare.

IMO this sort of micro performance optimization on css is not really worth the effort, since (a) css is cached (b) more hassle for you to maintain.

Even though this is an old post I would think that for "different sections of my site" that multiple might be the better move as all pages may not require the same information. Then editing would be a lot easier if you divided it the css files. I have some sites with one and others with up to 6 style sheets.