Monday, August 3, 2009

Tips to Improve Your Web Site Performance

There are two types of performance:

  • Server Performance
  • Perceived Performance

Server Performance is associated with the number requests that a server can handle at a time and the time needed to process these requests. On high volume websites, since it determines the number of users a machine can serve before additional server is needed, this performance aspect is very important.

Perceived Performance is the speed of websites in visitors’ perspective. Even if the server performance is high, a site may appear slow to a visitor because of slow client-side performance.

This article focuses perceived performance tuning by supplying reasons for poor client-side performance and details out how we can achieve better client-side performance.

#1. Make Fewer HTTP Requests

A dedicated team focused on quantifying and improving the performance of Yahoo! Products worldwide conducted experiments to learn more about optimizing web page performance. They discovered that popular sites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to get components in the HTML document.

Each bar represents a specific component requested by the browser - Only 10% of 2.4 seconds is spent for downloading the html of

Since browsers only are able to download two components on parallel per hostname, and every HTTP request has an average round-trip latency of 0.2 seconds, that causes a 2 second latency alone, if the site is loading 20 items, regardless of whether they are style sheets, images or scripts. (on an average broadband connection with a browser capable of downloading two components at a time).

Since browsers spend approximately 80% of t he tim e fetching external components such as scripts, style sheets and images. Reducing the number of HTTP requests has the biggest impact on improving website performance. Moreover, it is the easiest way to make a performance improvement.

#2. Enforce Caching

If you examine the preferences dialog of any modern

Web browser (like Internet Explorer, Safari or Mozilla), you’ll probably notice a cache setting. This lets you set a section of your computer’s ha

rd disk to store copies of web pages, images

and media for faster browsing.

This cache is especially useful when users hit the back button or click a link to see a page they’ve just looked at. Also, if navigation im ages throughout a site are the same, they’ll be served from browser's cache.

Web caching is useful for three important reasons:

  • Reduce user-perceived Web-site delays,
  • Reduce network bandwidth usage,
  • Reduce server loads.
The Yahoo! Performance Team conducted another experiment to understand the difference between an empty cache (browser requests all the components to load the page) and full cache (most of the components are found in the disk to load the page and the HTTP requests corresponding to these components are avoided).

Loading with an empty cache took 2.4 while loading with a full cache took 0.9 seconds. The full cache page view had 90% fewer HTTP requests and 83% fewer bytes to download than the empty cache page view.

#3. Use HTTP Compression

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by making fewer http requests. On the other hand, the end-user's bandwidth speed, Internet service providers are beyond the control of the development team. However compression reduces response times by reducing the size of the HTTP response.

In the case of HTTP compression, a standard gzip or deflate encoding method is applied to the payload of an HTTP response, significantly compressing the resource before it is transported across the web.

HTTP Compression is implemented on the server side as module which applies gzip algorithm to responses as the server sends them out. Any text based content such as static HTML content, style sheets, JavaScript. It is usually possible to cache the static content in order to avoid repeatedly compressing the same file. On the other hand, dynamic content such as .asp, .aspx, .php files must be recompressed before served. This means that there is trade off to be considered between processor utilization and payload reduction.

If the primary goal is bandwidth savings, the strategy should be to compress all text-based output. Ideally, this should include static text files (such as HTML and CSS) and files that produce output in text media MIME types (such as ASP and ASP.NET files), as well as files that are text based but of another media type (such as external JavaScript files).

#4. Increase the Number of Parallel Requests

As I mentioned earlier, browsers are able to download two or four components on parallel per hostname. So we may increase the number of parallel downloads by using additional aliases such as According to the results of experiments conducted by Yahoo! Performance Team, using too many hostnames increases the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which affects the performance negatively. The Performance Team mentioned a strong balance between the number of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. For higher number of hostnames, you may negatively affect the performance.

#5. Place StyleSheets into the Header

Web developers that care about performance want browser to load whatever content it has as soon as possible. This fact is especially important for pages with a lot of content and for users with slow Internet connections. When the browser loads the page progressively the header, the logo, the navigation components serve as visual feedback for the user.

When we place style sheets near the bottom part of the html, most browsers stop rendering to avoid redrawing elements of the page if their styles change.

#6. Put Scripts to the end of Document

Unlike StyleSheets, it is better to place scripts to the end of the document. Progressive rendering is blocked until all StyleSheets have been downloaded. Scripts cause progressive rendering to stop for all content below the script until it is fully loaded. Moreover, while downloading a script, browser does not start any other component downloads, even on different hostnames.

#7. Make JavaScript and CSS External

Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. Inline JavaScript and CSS increases the HTML document size but reduces the number of HTTP requests. With cached external files, the size of the HTML is kept small without increasing the number of HTTP requests.
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments : on " Tips to Improve Your Web Site Performance "