Safari (or Webkit) has a neat debugging feature built in. It is available in both OS X and Windows versions. When testing performance of websites through application inspection on firewalls or load balancer it can be a useful tool to get visibility.
Step 1 – Open Safari (I recommend 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 toolbar “Develop”. See below:
Close the preferences windows.
Step 2 – open the web page that you want to analyse in the usual way. I recommend http://etherealmind.com 🙂
Step 3 – Open the Develop menu, select “Disable Caches” (since local caching in the browser will interfere with accurate testing), and then select “Show Web Inspector”
This will open the Web Inspector is a separate Windows (if it is blank, you didn’t open a web page after enabling the Developers menu). It should look something like this:
In the bottom left hand corner, you will see square with a dark line at the bottom. Clicking this will anchor the Network timeline inside the web page:
By hovering over a single element you can see how long it took for your web server to establish the connection. In the picture below, it took 10.07s for the first connection (far too long) and 612 milliseconds to complete the HTTP request.
Selecting the element will show the contents of the request, and you can also look at the HTTP Header.
Some things that you should look for
Check the size of the TOTAL download and the check the different elements 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 elements as listed and make sure they are what you are expecting. Sometimes websites call external elements that are broken and can slow down the performance.
Check the latency of the connection request and the response. If the latency is high, think about whether that is packet delay or the firewall/load balancer causing that delay.