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.
You can always minimize the size of CSS files by removing with search/replace every tab and unnecessary new lines, which are read as \ and
. 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.
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).
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?
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.
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.
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…
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.
I would probably check to be safe. I have seen some cases where browsers are impacted differently with the feature turned on.
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.
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.
