"The Art and Science of Web Performance" invited guest lecture at CMU 08/02/2012

1. The Art and Science of
Web Performance
Daniel Austin
Technical Staff
Paypal, Inc.
CMU Invited Lecture
August 02 , 2012 daaustin@paypal.com
V1.1 @daniel_b_austin

2. TODAY’S PROGRAM
Overture: Web Performance As Art And
Science
First the Theory…
…Then the Practice
Coda: Making the Web Faster and Smarter
Confidential and Proprietary 8/2/2012

3. STATE OF THE ART?
• An Art and a Science
• Very Little Prior Art
• Users Suffer –
• The World Wide Wait isn’t over yet!
• Rapid Change in the Industry
• Browsers
• Devices
• Standards
• The Rest of the World is Catching Up
• Challenges of Global/Local/Mobile/Social
Performance
Confidential and Proprietary 8/2/2012

4. PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
(It’s not latency, it’s not bandwidth, it’s not queue
residence time or queue length or any such thing.)
Confidential and Proprietary 8/2/2012

5. Who needs
‘Performance’
measurements
anyway?
?
Confidential and Proprietary

6. A MORE RATIONAL APPROACH?
Confidential and Proprietary

7. DIMENSIONS OF PERFORMANCE
• Geography/Network location
• Bandwidth/Transport Type
• Browser/Device Type
• RT Varies by as much as 50%
• Page Composition
• Client-side rendering and execution
effects (JS, CSS)
• Network Transport Effects
• # of Connections, CDN Use
Confidential and Proprietary 8/2/2012

8. THE MPPC MODEL OF WEB PERFORMANCE
“Multiple Parallel Persistent Connections”
Request DNS/Network
Initiation by HTTP Request Resolution HTTP Request
User t1
This entire cycle, steps 1-4, is repeated once for each external
Page
reference on the page, so for a given page the total time is: Composition
S T = S Dt1 + Dt2 + Dt3 + Dt4 t2
n+1 n+1
End User Where n is the number of external page requisites.
Payload
Browser HTTP Response Delivery Time HTTP Response
Rendering Time t3
t4
T1 T2 T3 T4
Connection Time Server Duration Transport Time Render Time
Confidential and Proprietary 8/2/2012

9. HTTP CONNECTION FLOW
Client Server
Connection setup (t1)
Handshake time
Request transmission
Client’s perceived time
response time Request (t2) Estimated server
processing time
Response transmission
Response (t3)
time
The more HTTP requests & network roundtrips you require, the slower
your site will be: Images, CSS, JS, DNS lookups, Redirects, #of
packets
Confidential and Proprietary 8/2/2012

10. T1 – MAKING THE CONNECTION
1= DNS + TCP+ SSL
Confidential and Proprietary 8/2/2012

11. T2 – THE SERVER DURATION
• Let ( ) r
• U = ( r)[ r
W]
• X =U*
• Navg =
( r [W( r)W+1 -
(W+1)( r)W+1]
• … so 2 = Navg/X
(The response
time law)
Never mind - it’s a constant!
Confidential and Proprietary 8/2/2012

12. T3 – TCP TRANSPORT TIME
Single Object:
3 = Sz/R+2RTT+ idle
For persistent parallel connections:
3 = (M+1)Si/Ri+[M/kNh]*3 RTTi+ idle
… for 1 base HTML page with M objects, with Si
bits, at bandwidth Ri, k connections per
host, and Nh unique hostnames
Confidential and Proprietary 8/2/2012

13. T4 – WHAT THE BROWSER DOES
Confidential and Proprietary 8/2/2012

14. BANDWIDTH EFFICIENCY
Bmax = 1.22*(L)^1/2 * MSS/RTT
Confidential and Proprietary 8/2/2012

15. WHERE ARE THE DELAYS?
Confidential and Proprietary 8/2/2012

16. LET’S TALK TOOLS
Site Performance Services Page Analysis Tools
– Gomez – YSlow
– Keynote – MS Virtual RoundTrip
– WebPagestest.Org Analyzer,
• ‘Wholesale’ Testing HTTPWatch, Many
Others
– Statistical data for many
page views under different – F12 in your browser
conditions • ‘Retail’ Testing
– Operational testing – One Page or App
– Best for understanding – Diagnostic
global and network effects – Best for functional
testing
Confidential and Proprietary

17. COMMERCIAL TESTING SERVICES
• Gomez, AlertSite, and Keynote toolsets are similar in many
ways
• Synthetic Test Setup
• Test nodes in large datacenters and/or end user’s machines
• Statistical data about response times
• You can do this for yourself on a smaller scale at
WebPageTest.org
Confidential and Proprietary 8/2/2012

18. HAPPY BIRTHDAY, YSLOW!
Methodology
– DOM Crawler and Packet
Sniffer
– More accurate
– Analyzes components
– Stats view
Implements the 14 18 22 105
YSlow Rules
– All browsers except IE
– Mobile bookmarklet
– Best tool for page analysis
Confidential and Proprietary

19. TESTING YOUR COMPETITORS FOR FUN &
PROFIT
• Try to measure task sequences not pages
• Be prepared for lots of breakage
• Be respectful
• Difficult and time-consuming
Confidential and Proprietary 8/2/2012

20. TASK-BASED PERFORMANCE THINKING
Welcome 1400
Inbox 2200
Inbox Bulk 3200
(B) …
61.77%
P(A,B) = 0.5168
Read
10.04% 66.25% Message
(D) Verify
(F)
34.52%
Welcome 9.85% Bulk
(A) (C) 58.07%
64.53%
22.30% 34.38%
35.02%
Send
Compose28.04%
Confirm
(E)
(G)
Confidential and Proprietary 8/2/2012

21. GLOBAL PERFORMANCE TESTING (BRIEFLY)
• Cannot compare performance data out-of-region
• There are many global factors involved in
performance:
• Bandwidth
• ISP
• Infrastructure
• Secular cycles (weeks, holidays, usage patterns)
• The best approach: use the relative ‘StormCat’
system
• Best case (Northern California high broadband @3 AM)
• Worst Case (rural Indonesia on VSNL @ 2PM local)
• Divide the range into 5 categories equally spaced
between the best & worst: some locales will be in Cat I,
some in Cat II, some in Cat III, etc.
Confidential and Proprietary 8/2/2012

22. BAKE IT IN UP FRONT
Performance Engineering is a
design-time activity!
This is absolutely crucial!
Anti-Pattern: Releasing a
new or modified product
without testing its
performance.
Seriously.
Confidential and Proprietary

23. QUANTIFY
Confidential and Proprietary

24. KNOW THE LANDSCAPE
“What are the differences among browsers?”
“What are my competitors doing?”
“What about low bandwidth users?
“How can I test that?”
Confidential and Proprietary 8/2/2012

25. THE 7 HABITS OF EXCEPTIONAL
PERFORMANCE
1. Make Performance a Priority
2. Test, Measure, Test Again
3. Learn about the Tools
4. Balance Performance with Features
5. Track Results Over Time
6. Set Targets
7. Ask Questions; Check It for Yourself!
Confidential and Proprietary

26. CODA: MAKING THE WEB SMARTER AND
FASTER
• Faster HTTP
• SPDY
• HTTP Speed+Mobility
• Scratch
• Better Browsers
• Chrome has disrupted the market
• HTML5 will drive further evolution
• Moving to Mobile/Device Platforms
• More sensitive to network effects of all kinds
• Application-driven user experience
• Moving away from Hypertext?
Confidential and Proprietary 8/2/2012

27. 42
Michael Faraday is the father of network performance, having
performed the first bandwidth measurements on the first
transatlantic telegraph cable in 1854.
Daniel Austin
Technical Staff
CMU Invited Lecture Paypal, Inc.
August 02 , 2012
V1.1
daaustin@paypal.com
@daniel_b_austin