1.
Measuring Web Performance Patrick Meenan pmeenan@webpagetest.org @patmeenan

2.
Types of Measurement velocityconf.com/velocity2011/public/schedule/detail/18039

3.
Measuring Web PerformanceSYNTHETIC TESTING

4.
Active Testing• Consistent results – Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring• Lots of detail• Availability monitoring• Not representative of actual end-user performance – Usually tested from data centers – Sometimes co-located with CDN provider equipment

5.
Bandwidth/Latency Impact(Fixed 60ms RTT) (Fixed 5Mbps Bandwidth) 5 www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

6.
US Broadband Latency WebPagetest DSL WebPagetest Cable WebPagetest FIOS Backbone 6www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

7.
Actual UsersBackboneTesting 7

8.
DSL – Back-End: 17% Backbone – Back-End: 52% 8

9.
Mac Traffic Shaping OS X Lion + Xcode 4.1 Cable, DSL, 3G, Edge, WiFi and Custom GUI for dummynet (which has been available for a while)osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/

10.
Synthetic Browsers• Know HOW your active testing is done – Some only test the base page – Synthetic browsers usually not reflective of real browser – Real browser testing – Connectivity (backbone, last-mile)• www.engadget.com – Synthetic Browser: 447 requests – IE 8: 241 requests

11.
Measuring Web PerformanceREAL USER MONITORING (RUM)

12.
Real User Monitoring (RUM)• Full coverage on all pages visited by users• Real performance information for end-user experience• No availability monitoring• No competitive reference• Limited detail – … but getting better

13.
Navigation Timingwindow.performance.timing IE 9+ Chrome Firefox 9+ Android 4+ Front-End Back-End 13 dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

14.
Resource Timing (draft) Timing for every network-loaded resource w3c-test.org/webperf/specs/ResourceTiming/

15.
Back-End Only

16.
Access Logs• Overall Response Times - %D (Apache)• Custom variables (app-specific timings)• Logster + graphite = graphs• Lots of data-mining opportunities – Broken links/content (404’s with useful referer information)• Mike Brittain (Etsy) Presentation – http://www.slideshare.net/mikebrittain/web-performance-culture- and-tools-at-etsy-11159635

17.
Measuring Web PerformanceTHE METRICS

18.
When is “Done”?Easy answer is onLoad But…

19.
When is “Done”?Twitter onLoad (2.4s) Twitter end of activity (8.2s)

20.
2 Pages, Identical Performance …

21.
http://youtu.be/Ipk1k_IobYg

22.
Start Render Identical

23.
Load TimeIdentical

24.
Last Visual Change Identical

25.
Visual “Completeness”

26.
Measuring Web PerformanceINTRODUCING…

27.
The Speed IndexThe user experience of A was 7.4 times faster than B sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

28.
Amazon.com vs. Twitter …

29.
Amazon vs. Twitter Amazon Twitter Speed Index 1501 6014 (+300%) onload 2.4 2.4 Fully Loaded 6.4 8.2 (+28%)www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1

30.
Measuring Web PerformanceWHAT’S NEW IN WEBPAGETEST

31.
New Waterfall UI Nav Timing – domContentLoaded (Firefox/Chrome) Nav Timing – load event (Firefox/Chrome) Pop-up request details

32.
Dependencies (Chrome)Line of code thatTriggered request

33.
Response Bodies

34.
Dev Tools Timeline (Chrome)

35.
Dev Tools Timeline (Chrome)

36.
Creating Videos

37.
Creating Videos (cont)Customize:- End Point/Times- Specific Run- First/Repeat View- Labels www.webpagetest.org/video/compare.php?tests=120416_QX_3ZKFP%2C120416_DR_3ZKFJ&bare=1

38.
SPOF Demonstratingwww.webpagetest.org/video/view.php?id=120416_d635d742a17d7eecf57df6282bcea87f5de2322c&bare=1

39.
Custom viewport size Chrome/Firefox

40.
EC2 AMIsIE 7 m1.small orIE 8 c1.mediumIE 9, Chrome, Firefox (single image)

41.
News/Updates• Twitter: @patmeenan• Google+ PatMeenan@gmail.com WebPagetest• WebPagetest Forums http://www.webpagetest.org/forums/