Optimizing webpage load time by using CSS Sprites and Suturing

Last night my boss (at night) was giving me some orientation materials and gave me task to do some research about optimizing load time of a web page. I am obsess with optimizing load time of web pages. In fact i optimized this website that it’s load time is already 0.16 seconds. I Remove some of the external scripts,optimized images and cached the pages since i do not update them in a day to day basis. I usually measure the load time of webpages and its components by using the firebug plugin for mozilla firefox. You can do that by observing the “net” tab. I have posted some screenshot here. So we were talking about our goal which is to make fewer Http request and i remember he asked me about it.

Boss: “Are you familiar with css sprites?”
Me: “CSS sir yes but i have no clue what is CSS sprites.”

And so another knowledge of incalculable value was added into my memory

The goal: Make fewer http request

Browsers typically limit the number of concurrent HTTP connections per server. According to HTTP 1.1 Specification. In IE8 it has been increase to 6 . Mozilla firefox have 8. According to microsoft “The two-connection limit for HTTP 1.1 was due to a mandate that was established in the HTTP 1.1 specification (Request for Comment 2616) World Wide Web link. At the time the standard was first drafted (January 1997), the two-connection limit was appropriate, considering the dominance of narrowband Internet connections and the scarcity of broadband connections.“. Anyway for the sake of discussion, there should be a way to circumvent this limit. Ive done a little research and actually there are many ways. Go here to dig more about the topic. So basically when we are communicating or sending a request to the server and we sent 5 simultaneous request, the 2 will be processed while the other 3 will be queued. So it doesnt really matter how fast is the server or how fast is your internet connection. We just have to wait!

Request comes in many forms whether images or css files or javascripts files. Say we are viewing a webpage. Unfortunately this page contains 5 images, 2 external css files and 3 external javascript files and they are on the same domain. These components (term for all of these) follow the browser’s connection limit per domain. You cannot just download all of them (or gets displayed on your browser) simultaneously. Again we have to wait.

So what are CSS sprites?

They are actually smaller fragment of images group into one image. The goal here is to make fewer http request. Lets say you have a navigational links on the left side of your website. You decided to create icons to all of the links. You have 10 links means you have 10 small images as your icon. So instead of making 10 small images (10 small images translate to 10 small web server request ^_^ ) why not create one whole image to and put all the small icons there? Im talking about this image and this image and this image. Apparently, the big guys knows about it for a long time now. And we did not do our little homework about it

The key here is to have the same background image for all containers and reposition the background image to display the desired part of the whole image. We would do it like this:

#link1{
    background:url(background_image_sprite.png) -100px -20px;
}
#link2{
    background:url(background_image_sprite.png) -100px -30px;
}

Repositioning the background image at real time is not a problem with firebug. Thank goodness we have tools like that. The real trick here is repositioning the background image to render the desired image in the whole image :). Once the image is loaded it is saved as cache on the browser. Means the browser doesnt request this component the second time granting the image is not changed on the server and caching is not disabled. We can use this image as fast rollovers too.

“Ma, can we group CSS and Javascript too?”

Actually there is a way. They call it suturing. Consider this fragment of code for PHP.

< ?php
  // Tell the browser we are outputting a css document type
  header('Content-type: text/css');

  //and we can cached them too
  header('Cache-control: must-revalidate');
  header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 10800) . ' GMT');

  // group the css CSS files and output them as one

  include("css1.css");
  include("css2.css");
  include("css3.css");
?>

For ASP/ASP.NET pages we can open them as stream and output them in the browser.

   Response.ContentType = "text/css";
   Response.Cache.SetExpires(DateTime.Now.AddDays(1));

   Response.WriteFile ("css1.css");
   Response.WriteFile ("css2.css");
   Response.WriteFile ("css1.css");

We can also do that with javascript files. The idea is just the same.

Conclusion:
I guess understanding how the client communicates to the server and back and being aware of the current limitations is really helpful in web development. We cannot just build webpages and serve them to our users. We have to make their first experience as good as everything that technology can give them. We cannot deprive them of these experiences. Remember most of our users coming have an empty cache and if our website loads very slow (due to website not optimized) we would lose that chance for that visitor to come back again. If our website is a business entity, we are losing a potential customer.