Best Practices - Only Download CSS You Need, or Use a Minification Process

Should I aim for fewer HTTP requests or more cacheable CSS files?

Your first port of call is using YSlow or Google Speed to figure out what is going slowest on your site. Sometimes a badly compressed (large) image or two can be slowing the entire thing down. You are told to reduce HTTP requests because each request has a setup cost associated with it but if taken to the extreme can lead to worse performance. In your case having a CSS file for each page is bad form as it means it is harder for browsers to cache.

Taking one method to the extreme is bad practice and you should attempt to approach this problem from a wide angle such as:

  • Properly compress images or use CSS sprites (reduces HTTP requests)
  • Implement proper web caching using Expres, ETag etc (so clients don't have to rerequest everything)
  • Optimise your CSS and Javascript files using YUI or another similar tool
  • Improve your CSS / javascript code for performance. Certain CSS selectors can lead to the browser taking longer to render a page
  • Replace images with pure CSS where possible i.e. background colors etc.
  • Use GZip compression on any text output i.e. html, css, js

If in doubt, look at the source page for the Google home page. They optimise that page heavily and it will give you good clues on what to do.

What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks?

I like to use the 960 grid system, it works like a champ. Other than that, the only CSS I normally reuse are stuff I use on forms.

http://960.gs/

Why are we not using one CSS file instead of many CSS files?

Due to how cascading works, there is no possible way to cause harm just by concatenating the files together, provided you keep them in the order they appeared in the source. This will ensure that later files overriding earlier ones will still do so.

Then, you can consider minifying the CSS. This won't change the function of the selectors, but will compress them to reduce bandwidth.

All in all, having 27 CSS files is just stupid. The user would have to wait for 27 connections to be established, requests to be made, and downloads to be completed, just to see the page. Now, this does improve somewhat with proper cacheing, but even so...

CSS Performance issues

CSS? Not so much it's pretty tight, but on older (like gen 4) browsers I've seen problems with:

  • doing too much on the * selector
  • using inherit a lot
  • using the IE expression value abusively
  • loading a lot of external resources (images, other CSS docs)
  • applying a lot of what you might call unanchored selectors like div div

Basically anything which would be difficult to cascade through or would cascade a lot.

Is it necesarry to comrpress CSS (browser parses it slowlier maybe? SEO?)

But is it worth?

That's subjective.

Browsers can parse the files more quickly, or harder?

It makes no appreciable difference to parsing.

It does reduce the size of the file though, and that will allow it to be downloaded faster. In a large file or on a slow network connection, this can be quite significant.

What about google, SEO?

Search engine algorithms are secret, but they appear to pay little to no attention to stylesheets.

Any recommendations for a CSS minifier?

The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/



Related Topics



Leave a reply



Submit