Wednesday, March 17, 2010

OS X:Using Web Kit for HTTP, Website Analysis and Network Testing

November 20, 2008 by Greg Ferro · Leave a Comment 

Safari (or Webkit) has a neat debug­ging fea­ture built in. It is avail­able in both OS X and Windows ver­sions. When test­ing per­form­ance of web­sites through applic­a­tion inspec­tion on fire­walls or load bal­an­cer it can be a use­ful tool to get vis­ib­il­ity.
Step 1 — Open Safari (I recom­mend you use Webkit) and then open the Preferences Menu, Choose Advanced and tick the “Show Develop Menu in the menu bar”. Now you will see an extra Menu option in the tool­bar “Develop”. See below:

webkit-analysis-5.jpg

Close the pref­er­ences windows.

Step 2 — open the web page that you want to ana­lyse in the usual way. I recom­mend http://​eth​er​e​al​mind​.com :-)

Step 3 — Open the Develop menu, select “Disable Caches” (since local cach­ing in the browser will inter­fere with accur­ate test­ing), and then select “Show Web Inspector”

webkit-analysis-6.jpg

This will open the Web Inspector is a sep­ar­ate Windows (if it is blank, you didn’t open a web page after enabling the Developers menu). It should look some­thing like this:

webkit-analysis-7.jpg

In the bot­tom left hand corner, you will see square with a dark line at the bot­tom. Clicking this will anchor the Network timeline inside the web page:

webkit-analysis-3.jpg

Evaluating per­form­ance

By hov­er­ing over a single ele­ment you can see how long it took for your web server to estab­lish the con­nec­tion. In the pic­ture below, it took 10.07s for the first con­nec­tion (far too long) and 612 mil­li­seconds to com­plete the HTTP request.

webkit-analysis-8.jpg

Selecting the ele­ment will show the con­tents of the request, and you can also look at the HTTP Header.

webkit-analysis-9.jpg

Some things that you should look for

Check the size of the TOTAL down­load and the check the dif­fer­ent ele­ments for size.. Sometimes developers use the wrong image and you can see a multi-​​megabit image that takes tens of seconds to download.

Check the ele­ments as lis­ted and make sure they are what you are expect­ing. Sometimes web­sites call external ele­ments that are broken and can slow down the performance.

Check the latency of the con­nec­tion request and the response. If the latency is high, think about whether that is packet delay or the firewall/​load bal­an­cer caus­ing that delay.

Please rate this post:

  Why Rate Posts?
1 Star - It\\\'s Crud2 Stars - It\\\'s Tosh3 Stars - Something\\\'s missing4 Stars - Needs works5 Stars - Good Enough6 Stars - Good7 Stars - Excellent8 Stars - Brilliant9 Stars - Astonishing10 Stars - Awesomely Godlike? (No Ratings Yet)
Loading ... Loading ...

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!