ISSUE : HOW DOES THE COUNT OF THE CSS FILES IN A WEB APP AFFECTS IT’S PERFORMANCE?

Here are my findings:

1. It’s better to have a single css file rather than multiple since each file costs a server request.

HTTP requests by their nature are sequential in nature, which means that once a request is made to an HTTP/1.1 server from a browser, the next request will have to wait until the first one is processed. This brings about a latency which is associated with any request+response (however large or small). In our case, the css files are very small(compared to other things). Nevertheless there is a latency associated with every request.  Hence one call much better than many calls. One big css file will load faster than two small files half its size and so on so forth.

Note : HTTP/1.1 allows multiple requests to be written out (but not processed) through something called HTTP Pipelining. By default all the modern browsers except Opera come with Pipelining disabled.

Another point to be noted here is the asymmetric nature of the internet connections everywhere. The download:upload speed is in the ratio of 5:1 to 20:1. This forces us as developers to keep our requests also to a minimum. More requests = more chances of bottlenecks during the request cycle.

Chief performance engineer at Yahoo speaks here regarding this : http://developer.yahoo.com/blogs/ydn/posts/2007/04/rule_1_make_few/

2. It’s best to minify the css regardless of the count. Lot of tools available e.g. YUI Compressor

Minification : http://en.wikipedia.org/wiki/Minification_(programming)

3. Inline vs File

It is much better to have styling in a separate css file rather than inline because the file can be cached once and used all the time (In most practical cases i.e.).

4. It’s a great idea to compress our css files and making sure that gzip compression is enabled in the production server.

Reference: http://developer.yahoo.com/performance/rules.html#gzip

5. Multiple css files are recommended for pre production environment because of ease of organization.

6.Repetitions

Another time when multiple css files are recommended is when you have lots of different styling for the same element for each page of the site. This might result in downloading of extra things which you wouldn’t need in a particular page (This is not the case with LP5 though).

7. Length of the file.

This is just FYI and may or may not be useful to our discussions:  IE 6/7/8 limits the number of css files allowed to be loaded from a single page to 31. It simply ignores the rest. For what its worth, IE also limits the number of selectors allowed to 4095 and simply ignores the rest. This in turn translates to a limited css filesize being allowed. No official word on the file size but considered to be near ~280Kb. Other modern browsers do not have any limits whatsoever.

Reference : http://support.microsoft.com/default.aspx?scid=kb;en-us;262161

8. A lot of the above points hold true for JavaScript also.

The following are the sites I came across during my research. I recommend not taking anything said here or elsewhere on its face value.

http://stackoverflow.com/questions/3128479/for-performance-use-one-or-several-css-files

http://developer.yahoo.com/performance/rules.html

http://www.rubyrobot.org/article/5-tips-for-faster-loading-web-sites

http://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size

http://blogs.sitepoint.com/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/

Advertisements