Performance Testing – How to measure and optimize PageLoad

Performance Testing – PageLoad Time.

With every business wanting to make their presence felt on the web, it is a rush for having an application on the web. It could include simple one page applications, complex applications, applications to reap in users and thereby profits, applications rich in embedded images and so on.

With so many applications on the Net, it is equally important to have them optimized and efficient. Every user logs onto the net, hoping to spend less time with maximum and fruitful search yields. It is therefore essential that your website, web application, webpage loads within a realistic time period. This will enable the user to stay onto your site and know more about your products and services.

How do we test this feature of efficient page loads?

There are number of methods one could apply for measuring and optimizing page loads. The best tool out there is the AOL Page Test.

Invoking AOL Page Test
Invoking AOL Page Test

You can lay your hands on the online page test site which is referenced by http://www.webpagetest.org/test

or

You can download the installer for Page Test onto your machine and carry out the test.

How do we conduct the test?

While conducting a test for page load, we need to identify and record for the following scenarios.

– Empty cache test
– Primed cache test

Empty Cache:
In the empty cache situation, you try and simulate the loading of the page as if for the first time. This will necessiate the deletion of cookies, files that are related to the webpage.

You can do it by manually removing these contents or by loading a webpage using CTRL + F5.

Primed cache:
In the primed cache scenario, only those objects not cached will be displayed in the test results. As is evident, the primed cache time will be much less than the empty cache time.

A comparison of these features will enable you to know the working of your website, web application, webpage in the Empty cache and primed cache scenarios.

Example.

Let’s take an example featuring the Yahoo home page.

Steps : If you are using the installed version of AOL Page Test
1) The user opens a browser
2) The user activates the Page test. This action will invoke a separate window
3) Return back to the previous browser window and type in the URL.
Steps : If you are using the online Page Test
1) Go to http://www.webpagetest.org/test
2) Type in the URL for the webpage you want to test.

How to interpret the results?

On measuring the page load, you will land up with a chart like this. It indicates the different objects available on the webpage and the loading time for each.

Error prone objects will be show with a RED highlighting bar for that object.

Figure show above shows the empty cache scenario for in.yahoo.com.

Empty cache scenario - Performance Testing
Empty cache scenario - Performance Testing

Figure shows the primed cache scenario for in.yahoo.com

Primed cache scenario - Performance Testing
Primed cache scenario - Performance Testing

Additional details for performance can be had from the Checklist tab and the Load Details tab.

Optimization Checklist

The checklist report shows the various objects within the webpage and extent of optimization carried out against each of these objects. A reference to the yahoo performance rules will give you an idea about the optimization parameters for webpages. Do refer to it at http://developer.yahoo.com/performance/rules.html

Checklist Report - AOL Page Test Performance
Checklist Report - AOL Page Test Performance

Load Details Report

A typical load details report shows the following.

Page load time: 0.903 seconds
Time to first byte: 0.175 seconds
Time to Base Page Downloaded: 0.179 seconds
Time to Start Render: 0.002 seconds
Time to Document Complete: 0.000 seconds
Time to Fully Loaded: 0.903 seconds
Bytes sent out: 3.563 KB
Bytes received: 3.772 KB
DNS Lookups: 2
Connections: 4
Requests: 4
OK Requests:  4
Redirects:    0
Not Modified: 0
Not Found:    0
Other:        0
Base Page Response: 200

You will get details on
Time to first byte : Time required to access the first byte of data from the web page/ web site.
Time to download Base Page : Indicated with the green line. Time required to download the basic page content which the user can view immediately.
Time to fully download the document : Time required to download the entire page indicated by the time for the last object included.
Bytes transferred : Shows the bytest sent and bytes received. A large number indicates bottlenecks that may arise on slower networks.
Page response : Shows the page response indicating success or failure of the page (1xx, 2xx, 3xx, 4xx and 5xx features).

Other useful tools to measure page loads

– ySlow (addon to FireFox)
– Fiddler (Microsoft Corporations Tool for web debugger and performance. Go to http://www.fiddler2.com/fiddler).

– HTTP Analyzer (Evaluation tool is available on the net. http://www.ieinspector.com/httpanalyzer/)

Advertisements

4 thoughts on “Performance Testing – How to measure and optimize PageLoad”

  1. Hi Abhi,

    This is Pravin Mulay [Pravin Saheb]. Great to see ur development like this. We all, our batchmates miss u. Please respond to this mail ASAP.

    Pravin Mulay
    Department of English
    BYK College of Commerce,
    Nashik

    Like

  2. My partner and I stumbled over here from a different page and thought I might as well check things
    out. I like what I see so now i’m following you. Look forward to looking into your web page for a second time.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s