Front-End Performance Tips for ASP.NET Websites – Minimize HTTP Requests

According to Yahoo Developer website:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

I conducted some experiments on one development websites and I have found some remarkable results:

Reducing the Number of CSS Files Requests

Using multiple CSS files can affect the page loading time. Please take a look at the following image to see the results of reducing the number of the CSS files:

The number of the CSS files was reduced by merging multiple CSS files into a single one and also by applying a minification tool to it. That’s why there is a difference in size between those multiple files and the ones in the image above.

Reducing the Number of JavaScript Files Requests

A big number of Javascript libraries can affect the loading time the same way the CSS files do. Please take a look at the following image:

The Javascript files were compressed similar to the CSS files but in this case with the help of a Telerik RadScriptManager control that does the merging and the compressing automatically. There are of course some free tools that make the same thing in case you don’t have access to a Telerik licence.

CSS Sprites

The CSS sprites technique can also reduce the page loading time and probably this is the most efficient but not every time the handiest solution. Creating sprites for an early developed project can confuse the developers and the deadline of the project can be affected so think twice before you take the decision to implement sprites.

Usually sprites are implemented at the end for the project development, just before you deliver it.

Minify JavaScript and CSS Files

According to Yahoo Developer website:

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Please take a look at the examples below:

CSS

I took a CSS file that had 4437 lines of code and size of 296kb;

I minified it with this CSS Compressor and I got back a file with 1 line and a size of 249kb. The ratio was 16.7%. Not much if you know how to write a CSS file (classes written in one line).

JS

Better results can be obtained when a JavaScript file is minified because it’s against coding best practices to write JavaScript code inline.

I took a JS file that had 1301 lines and a size of 60kb.

I minified it with this JS Conpressor and I got back a file with 1line and a size of 28kb. The ratio was aprox. 51%

Correctly Place Stylesheet and Javascript Files

JavaScript

When JavaScript files are being loaded by the browsers, no other file types are being loaded in that moment so the loading time of the page can be affected.
Of course the same thing happens when you place them at the bottom of the page but then the user will already see the full markup and the style of the page.

NOTE: At the bottom of the page means right before the closing body tag.

CSS

Adding the CSS files to the head of the file allows progressive rendering in many browsers.

Some General Page Loading Optimization Tips

1. Minimize the number of iFrames on your pages.
2. Optimize image size (pretty effective for jpeg format). There are plenty of tools online.
3. DO NOT scale images in HTML
4. If possible, use g-zip compression on your pages
5. Minimize DOM access in JS