SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS optimization

    Hi!

    I'm working on the tail end of my first site and would now like to begin to think of ways to optimize it (CSS, JS, php). On the CSS side of things, I have all of my CSS for the site in one file: 819 lines. Is this a big file? Should I (if possible) break it into smaller files and include the CSS on pages only if absolutely necessary?

    Currently, I use CloudFlare which caches my CSS. How much does caching actually help? Are there other things that I could do? I've heard of of "minimizing" CSS files but don't know how much that would help nor how I would go about doing it.

    Any thoughts would be appreciated.

    -Eric

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always minimize the size of CSS files by removing with search/replace every tab and unnecessary new lines, which are read as \t and \n. If you want to go further, I recommend you this site:
    Clean CSS - A Resource for Web Designers - Optmize and Format your CSS , it will clean and optimise your CSS file.
    Web designer, programmer & webmaster for 7+ years
    Hosting 11 sites in Hospedaje Web México
    CentOS|cPanel|R1Soft|Softaculous|Cloud Hosting|Green Hosting

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input! Any thoughts on the size of the file? Would it be better to break it into smaller files?

  4. #4
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kreut View Post
    Thanks for the input! Any thoughts on the size of the file? Would it be better to break it into smaller files?
    Actually, many smaller files would be slower then one big file. Splitting it up into multiple files creates more HTTP requests and more work on your server, thus making your site slower.

    The best thing you can do is minfy your CSS (YUI Compressor) and start caching (you could also compress your files with GZIP).

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for the extra info.

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kreut View Post
    Hi!
    I'm working on the tail end of my first site and would now like to begin to think of ways to optimize it (CSS, JS, php). On the CSS side of things, I have all of my CSS for the site in one file: 819 lines. Is this a big file? Should I (if possible) break it into smaller files and include the CSS on pages only if absolutely necessary?
    Do not break the css file, because HTTP requests are the most expensive thing. Are you taking full advantage of inheritance? Are you using css shorthand for properties, colors (when possible) and using 0 instead 0px, 0pt, 0em, etc?

    Quote Originally Posted by kreut View Post
    Currently, I use CloudFlare which caches my CSS.
    Don't do it for the css file, because you want to send the file as fast as you can and because you want the page to start to render as soon as possible. If you use a CDN you must pay a DNS resolution and the creation of a new connection to a different server. I wouldn't do it also for template background images, for the same reason, but I would use sprites to the maximum.

    Quote Originally Posted by kreut View Post
    How much does caching actually help? Are there other things that I could do? I've heard of of "minimizing" CSS files but don't know how much that would help nor how I would go about doing it.
    For caching, read this: Optimizing cache

    Minification is useful for browsers that do not support compression (rare) or because user proxies (relatively common). It's a one time thing that saves you bandwidth and makes the documents load faster. Careful with minfying, if you are using css hacks or if you want to style :first-letter in IE6-, in that case is better to do it by hand, because available minifiers are clumsy with respect to css hacks and specific IE6- space needs.

    Make sure that you have keep-alive enabled and do not forget to use compression.

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for a thoughtful response...

  8. #8
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Quote Originally Posted by kreut View Post
    Hi!

    I'm working on the tail end of my first site and would now like to begin to think of ways to optimize it (CSS, JS, php). On the CSS side of things, I have all of my CSS for the site in one file: 819 lines. Is this a big file? Should I (if possible) break it into smaller files and include the CSS on pages only if absolutely necessary?

    Currently, I use CloudFlare which caches my CSS. How much does caching actually help? Are there other things that I could do? I've heard of of "minimizing" CSS files but don't know how much that would help nor how I would go about doing it.

    Any thoughts would be appreciated.

    -Eric
    I actually work for CloudFlare & thought I would jump in.

    CloudFlare actually has a auto minify option available to CloudFlare users in their CloudFlare settings. This feature can minify the following:

    Javascript, CSS & HTML

    The feature is available by going to:
    Settings->CloudFlare settings->Auto Minify

    Caveat:
    The feature is very much in beta & could potentially break things. Turn it off if you see anything strange.

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Damon,

    Thanks for your 2 cents. And as a person not even remotely affiliated with CloudFlare, I have to say that my site is way faster since using your free service. With your caveat...

    1) Would I have to check lots of different browsers? or...if it's fine in one browser then it will be fine in any other browser.
    2) Any thoughts on when the beta won't be beta?

    Thanks again for your input.

  10. #10
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Quote Originally Posted by kreut View Post
    Damon,

    Thanks for your 2 cents. And as a person not even remotely affiliated with CloudFlare, I have to say that my site is way faster since using your free service. With your caveat...

    1) Would I have to check lots of different browsers? or...if it's fine in one browser then it will be fine in any other browser.
    2) Any thoughts on when the beta won't be beta?

    Thanks again for your input.
    Glad to help

    1. I would probably check to be safe. I have seen some cases where browsers are impacted differently with the feature turned on.
    2. As soon as we're comfortable that it breaks fewer things. While it works for most sites very well right now, we still do find some cases that are a little trickier to resolve because sites are so complex these days.

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I don't expect my site to get really big for at least 6 months, so my "fat" site isn't much of a concern right now. But, I'll keep my eyes and ears out for the non-beta version to come out. Looking forward to it.

  12. #12
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kreut View Post
    Thanks! I don't expect my site to get really big for at least 6 months, so my "fat" site isn't much of a concern right now. But, I'll keep my eyes and ears out for the non-beta version to come out. Looking forward to it.
    Sounds good! Please let me know if you have any other questions


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
  •