In these series of posts I am going to have a look into the various factors that make our web applications slower and how we can rectify that. Ι have already blogged about caching in this blog and you can find these blog posts below

Caching an ASP.Net page

Data caching in ASP.Net applications

How to cache an asp.net page depending on the user's browser language

Caching is very important and vast topic and I might talk more in depth about this issue in future blog posts.Certainly with caching you can reduce the round trips between the client and the server.We can move content closer to the clients and reduce the amount it needs to be retrieved.

Ajax is another topic I blogged extensively about in this blog and definitely increases the responsiveness and performance of our web applications. You can find all the blog posts on Ajax here.

By optimising client side and server side code, we can also save money by reduced bandwidths and make money by having satisfied customers. Imagine two eshops created by 2 different web agencies. Visitors in the first one are very pleased with the overall performance of the site and the responsiveness. Visitors on the second eshop are not so pleased with the performance.It is profound that the first eshop will get more traffic and sales. Bear in mind that the better your site performs the higher Google and other search engines will rank your site.So there is a connection between site's performance and the site's ranking.

In this blog post I would like to concentrate on client/frontend performance issues.Before I go on looking into client side techniques that will improve the site's responsiveness I must say a few things regarding some general rules that will help our site performing better. We should make as many HTTP requests as necessary and we should try to reduce them.We should send as little as possible information to the client.A good example is to use the minified versions of the popular JQuery library instead of the full version.You can reduce the size of the file by 200Kbytes.

A lot of developers and web users in general seem to focus all their efforts how to enhance the performance of the server side components while neglecting to look into the client side performance issues.

As I often say in order to build a fast web application you need the browser to be fast, the server to be fast and the network to be fast. Do not focus solely on how to make the server-side code run faster.

Sometimes by improving issues on the client side makes you site's performance increase significantly.

One aspect that is very important to bear in mind is that when we use a tableless layout using DIVs and CSS. I am a big fan of using CSS. I think it is great idea to have the content HTML and styling CSS seperated.

It is much easier to make changes in the layout/colors of a web site by using an external CSS. From all the available options that we have with CSS (internal,external,inline) I prefer to use external CSS files.

When we adopt this approach our web sites are much faster. Another important issue for all the sites is Search Engine Optimisation. We want our web site to be indexed by search engines and to appear high on search engine results. When the content of our page is closer to the beginning of the file improves the ranking of the page. We should avoid including the large chunks of html code into a single table.

So, we must use external CSS and Javascript files. We should also try to use the minified versions of Javascript libraries when possible.In the case of JQuery library we must use the minified version (.min) since it decreases the amount of bytes that have to travel to the client through the wire.

You can find some good tools for minifying your CSS and Javascript files in the following links

http://www.minifycss.com/

http://yuilibrary.com/download/yuicompressor/

You can also find a nice minifying tool in the Codeplex repository

http://ajaxmin.codeplex.com/

Let me show you a little example using the CSS Compressor that can be found on the http://www.minifycss.com/css-compressor/

I have visited a rather large greek website/portal. Then I clicked on the View--->Page Source and found the external .css file.I copied all the contents in the CSS Input window and then I hit the button Process CSS.

In this example we have a new minified .css file that is 30% smaller in size than the original one. 

Have a look at the picture below

It is all very easy to use, so I urge you to try your own CSS files.

If you have used external CSS and Javascript files and minified them the next step is to optimise the images in your site.Images take a lot of bandwidth and sometimes takes a lot of time to load and cause our whole site to delay.Sometimes you will sacrifice image quality for size but sometimes you can reduce the size of an image without compromising its quality.

So we can compress our images, reducing significantly the size of the image but at the same time not decreasing the quality of the image too much...I am going to use Paint.Net to compress a .jpeg image. You can download Paint.Net from here.

Have a look at the picture below to see the image (a windows 7 .jpeg) before the compression

Then I save the same with another name and performing compression (10%). The quality of the image is almost the same and totally acceptable.The size has gone down from 67KBytes to 20.5Kbytes.This is a significant decrease in size. Imagine if you have a site with many images. Compression of the images could help significantly the performance of our site.

Have a look at the picture below

Obviously another thing to consider is if you really need all the images on the site.In my humble opinion I think that sites that do not have many images are "better looking" and "eye-candy". When you want to place a black background on the page, instead of using a .jpeg , use CSS and black color (#000). The same principle should also apply when using section dividers. Do not use images for that.You can use border thickness with the appropriate colors.I have seen sites where little, tiny thumbnails "cost" a lot in terms of size. I am sure you can afford to have your thumbnails in lower quality.

In case you want to have rollover effect on some images in your site, you can use transparency instead of rollover images. I am going to provide you with a simple example.

1) Launch  Visual studio 2010 or Express edition and create a new empty asp.net website.Add a web form to your site. Leave the default name(default.aspx). Add an images folder to your site. Add a styles folder to your site.You can download the image that you will place inside the images folder from arrow.zip.

2) In the default.aspx page add the following markup

<head runat="server">
    <title></title>
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
 
</head>
<body>

    <form id="form1" runat="server">
   
 
<a class="hoverimage" href="#">
<img src="images/arrow.jpeg" border="0" alt="arrow" />
</a>
 
    </form>

</body>
 

3) Add a stylesheet file to the styles folder. The code inside the .css external file is this

.hoverimage:hover img{-ms-filter:"progid:DXImageTransform.Microsoft.

Alpha(Opacity=70)";filter:alpha(opacity=70);opacity:0.7}

4) Run your site and you will see a nice rollover effect using one image and tranparency.

Another thing we can do in our site that has "text images" is to replace them with CSS and appropriate font types.Let's see that with an example.

Αdd another web form to your site. Leave the default name (Default2.aspx). In the images folder add this img11.zip

The markup follows

<head runat="server">
    <title></title>
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
    <form id="form1" runat="server">
   
 
<a class="hoverimage" href="#">
<img src="images/arrow.jpeg" border="0" alt="arrow" />
</a>
 
    </form>
</body>

This is the css rules we should add in the external stylesheet.

.wrapper{border:1px solid #000;height:60px;background:url(../images/img11.gif)}
.maintext{font-family:Monotype Corsiva;font-size:48px;color:#A01F1F;padding:5px}
.maintext span{color:#A01F1F}

So instead of having a a fancy "text image" you can have the same visual effect with CSS and nice fonts that all modern browsers support.

Run your site and see the results.

Statistics have shown that 85% of the time that a web site is loaded is spent on HTTP requests that request and load images,.css,.js files.

We can use "CSS Sprites" to decrease the size of the files being downloaded and the amount of HTTP requests. Remember that every image that is being downloaded is a seperate HTTP request.

CSS Sprites is a technique that combines small images into a single image.Then we use CSS to index into the larger image.

In most sites we have images like the mail icon,twitter icon,facebook icon,newsletter icon. For all those images there are different HTTP requests.

I am using Fiddler, which is a great web debugger/listener tool, to monitor what is happening as my site loads.

I have visited a site that does not use CSS sprites. Have a look at the Fiddler image below.You can see that there are 4 separate HTTP requests to the server.

Now let me show you how you can use CSS sprites to change that.

Add another web form to your site (Default3.aspx).This is the markup and this is the csssprites.zip file that you can get the images and place them in the images folder.

 <form id="form1" runat="server">
    <div>
        <img src="images/home.png" /> | 
        <img src="images/mail.png" /> |

        <img src="images/sitemap.png" /> |

        <img src="images/facebook.png" />
    </div>
    </form>

Run your application and have Fiddler up and running at the same time.

You will see something like the picture below

Let's see now how we can use CSS sprites. First of all zip the folder that has all the images.

Then navigate to the http://spritegen.website-performance.org/ and upload the .zip file to this excellent CSS and Image sprite generator.

There are many options there, but I would not change anything for the time.

In my case when I do that I get the following results as shown in the picture below

When I add the sprite image in my page and the relevant CSS rules and run my page in the browser, I get the following results through the Fiddler

As you can see I have one request for the sprite image.

Another important issue that not many people know when it comes to images, is how the browser downloads images. The browser cache is case sensitive. If you do not use lowercase or uppercase when referencing the images then the browser would download the same image twice.

<img src="theimage.jpg" width="100" height="100" />

 <img src="TheImage.jpg" width="100" height="100" />

If you have those two lines of code in a page the browser will download the image twice even if it was cached.So apply the same naming pattern everywhere.

We all have in our websites the favicon.ico file that is used in the address bar and in the Favorites bar.Most browsers look for this icon in the root folder.

This request is being made every time people visit our site.

We can use a different way to reference the favicon.ico image and take advantage of caching.For example I could write it like that by using a link.

<link rel="shortcut icon" href="images/favicon.ico" />

Another important issue is the CDNs (Content Delivery Networks) and why we should use them.As it was said countless times in this post, static content accounts for the majority of the initial download time for a web page.

Due to network latency the closer the static content it is to your user the faster it will download. CDNs allow you to publish the static content files to their servers.These static files become replicated across a network of servers around the world.Each of those files is assigned a unique URL and we can place that URL to our web pages.When the browser requests one of your pages, it will make its request for the page's static content to the CDN.The CDN will determine which is the best server to deliver the content and the transfer will begin.Have a look how CDN links look like when referencing the popular Javascript Library JQuery in Google,Microsoft and JQuery servers.

http://code.jquery.com/jquery-1.7.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
 

In a nutshell CDNs give us performance since it locates the closest server to download static content from and caching.If you are wondering what will happen if the CDN servers are down have a look here.

Finally I would like to talk about a few tips that you could use to optimise your client side experience.

You should remove redundant HTML tags and you should also remove <meta refresh> tags. You should minimise the length of the alt tag. Remove unused CSS and use self-closing tags whenever possible.

Use <img/> instead of <img></img>.

That is all for now.

Hope it helps!!!