Sarath Chandra Pandurangi's Blog

In a previous post , I have made a point how to improve performance by reduce HTTP connections by stitching together content of css and js fragments. At that time I also mentioned a way to do it further is to reduce the number of images on a page. Because images are also loaded on HTTP connections. Again the same Cache-Control headers on the client can be used to reduce much of this traffic. But to reduce the Number of HTTP connections, You can employ a technique called CSS Sprites. I have to confess, I don't know about this technique until I was researching on GWT's ImageBundle interface. Had I known this trick, my SarathOnline2.0 site would not have been lame - text only! Simply the technique is to stitch all images together into one big image. This big image is called a Sprite. The images used on my site are sprite-d as shown on the left. How do we display them seperately? Using css backgrounds. To achieve this We will send a blank 1px gif. Then insert an img tag with...

Its easy, have lesser images, css and js files. I will cover reducing number of images in another post. But If you are like me, You always write js and css in a modular fashion. Grouping functions and classes into smaller files (and Following the DRY rule, Strictly!). But what happens is, when you start writing a page to have these css and js files, you are putting them in muliple link rel=style-sheet or script tags. Your server is being hit by (same) number of HTTP Requests for each page call. At this point, its not the size of files but the number server roundtrips on a page that slows your page down. Yslow shows how many server roundtrips happen for css and js. If you have more than one css call and one js call, You are not using your server well. How do you achieve this? By concatinating them and spitting out the content as one stream. So Lets say I have util.js, blog.js and so.js. If I have a blog template that depends on these three, I would call them in three script tags. Wh...