Ashrafuzzaman on Technology: Some Css and Javascripts optimization tips

There are so many aspect for optimizing the performance of a web application, that some times people tends to forget about Javascript and Css.

Yahoo developers experienced that, 80% of the end-user response time is spent on the front-end. Most of the time browser is busy downloading images, stylesheets, scripts, Flash, etc. Here you can find the details.

But there are improvement opportunities in these areas to improve the over all performance of the application.

Mostly we concentrate on some basic criteria

Caching
Minifying Javascript and Css
Reducing number of files

Caching

Caching is great and browser gives you for free :). But should all our css and Javascripts should be cached??

Actually no!! Because some times browsers cache too much(specially Internet Explorer). You want the client to get the latest files if the file is changed.

So we need to identify the files that changes and files that do not change(library files, like jquery, prototype etc). We expect library files to get cached and custom files that changes a lot, not to be cached. We can skip caching by passing a random query string like,

<script type="text/javascript" src="scripts/default.js?rand=1"></script>

That random number can be generated from the server side while serving the page (which is a built in facility for rails).
Now for common libraries(jQuery, protopye) we should use Google API for 2 reasons

It grabs the library from the closest location it can get. So it loads faster.
It frees your server from serving the library file, so that your server can serve more files instead.

This is how you can use Google API to load popular Javascript libraries.

<script type="text/javascript" src="http://www.google.com/jsapi"></script><br /><script type="text/javascript"><br />  google.load("jquery", "1.3.2");<br /></script>

Minifying Javascript and Css

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage).

So surely you want to minify all your javascripts and css on your production server. There are some nice online Javascript and css packer which actually does the trick.

Javascript

http://jscompress.com/

http://dean.edwards.name/packer/

Css

http://www.cssoptimiser.com/

http://flumpcakes.co.uk/css/optimiser/

I know what you are thinking. You can’t go to web and pack all your css and Javascripts all the time you deploy, specially if you are following Agile and deploying your code after every 2 weeks.

There are platform specific implementations to resolve this problem. For rails we can use this to minify and pack javascripts and reduce number of Javascripts.

You can use yahoo compressor written in Java, so you can run that in any platform.

http://developer.yahoo.com/yui/compressor/#work

There is another implementation by Douglas Crockford,

http://crockford.com/javascript/jsmin

We can add necessary commands to our deployment script, so that after or before deployment the compressor is run.

Reducing number of files

Web servers can not serve a lot of files consecutively. There are limitation for browsers as well. If you watch your site with firebug net inspection, you will see that a lot of file calls which are not called parallely. So reduction in number of files served can improve the performance of the web application.

How can we reduce number of files?

There are several ways we can reduce number of files.

1. We can merged css and javascript the way we minified it.

2. Most of the cases we don’t care about the images. As a result the number of images grow rapidly.

There are some nice ways to merge images into one using css background-position property. People call this css sprite.

And every one use it to reduce file size as well as number of files.

If you merge some images into one, then size is actually reduced. Because other then the picture information every image maintains a color template. If some images are merged then a super set of color template is generated which reduces the total size of the image then the sum of the size of individuals.

Here are some nice examples

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

http://www.alistapart.com/articles/sprites

http://css-tricks.com/css-sprites/

Here is a site that generates css sprite.