>
 





A lot of articles have been written on website performance optimization lately but I want to share my hands-on-experience and important articles on the subject.

There are two types of 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
Each bar represents a specific component requested by the browser - Only 10% of 2.4 seconds is spent for downloading the html of Yahoo.com

 

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 the time 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.

UPDATE How To: Minimize HTTP Requests – The Most Important Guideline for Improving Web Site Performance article focuses on ways of minimizing HTTP Requests to maximize web site performance.

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 hard 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 images throughout a site are the same, they’ll be served from browser's cache.

Internet Explorer Cache Settings
Internet Explorer Cache Settings

 

Web caching is useful for three important reasons:

 

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 Yahoo.com with full cache
Loading Yahoo.com with full cache

 

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).

Bloggingdeveloper.com utilizes gzip compression. 74% bandwidth is saved by compression.
Bloggingdeveloper.com utilizes gzip compression. 74% bandwidth is saved by compression.

 

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 images.bloggingdeveloper.com. 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.

Additional Reading

Browser Cache Usage – Exposed! by Tenni Theurer
What the 80/20 Rule Tells Us about Reducing HTTP Requests – by Tenni Theurer
Maximizing Parallel Downloads in the Carpool Lane - by Tenni Theurer

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 5.0 by 6 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Comments

April 30. 2008 17:43

I can't believe no one has commented on this yet. It's a great list with some very good tips on managing out of code performance. Thanks! I'm book marking it and saving the link in my utility class file!

Joe | Reply

February 3. 2009 21:55

i cant got it

yasmin | Reply

September 14. 2009 17:23

thanks Joe

Blogging Developer | Reply

September 26. 2009 11:58

This is very nice tips to Improving web sites performance.Before now i don't know about this tips how to improve web site performance u teach me nice steps to improve my site.

Design Yahoo store | Reply

September 26. 2009 12:04

This is very nice tips to improving web sites performance.Before now i don't know about this steps to improve web sites performance i like your steps that how to improve your web sites performance this is very nice.

Design Yahoo store | Reply

October 9. 2009 11:42

nice tips. thanks

Izdelava Spletnih Strani | Reply

October 23. 2009 20:42

Hey cool and an informative post. Must read for everyone!

Saksham | Reply

November 6. 2009 10:32

Nothing more to say ... just perfect

cash advance | Reply

November 6. 2009 10:40

This is one of the most fabulous posts.I will Share it with my friends.

ugg outlet--cove,metalic,knit... | Reply

December 9. 2009 17:25

Great blog, i love it!  Thanks for the helpful tips.

cash advance | Reply

December 26. 2009 19:23

Interesting ... as always - is your blog making any cash advance ? ;)

cash loans | Reply

December 30. 2009 04:14

Hi, Thanks for this great information.

Improve Website Performance | Reply

Add comment




(Will not be displayed!)