Results 1 to 9 of 9

Thread: loading style sheets

  1. #1
    epidemic is offline Net Builder
    Join Date
    Jan 2009
    Posts
    112
    Thanks
    2
    Thanked 9 Times in 6 Posts

    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 ...

  2. #2
    elbandelero's Avatar
    elbandelero is offline Net Builder
    Join Date
    Dec 2008
    Location
    Spain
    Posts
    544
    Thanks
    209
    Thanked 106 Times in 80 Posts
    Quote Originally Posted by epidemic View Post
    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.
    Last edited by elbandelero; 9 February, 2009 at 18:49 PM. Reason: typo

  3. #3
    epidemic is offline Net Builder
    Join Date
    Jan 2009
    Posts
    112
    Thanks
    2
    Thanked 9 Times in 6 Posts
    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.

  4. #4
    Shawn's Avatar
    Shawn is offline Net Builder
    Join Date
    Dec 2008
    Location
    Dominican Republic
    Posts
    165
    Thanks
    10
    Thanked 25 Times in 22 Posts
    Quote Originally Posted by epidemic View Post
    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.

  5. #5
    LogicFlux is offline Newbie Net Builder
    Join Date
    Dec 2008
    Posts
    47
    Thanks
    13
    Thanked 17 Times in 17 Posts
    Quote Originally Posted by epidemic View Post
    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

  6. #6
    LogicFlux is offline Newbie Net Builder
    Join Date
    Dec 2008
    Posts
    47
    Thanks
    13
    Thanked 17 Times in 17 Posts
    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>

  7. #7
    jane0109 is offline Unknown Net Builder
    Join Date
    Feb 2009
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  8. #8
    Duegar is offline Newbie Net Builder
    Join Date
    Jan 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  9. #9
    Mr.Bill's Avatar
    Mr.Bill is offline One is glad to be of service
    Join Date
    Dec 2008
    Location
    Redmond, Oregon
    Posts
    828
    Blog Entries
    1
    Thanks
    72
    Thanked 350 Times in 182 Posts
    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.

    Reverse IP Check ಠ_ಠ Proxy Sites
    <?php if ($youask == 'stupid question') { echo ('stupid answer'); } ?>

Similar Threads

  1. Are PPC slowing your loading time?
    By Franc Tireur in forum PPC
    Replies: 3
    Last Post: 28 February, 2012, 11:43 AM
  2. Replies: 0
    Last Post: 7 May, 2011, 10:50 AM
  3. javascript open while loading
    By xxtoni in forum Programming
    Replies: 4
    Last Post: 23 April, 2010, 23:48 PM
  4. 14 Rules for Faster-Loading Web Sites
    By sturat in forum Building
    Replies: 6
    Last Post: 10 November, 2009, 20:44 PM
  5. Problem: Site not loading
    By sadekjake in forum Web Proxies
    Replies: 3
    Last Post: 18 September, 2009, 07:48 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •