Hands-on Performance Testing and Analysis with WebPagetest

Patrick Meenanpmeenan@webpagetest.org

Twitter: @patmeenan

BRIEF OVERVIEW

How to get to it

www.webpagetest.org

What does it do?

• Tests performance of web pages*• From multiple physical locations in the world• With realistic and configurable end-user connectivity• Low barrier to entry• Provides lots of ways to consume the results• Targeted at developers of all skill levels

o Or site owners who need to go beat on their developers

* Richer applications can also be tested

From Where?

LET’S GET TESTING

Basic Testing• Enter URL• Pick Location and Browser• Get results

Key Optimizations

Page Speed Score

Download Raw Data

Basic Stats (times, bytes, 

requests)

Screen Shots

Waterfall

The “subjects”

• cnn.com – 16.1 seconds• gasteroprod.com – 3.4 seconds• lonelyplanet.com – 11.3 seconds• news.com – 7.9 seconds

Video Capture

• Enables video capture for individual tests

• Allows you to capture video (for later comparison or viewing) with arbitrary test configurations

Content Blocking

• Block arbitrary content from loading (substring match on URI)

• Makes it easy to do what-if testing on production pageso How does the page load without ads?o How does the page load without the facebook widget?o How does the page load without any of the javascript?

cnn.com

• Blocking JavascriptBlock String: “.js”

• Load Time improved from 16.1s to 5.0s• Start Render went from 6.4s to 1.4s• Visual Comparison:

http://www.webpagetest.org/video/compare.php?tests=110110_EM_88ZA-l:cnn.com,110110_FQ_88ZR-l:No+JS

• Video: http://www.webpagetest.org/video/view.php?id=110110_7e5077007b839b84fe42264039baaffdc5ba3ba9

gasteroprod.com

• Blocking font download and javascriptBlock String: “.eot .js”

• Load Time improved from 3.4s to 2.7s• Start Render went from 2.1s to 1.3s• Visual Comparison:

http://www.webpagetest.org/video/compare.php?tests=110113_AD_8PD5-l:gasteroprod.com,110113_3W_8PH2-l:No+Javascript/Font

• Video:http://www.webpagetest.org/video/view.php?id=110113_bde569bd9502592f9cba0a0313a8fe379faa2226

lonelyplanet.com

• Visual Comparison:http://www.webpagetest.org/video/compare.php?tests=110113_AR_8PDM-l:lonelyplanet.com,110113_GM_8PGR-l:No+redirect/auth,110113_AS_8PT5-l:No+redirect/auth/js,110113_7Z_8PYB-l:No+redirect/auth/js/ads

• Video:http://www.webpagetest.org/video/view.php?id=110113_4dee5a36f3c9470e86f1361f95a4a591db712631

Start Render Load Time

Lonelyplanet.com 3.6s 11.4s

Block redirect/auth check

1.9s 8.1s

Block redirect/auth/js 1.2s 6.0s

Block redirect/auth/js/ads

1.1s 4.9s

news.com

• Blocking JavascriptBlock String: “.js”

• Load Time improved from 8.0s to 4.7s• Start Render went from 2.2s to 1.3s• Visual Comparison:

http://www.webpagetest.org/video/compare.php?tests=110112_D9_8H4K-l:news.com,110112_K4_8H58-l:No+Javascript

• Video:http://www.webpagetest.org/video/view.php?id=110112_15bbe70cbeb6d269db37d8089e1f1d0d41ba2893

Scripting

Automating Rich Applications

• Authenticating into form-protected applications• Interacting with Web Apps (Mail, Calendar, etc)• Testing a navigation flow from one page to another• Execute arbitrary Javascript

REALLY Advanced Options

• Re-writing DNS lookups (directing traffic to a test/staging box)• Overriding DNS server• Custom User-Agent strings• Pre-populating cookies• Wait for Javascript indicator

Amazon Product Search

• Go to amazon.com• Search for a product• Open the product page

combineStepsnavigate www.amazon.com/navigate www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=even+faster+websites&x=21&y=28navigate www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=sr_1_1?ie=UTF8&s=books&qid=1295412495&sr=8-1

• http://www.webpagetest.org/result/110119_3Z_ECM/• Filmstrip:

http://www.webpagetest.org/video/compare.php?tests=110119_3Z_ECM

• Video:http://www.webpagetest.org/video/view.php?id=110119_3Z_ECM.3.0

Javascript Profiling

• Integration with Dynatrace Ajax Edition

• Special “Dynatrace” locations in Dulles for IE7 and IE8

• AOL Autos: http://www.webpagetest.org/result/110112_MV_8J1R/

Advanced Settings - Bulk Testing

• Only available on private instances

• Allows for uploading of multiple URLs and running the tests against all of themo Configured settings will be used for all of the URLs (runs, blocking, etc)

• Results UI currently limited (links to individual test results)o enhancements coming soon (download results of all tests)

HTTP APIREST Interface for automating WebPagetest• http://www.webperformancecentral.com/wiki/WebPagetest/Automating_Pagetest• XML and JSON support (JSONP partially implemented)• Anything you do in the UI can be automated through the API• Tests submitted through the API will run at a lower priority than

manually entered test• API Keys required for the public instance

Use Cases• One-off bulk testing• Recurring testing (WPTMon/Private Instances)

Coming Soon(ish)

• Chrome• Firefox• Android• Above-the-fold measurement• Diagnostics (tcpdump/traceroute)• Internationalized UI