Performance testing HTML5 Web Apps

One of the main issues with HTML5 and other sites that have a copious use of Javascript is that with sloppy programming, site performance could suffer.  This is especially so with the HTML5 canvas and offline storage APIs.

One way to perform such kind of performance testing is to use a simple iOS WebView app to load the pages and use the Instruments toolset (that comes with Xcode) to measure memory and response/load time.

Installing Instruments (comes with Xcode)

See for steps on installing Xcode. Once done, use Spotlight (ie. the “magnifying glass” icon on the top right hand corner of your Mac) to search for “Instruments”. Once activated, your screen should look like this:

Instruments screen

Instruments screen

Download and customize the WebView app

  1. Download the zip file from
  2. Unzip it
  3. Open the xcodeproj from Xcode
  4. The app was initially written for iOS 2.x so you’ll need to set the correct SDK version.
  5. To do this – Project->Edit Active Target “WebBrowserTutorial”. Base SDK – set to the latest eg. iOS 4.3
  6. On the “Simulator – 4.3 | Debug” tab on the top left hand corner of Xcode, set it to Simulator and iPhone Simulator
  7. Under “Classes” look for WebBrowserTutorialAppDelegate.m and the applicationDidFinishLaunching method
  8. Change the url to your desired URL
  9. Build & Run
iOS Simulator running the WebView app
iOS Simulator running the WebView app

Using Instruments to Perform Performance Testing

  1. Activate Instruments
  2. Under “iOS”, choose “Allocations” to see how memory is being allocated to the app, “Time Profiler” to see time used by various method calls, “Activity Monitor” to see system activity.
  3. Next select the target app by clicking on the “Target” drop down list on the top left hand of the Instruments screen. Then choose the target app. The target app is a .app file that resides in the “build” directory of the folder you unzipped it in. Check the build settings in Xcode to locate the app file. You may also need to change the settings to generate the app file.
  4. Click the record button ie. the one with the big red dot.
  5. You can then see the results displayed on the Instruments dashboard.
The Apple documentation for Instruments can be found here.

Leave a comment

Filed under Mobile Web, Performance Testing, QA, Testing, Useful tips

Leave a Reply

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

You are commenting using your 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