Improve Performance of Web Page (Client Side) – Extended Version


Make fewer HTTP requests

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

Use a Content Delivery Network (CDN)

User proximity to web servers impacts response times. Deploying content across multiple geographically dispersed servers(CDN) helps users perceive that pages are loading faster.

Avoid empty src or href

You may expect a browser to do nothing when it encounters an empty image src. However, it is not the case in most browsers. IE makes a request to the directory in which the page is located; Safari, Chrome, Firefox 3 and earlier make a request to the actual page itself. This behavior could possibly corrupt user data, waste server computing cycles generating a page that will never be viewed, and in the worst case, cripple your servers by sending a large amount of unexpected traffic.

Add Expires headers

Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.

Compress components with gzip

Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.

Put CSS at top

Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

Put JavaScript at bottom

JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.

Avoid CSS expressions

CSS expressions (supported in IE beginning with Version 5) are a powerful, and dangerous, way to dynamically set CSS properties. These expressions are evaluated frequently: when the page is rendered and resized, when the page is scrolled, and even when the user moves the mouse over the page. These frequent evaluations degrade the user experience.

Make JavaScript and CSS external

Using external JavaScript and CSS files generally produces faster pages because the files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded each time the HTML document is requested. This reduces the number of HTTP requests but increases the HTML document size. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the HTML document size is reduced without increasing the number of HTTP requests.

Reduce DNS lookups

The Domain Name System (DNS) maps hostnames to IP addresses, just like phonebooks map people’s names to their phone numbers. When you type URL into the browser, the browser contacts a DNS resolver that returns the server’s IP address. DNS has a cost; typically it takes 20 to 120 milliseconds for it to look up the IP address for a hostname. The browser cannot download anything from the host until the lookup completes.

Minify JavaScript and CSS

Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed. This improves response time since the size of the download files is reduced.

Avoid URL redirects

URL redirects are made using HTTP status codes 301 and 302. They tell the browser to go to another location. Inserting a redirect between the user and the final HTML document delays everything on the page since nothing on the page can be rendered and no components can be downloaded until the HTML document arrives.

Remove duplicate JavaScript and CSS

Duplicate JavaScript and CSS files hurt performance by creating unnecessary HTTP requests (IE only) and wasted JavaScript execution (IE and Firefox). In IE, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page. In both IE and Firefox, duplicate JavaScript scripts cause wasted time evaluating the same scripts more than once. This redundant script execution happens regardless of whether the script is cacheable.

Configure entity tags (ETags)

Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.

Make AJAX cacheable

One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.

Use GET for AJAX requests

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

Reduce the number of DOM elements

A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.

Avoid HTTP 404 (Not Found) error

Making an HTTP request and receiving a 404 (Not Found) error is expensive and degrades the user experience. Some sites have helpful 404 messages (for example, “Did you mean …?”), which may assist the user, but server resources are still wasted.

Reduce cookie size

HTTP cookies are used for authentication, personalization, and other purposes. Cookie information is exchanged in the HTTP headers between web servers and the browser, so keeping the cookie size small minimizes the impact on response time.

Use cookie-free domains

When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.

Do not scale images in HTML

Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed. For example, if your page requires image myimg.jpg which has dimensions 240×720 but displays it with dimensions 120×360 using the width and height attributes, then the browser will download an image that is larger than necessary.

Make favicon small and cacheable

A favicon is an icon associated with a web page; this icon resides in the favicon.ico file in the server’s root. Since the browser requests this file, it needs to be present; if it is missing, the browser returns a 404 error (see “Avoid HTTP 404 (Not Found) error” above). Since favicon.ico resides in the server’s root, each time the browser requests this file, the cookies for the server’s root are sent. Making the favicon small and reducing the cookie size for the server’s root cookies improves performance for retrieving the favicon. Making favicon.ico cacheable avoids frequent requests for it.



Performance Enhancement in [Client Side]


Performance Enhancement

1. Minify Resources (HTML, CSS, and JavaScript):¨

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

2. Enable Compression:

¨All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.


¨All excel templates/uploaded files etc in application

3.Optimize Images:

¨Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render content on the screen.


¨Save Image as font [using @font-face]
¨Using SVG’s [bit controversial]

4.Optimize CSS Delivery:

¨Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render.

¨If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.

¨If the amount of data required exceeds the initial congestion window, it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.

5. Reduce the size of the above-the-fold content:


To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. There are several ways to do this:

¨Structure your HTML to load the critical, above-the-fold content first

¨Reduce the amount of data used by your resources

6.Remove Render-Blocking JavaScript:

¨Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.

¨Inline JavaScript [if few lines of code]
¨<script async src=”my.js”>

7. Working with the DOM:

¨Working with the DOM can cause browser reflow, which is the browser’s process of determining how things should be displayed. Directly manipulating the DOM, changing CSS styles of elements, and resizing the browser window can all trigger a reflow. Accessing an element’s layout properties such as offsetHeight and offsetWidth can also trigger a reflow. Because each reflow takes time, the more we can minimise browser reflow, the faster our applications will be.

function addAnchor(parentElement, anchorText, anchorClass)


var element = document.createElement(‘a’); parentElement.appendChild(element);

element.innerHTML = anchorText;

element.className = anchorClass;



function addAnchor(parentElement, anchorText, anchorClass)


var element = document.createElement(‘a’);

element.innerHTML = anchorText;

element.className = anchorClass;



8. Avoid Plugins:

¨Plugins help the browser process special types of web content, such as Flash, Silverlight, and Java. Most mobile devices do not support plugins, and plugins are a leading cause of hangs, crashes, and security incidents in browsers that provide support.


¨Use HTML5
¨Removal of activeX control from application


Dev Tool: Client Side Performance Evaluation

Page Speed Insight [Extension by Google Chrome]
¨Minimise payload
¨Minimise delay in page load

Notes prepared From Google Blog

Ten Simple Tips to Improve Performance of an ASP.NET Website

Tips to improve the performance of ASP.NET web applications


In this tip, we will look at various aspects of improving the performance of ASP.NET web applications.

Performance is an important aspect of the modern day web application development. Here are some tips that you can consider while making a better performing website.

1. Upgrade Your ASP.NET Framework

Check your .NET framework. If you can upgrade your site to use .NET 4.5, then it has some great performance optimizations. .NET 4.5 has a new Garbage Collector which can handle large heap sizes (i.e., tens of gigabytes). Some other improvements are Multi-core JIT compilation improvements, and ASP.NET App Suspension. These optimizations do not require code changes.

2. Caching

  1. Use output caching – Use output caching for regularly used views or pages which have no dynamic updates. The easiest way to implement cache on MVC view is to add an [OutputCache] attribute to either an individual controller action or an entire controller class. Here is a controller action Index() that will be cached for 15 seconds.
    [OutputCache(Duration = 15, VaryByParam = "None")]
    public ActionResult Index(string Id)
  2. Use Data caching – Reduces the database or the disk I/O by caching the regularly used data to in-memory cache. This avoids repeated queries for data, and it can improve performance and scalability. In addition, caching makes data available when the data source is temporarily unavailable. The .NET Framework provides classes that enable you to use caching facilities in ASP.NET applications. These classes are defined in the System.Runtime.Caching namespace.

3. Always keep CSS and JavaScript External

Never add any JavaScript or inline style information within the views. That would regenerate the view each time and you would miss out on the benefits of the Caching. Hence always keep JS and CSS as separate files and add them as links in the view.

4. File Compression

There are often requests to the web server with lot of static content. These contents can be compressed thereby reducing the bandwidth on requests. The following setting is only available in II7 and later.

        <urlCompression doStaticCompression=&rdquo;true&rdquo;       doDynamicCompression=&rdquo;true&rdquo; />  

The urlCompression name sounds strange but it is not really the compressing of URLs. It means compressing or gzipping the content that is sent to the browser. By setting to true/enabling, you can gzip content sent to the browser while saving lots of bandwidth.

5. Bundling and Minification

The custom CSS files and the JavaScript files should be bundled into a single large file (reduces the number of HTTP requests) and also minified (reduces the size of the data transferred over the wire).

6. CDN (Content Delivery Network)

All the 3rd party JavaScript files such as JQuery, Knockout should always use the CDN instead of the web application server. CDN Servers are dedicated to deliver the static content and is always faster than your own host. There is a very high probability that the client (browser) would have already cached the JavaScript as part of other web application since most of them use the same CDN URL.

7. Control Image Requests

There are couple of ways to do this.

  1. Image sprite – With image sprite, you can combine multiple different images into a single large image. Then use CSS to reposition those images within the site.
  2. Base64 Data URIs – With this option, you would never make any requests to the server to obtain any images.

8. Script Rendering Order

Move the script tags <script> to the very bottom of the page. The reason this is important is because during the rendering, when the browser comes across a <script> tag, it stops to process the script and then moves ahead. If you put the script tags at the bottom of the page, the page/HTML will render faster and the scripts can execute after the DOM elements have loaded. Sometimes moving the script to the bottom of the page is not possible as some DOM elements or CSS may depend on these scripts, so they can be rendered. In such cases, you could move those scripts further up the page.

There are some other ways:

  1. defer attribute
    <script src=&rdquo;some.js&rdquo; defer>

    Using the defer attribute, you can specify the script not to run until the page has been fully loaded.

  2. async attribute
    <script src=&rdquo;some.js&rdquo; async>

    Using the async tag, the scripts will be run asynchronously, as soon as it is available.

9. Removing Default HTTP Modules in ASP.NET

ASP.NET has many http modules waiting for request to be processed and would go through the entire pipeline even if it’s not configured for your application.

All the default modules will be added in the machine.config place in“$WINDOWS$\Microsoft.NET\Framework\$VERSION$\CONFIG directory. One could improve the performance by removing those modules which you wouldn’t require.

10. Compile in Release Mode

Always set the build configuration to release mode for the website.

In this tip, we looked at some of the approaches that you can take to make optimized and better performing web sites. This included, reducing number of requests to the server, changes to the .NET framework, and compressing techniques.


About the Author

Jithin Geroge

United States United States