July 2009 - breath of fresh marasm

Many web developers think that if the site is small then they don't have to worry about the speed of the response time. Unfortunately, they are wrong. Look at the site again (el-ART). There was not much html there but there were about 15 images (including logos and css images), several css files and couple of scripts. 30 or 40 requests per every page load. Then I started optimization - there are dozens of tools which can help you with it - I prefer Page Speed Firefox addon.
Lets go step by step with several of it's clues:

Combine external CSS

There are several ways of reducing the number of requests that are sent by the browser. One of them is combining external css files. The easiest way for this is just to create a single file and copy the content of all css files into the new file. Then just replace all previous css links with the one to the new file. However, the solution is not perfect. If you have several files, you can easily keep order in them and it's easy to find what you need. With one file it becomes a challenge.

But there is an easy solution - you can create your own handler that will combine all css files for you and will return them as a single response. If your site is an ASP.NET site, you can use custom resource handler like this one. If you use other environment, you will find something similar for sure. I used my own one with gzip compression enabled, extended caching and setting header values. It not only decreases the number of the requests, but reduces the size of the response as well.

Combine external Javascript

This one is pretty similar to combining css files. However, it has to be extended if you are using Web Extensions - the site will use a lot of .axd files and it's a little bit harder to cope with them. But Damian Kulik created a solution for this which can be found here http://damikulik.blogspot.com/2009/07/script-and-styles-optimizer-for-aspnet.html. I'm not going to copy and paste from his blog here so if you want to know more about it then just stay on his blog for a couple of minutes.

Optimize the order of styles and scripts

The order of the styles and javascript files is really important. Sometimes it is enough just to move link up or down on the page to decrease the time of loading page significantly. How? It's all about the parallelization downloads. The general rule is: css files should be in the < head /> tag, while js files should be placed as far in the content as it is possible, sometimes even just before the end of the < body /> tag. More about ordering on google code.

Optimizing images

There are 2 main rules here:
- use compressed images - in many cases you can compress your images so they look exactly the same but they are smaller. Page Speed will compress the files for you and display links to compressed images so you can use them on your site.
- do not resize images in html - do not display big images that are resized - the browser will have to download the big file anyway and, what is worse, IE browsers use a pretty bad algorithm for resizing images so they look not nice.

CSS sprites

This one is huge! Probably I should mention about it on the very top of the article but never mind. The whole idea of CSS sprites is described on the css tricks site. Instead of downloading dozens of images and wasting time for requesting all of them, you can download only one image and display parts of it wherever you need them. Take a closer look at my site again (el-ART) - there are 6 links with images in the bottom part of the page. If you would check their properties you would see that all of them has the same background - gallery.jpg, just moved with background-position css property. The image is smaller than 6 separate images and browsers load it several times faster.

Compress response

One more thing that could be done is compression of the response html. When you write html then you should format it so it could be easily read and maintain, but when you send it to the user, it should be as small as possible. It really easy to apply it in ASP.NET. The only thing to do is to edit the Application_BeginRequest method in Global.asax.cs class as follows:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.RawUrl.ToLower().EndsWith(".aspx"))
    {
        string acceptEncoding = Request.Headers["Accept-Encoding"];

        if (!string.IsNullOrEmpty(acceptEncoding))
        {
            acceptEncoding = acceptEncoding.ToLower();

            if (acceptEncoding.Contains("gzip"))
            {
                Response.Filter = new HtmlCompressStream(Response.Filter, CompressionMode.Compress,
                                                         HtmlCompressStream.CompressionType.GZip);
                Response.AddHeader("Content-encoding", "gzip");
            }

            else if (acceptEncoding.Contains("deflate"))
            {
                Response.Filter = new HtmlCompressStream(Response.Filter, CompressionMode.Compress,
                                                         HtmlCompressStream.CompressionType.Deflate);
                Response.AddHeader("Content-encoding", "deflate");
            }
        }
    }
}

Decrease loading time - summary

All those optimization tips helped me to create the site that is displayed very fast. There are only 12 requests for the content, the size of all of them is about 210KB, and the site loads for me in less than 1 second. Just to show you the difference, BBC site uses 82 requests (556KB) and loads about 10 seconds for me.

If you have any interesting experience with increasing performance of the ASP.NET sites or want to show how you deal with optimizing issues, do not hesitate to leave your comment below.