Hands-on Performance Testing and Analysis with WebPagetest Patrick Meenan [email_address] Twitter: @patmeenan
BRIEF OVERVIEW
How to get to it www.webpagetest.org
What does it do? <ul><ul><li>Tests performance of web pages* </li></ul></ul><ul><ul><li>From multiple physical locations i...
From Where?
LET’S GET TESTING
Basic Testing <ul><ul><li>Enter URL </li></ul></ul><ul><ul><li>Pick Location and Browser </li></ul></ul><ul><ul><li>Get re...
The “subjects” <ul><li>cnn.com  – 16.1 seconds </li></ul><ul><li>gasteroprod.com  – 3.4 seconds </li></ul><ul><li>lonelypl...
Video Capture <ul><ul><li>Enables video capture for individual tests </li></ul></ul><ul><ul><li>Allows you to capture vide...
Content Blocking <ul><ul><li>Block arbitrary content from loading (substring match on URI) </li></ul></ul><ul><ul><li>Make...
cnn.com <ul><li>Blocking Javascript Block String: “.js” </li></ul><ul><li>Load Time improved from 16.1s to 5.0s </li></ul>...
gasteroprod.com <ul><li>Blocking font download and javascript Block String: “.eot .js” </li></ul><ul><li>Load Time improve...
lonelyplanet.com <ul><li>Visual Comparison: http://www.webpagetest.org/video/compare.php?tests=110113_AR_8PDM-l:lonelyplan...
news.com <ul><li>Blocking Javascript Block String: “.js” </li></ul><ul><li>Load Time improved from 8.0s to 4.7s </li></ul>...
Scripting <ul><li>Automating Rich Applications </li></ul><ul><ul><li>Authenticating into form-protected applications </li>...
Amazon Product Search <ul><li>Go to amazon.com </li></ul><ul><li>Search for a product </li></ul><ul><li>Open the product p...
Javascript Profiling <ul><li>Integration with Dynatrace Ajax Edition </li></ul><ul><li>Special “Dynatrace” locations in Du...
Advanced Settings - Bulk Testing <ul><ul><li>Only available on private instances </li></ul></ul><ul><ul><li>Allows for upl...
HTTP API <ul><li>REST Interface for automating WebPagetest </li></ul><ul><li>http://www.webperformancecentral.com/wiki/Web...
Coming Soon(ish) <ul><li>Chrome </li></ul><ul><li>Firefox </li></ul><ul><li>Android </li></ul><ul><li>Above-the-fold measu...
Upcoming SlideShare
Loading in …5
×

Hands on performance testing and analysis with web pagetest

4,731 views

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • <br /><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/8fGLbsCm1c0?fs=1&amp;hl=en_US&amp;rel=0" width="350" height="288"><param name="movie" value="http://www.youtube.com/v/8fGLbsCm1c0?fs=1&amp;hl=en_US&amp;rel=0"></param><embed src="http://www.youtube.com/v/8fGLbsCm1c0?fs=1&amp;hl=en_US&amp;rel=0" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,731
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
63
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Hands on performance testing and analysis with web pagetest

  1. 1. Hands-on Performance Testing and Analysis with WebPagetest Patrick Meenan [email_address] Twitter: @patmeenan
  2. 2. BRIEF OVERVIEW
  3. 3. How to get to it www.webpagetest.org
  4. 4. What does it do? <ul><ul><li>Tests performance of web pages* </li></ul></ul><ul><ul><li>From multiple physical locations in the world </li></ul></ul><ul><ul><li>With realistic and configurable end-user connectivity </li></ul></ul><ul><ul><li>Low barrier to entry </li></ul></ul><ul><ul><li>Provides lots of ways to consume the results </li></ul></ul><ul><ul><li>Targeted at developers of all skill levels </li></ul></ul><ul><ul><ul><li>Or site owners who need to go beat on their developers </li></ul></ul></ul>* Richer applications can also be tested
  5. 5. From Where?
  6. 6. LET’S GET TESTING
  7. 7. Basic Testing <ul><ul><li>Enter URL </li></ul></ul><ul><ul><li>Pick Location and Browser </li></ul></ul><ul><ul><li>Get results </li></ul></ul>Key Optimizations Page Speed Score Download Raw Data Basic Stats  (times, bytes,  requests) Screen Shots Waterfall
  8. 8. The “subjects” <ul><li>cnn.com – 16.1 seconds </li></ul><ul><li>gasteroprod.com – 3.4 seconds </li></ul><ul><li>lonelyplanet.com – 11.3 seconds </li></ul><ul><li>news.com – 7.9 seconds </li></ul>
  9. 9. Video Capture <ul><ul><li>Enables video capture for individual tests </li></ul></ul><ul><ul><li>Allows you to capture video (for later comparison or viewing) with arbitrary test configurations </li></ul></ul>
  10. 10. Content Blocking <ul><ul><li>Block arbitrary content from loading (substring match on URI) </li></ul></ul><ul><ul><li>Makes it easy to do what-if testing on production pages </li></ul></ul><ul><ul><ul><li>How does the page load without ads? </li></ul></ul></ul><ul><ul><ul><li>How does the page load without the facebook widget? </li></ul></ul></ul><ul><ul><ul><li>How does the page load without any of the javascript? </li></ul></ul></ul>
  11. 11. cnn.com <ul><li>Blocking Javascript Block String: “.js” </li></ul><ul><li>Load Time improved from 16.1s to 5.0s </li></ul><ul><li>Start Render went from 6.4s to 1.4s </li></ul><ul><li>Visual Comparison: http://www.webpagetest.org/video/compare.php?tests=110110_EM_88ZA-l:cnn.com,110110_FQ_88ZR-l:No+JS </li></ul><ul><li>Video: http://www.webpagetest.org/video/view.php?id=110110_7e5077007b839b84fe42264039baaffdc5ba3ba9 </li></ul>
  12. 12. gasteroprod.com <ul><li>Blocking font download and javascript Block String: “.eot .js” </li></ul><ul><li>Load Time improved from 3.4s to 2.7s </li></ul><ul><li>Start Render went from 2.1s to 1.3s </li></ul><ul><li>Visual Comparison: http://www.webpagetest.org/video/compare.php?tests=110113_AD_8PD5-l:gasteroprod.com,110113_3W_8PH2-l:No+Javascript/Font </li></ul><ul><li>Video: http://www.webpagetest.org/video/view.php?id=110113_bde569bd9502592f9cba0a0313a8fe379faa2226 </li></ul>
  13. 13. lonelyplanet.com <ul><li>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 </li></ul><ul><li>Video: http://www.webpagetest.org/video/view.php?id=110113_4dee5a36f3c9470e86f1361f95a4a591db712631 </li></ul>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
  14. 14. news.com <ul><li>Blocking Javascript Block String: “.js” </li></ul><ul><li>Load Time improved from 8.0s to 4.7s </li></ul><ul><li>Start Render went from 2.2s to 1.3s </li></ul><ul><li>Visual Comparison: http://www.webpagetest.org/video/compare.php?tests=110112_D9_8H4K-l:news.com,110112_K4_8H58-l:No+Javascript </li></ul><ul><li>Video: http://www.webpagetest.org/video/view.php?id=110112_15bbe70cbeb6d269db37d8089e1f1d0d41ba2893 </li></ul>
  15. 15. Scripting <ul><li>Automating Rich Applications </li></ul><ul><ul><li>Authenticating into form-protected applications </li></ul></ul><ul><ul><li>Interacting with Web Apps (Mail, Calendar, etc) </li></ul></ul><ul><ul><li>Testing a navigation flow from one page to another </li></ul></ul><ul><ul><li>Execute arbitrary Javascript </li></ul></ul><ul><li>REALLY Advanced Options </li></ul><ul><ul><li>Re-writing DNS lookups (directing traffic to a test/staging box) </li></ul></ul><ul><ul><li>Overriding DNS server </li></ul></ul><ul><ul><li>Custom User-Agent strings </li></ul></ul><ul><ul><li>Pre-populating cookies </li></ul></ul><ul><ul><li>Wait for Javascript indicator </li></ul></ul>
  16. 16. Amazon Product Search <ul><li>Go to amazon.com </li></ul><ul><li>Search for a product </li></ul><ul><li>Open the product page </li></ul><ul><li>combineSteps </li></ul><ul><li>navigate www.amazon.com/ </li></ul><ul><li>navigate www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=even+faster+websites&x=21&y=28 </li></ul><ul><li>navigate www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=sr_1_1?ie=UTF8&s=books&qid=1295412495&sr=8-1 </li></ul><ul><li>http://www.webpagetest.org/result/110119_3Z_ECM/ </li></ul><ul><li>Filmstrip: http://www.webpagetest.org/video/compare.php?tests=110119_3Z_ECM </li></ul><ul><li>Video: http://www.webpagetest.org/video/view.php?id=110119_3Z_ECM.3.0 </li></ul>
  17. 17. Javascript Profiling <ul><li>Integration with Dynatrace Ajax Edition </li></ul><ul><li>Special “Dynatrace” locations in Dulles for IE7 and IE8 </li></ul><ul><li>AOL Autos: http://www.webpagetest.org/result/110112_MV_8J1R/ </li></ul>
  18. 18. Advanced Settings - Bulk Testing <ul><ul><li>Only available on private instances </li></ul></ul><ul><ul><li>Allows for uploading of multiple URLs and running the tests against all of them </li></ul></ul><ul><ul><ul><li>Configured settings will be used for all of the URLs (runs, blocking, etc) </li></ul></ul></ul><ul><ul><li>Results UI currently limited (links to individual test results) </li></ul></ul><ul><ul><ul><li>enhancements coming soon (download results of all tests) </li></ul></ul></ul>
  19. 19. HTTP API <ul><li>REST Interface for automating WebPagetest </li></ul><ul><li>http://www.webperformancecentral.com/wiki/WebPagetest/Automating_Pagetest </li></ul><ul><li>XML and JSON support (JSONP partially implemented) </li></ul><ul><li>Anything you do in the UI can be automated through the API </li></ul><ul><li>Tests submitted through the API will run at a lower priority than manually entered test </li></ul><ul><li>API Keys required for the public instance </li></ul><ul><li>Use Cases </li></ul><ul><li>One-off bulk testing </li></ul><ul><li>Recurring testing (WPTMon/Private Instances) </li></ul>
  20. 20. Coming Soon(ish) <ul><li>Chrome </li></ul><ul><li>Firefox </li></ul><ul><li>Android </li></ul><ul><li>Above-the-fold measurement </li></ul><ul><li>Diagnostics (tcpdump/traceroute) </li></ul><ul><li>Internationalized UI </li></ul>

×