Web Performance Boot Camp
2014
Daniel Austin
Interstellar Travel, Inc.
HTML5 DevConf
May 21, 2014
V 0.9
Overture: Goals of the Class
• Provide a basic understanding of Web performance for
Architects, Developers, Designers, and...
Self-Serving Promotion!
Available October 25, 2014
You can pre-order it on
Amazon now!
‘Rough Cuts’ preview
scheduled for ...
Scope of Web Performance
Anything that uses HTTP
Always From the End User’s Point of View
Web Request/Response Only!
Current State of the Art
• Web performance is both an Art and a Science (but it’s not yet
Engineering)
• Multiple tools an...
Reading List
• Performance by Design - Daniel A. Menasce (Safari)
• The Practical Performance Analyst - Neil J. Gunther
• ...
Tools Used in This Class
• Excel (or similar spreadsheet program)
• Online Testing Tools – webpagetest.org, speedtest.net
...
Class Structure
Schedule
• Start: 9:00 AM
• Break: 10:30-1:45
• Lunch: 12:30-1:15
• Break: 2:30-2:45
• End: 4:00 PM
Agenda...
Section I
What is Performance?
What Problem Are We Trying To Solve?
• World-class response times compared to our competitors
• Reliable, predictable perf...
Impact of Performance on Business
• Google
– 500 ms reduces traffic to sites by 20%
• Yahoo!
– 400 ms reduces traffic by 5...
Who needs
‘Performance’
science anyway?
?
Who cares?
A More Rational Approach?
Systemic Qualities In a Nutshell
“Anything you can say about a black box – from the outside”
• Systemic qualities are the ...
The Four Classes of Systemic Qualities
Manifest Qualities - What the users see
• Usability, Performance, Reliability, Avai...
The Manifest Systemic Qualities
• Usability reflects the ease with which users can
accomplish their goals
• Performance re...
Performance is a Balancing Act
Performance isn’t everything; sometimes we’re called on to
make choices about which systemi...
What Is Performance?
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS...
Section II
Performance Basics
Scales of Measure
Statistics 101
Comparison of Mean, Median, and Mode
Comparison of mean, median and
mode of two log-normal distributions
with different sk...
Outliers, or Why We Use the Median
• A: skewed to the left
• B: skewed to the right
• C: symmetrical
Statistical Distributions
• Discrete or continuous?
• Mean, median, sigma,
95%?
• Is it reasonable?
|mean – median| <= sig...
Understanding the Margin of Error
• Margin of error at 99% confidence
= 1.29/sqrt(n)
• Margin of error at 95% confidence
=...
5 Number Reports
A simple way of summarizing a sample
• Shape of the distribution
• Extreme values
• Variance
• Skewness
D...
Hands On: Using Curl
• Curl is a text-based HTTP
client for single objects
• We’ll do 10 consecutive
tests of
http://www.t...
5 Number Reports in Excel
Excel functions:
Min = MIN(Data Range)
Q1 = QUARTILE(Data Range, 1)
Q2 = QUARTILE(Data Range, 2)...
5 Number Reports in R
Let’s make a 5 number report in R:
R version 3.0.1 (2013-05-16) -- "Good
Sport"
> RT <- c(0, 0, 1, 2...
Operational Research
• Developed during WWII
for managing armies and
supply chains
• A set of rules or ‘laws’ that
describ...
Resources and Queues
Si: Service time
Ri: Queue Residence time
i: Queue length
In general, systems consist of many combine...
The Utilization Law
• The utilization (Ui) of resource i is the
fraction of time that the resource is busy.
• Xi: average ...
Interactive Response time law
IMAGE COURTESY PROF. RAJ JAIN
Hands-on: Using the Response Time Law in
the Real World
Let’s say Facebook’s Web servers can process 10K ‘like’
requests/s...
Hands-on: Using the Response Time Law in
the Real World
Let’s say Facebook’s Web servers can process 10K ‘like’
requests/s...
Antipattern: Keyhole optimization
Problem: Optimizing your project
Antipattern: Optimizing *your* project, at
the expense ...
Section III
The MPPC Model
Dimensions of Performance
• Geography
• Network location
• Bandwidth
• Transport Type
• Browser/Device Type
• RT Varies by...
Hardware and Routing
The OSI Stack Model
OSI Functionality Summary
Physical
Data Link
Network
Transport
Session
Presentation
Application
Transmit bits
Organize bit...
All People Seem To Need Data Processing
Physical
Data Link
Network
Transport
Session
Presentation
Application
Processing
D...
HTTP Connection Flow
Estimated server
processing time
Handshake time
Client’s perceived
response time Request
Response
Con...
The MPPC Model Of Web Performance
End User
HTTP Request
DNS/Network
Resolution
Page
Composition
Payload
Delivery Time
HTTP...
T1 – Making the Connection
t1= tDNS + tTCP+ tSSL
• Typically a larger part of the E2E
than expected
• Highly variable
• SS...
Why DNS Matters
• Nothing happens before DNS!
• User does not see anything on their page  waiting
time
• Homework Assignm...
Interacting with DNS: dig
time
T2 – The Server Duration
• Let (l/m) = dr
• U = (dr)[1-(dr)W]
• X = U * m
• Navg = (dr)[W(dr)W+1 -(W+1)(dr)W+1]
• … so t2 ...
T3 – TCP Transport Time
• Single Object:
t3 = Sz/R+2RTT+tidle
For persistent parallel connections:
t3 = (M+1)Si/Ri+[M/kNh]...
T4 - What the Browser Does
t4 = S Dtoff(i)
Dtoff = time offset
to parse the HTML, JS, CSS,
and establish the individual
co...
Where are the delays?
Bandwidth Efficiency
Bmax = 1.22*(L)^1/2 * MSS/RTT
Bandwidth, Latency, and All That
More Bandwidth? Less Latency!
Hands-on: Testing DNS Response
times
We’ll use nslookup for this exercise
1. Run 10 nslookup commands for a site (e.g.
www...
Antipattern: That’s Outside My Control
It’s never the case that there is ‘nothing you can do’ about a
performance problem....
Section IV
Tools and Testing
Let’s Talk Tools
Commercial Performance Services
– Gomez (Compuware)
– Keynote
– AlertSite
– ThousandEyes
• ‘Wholesale’ Te...
Commercial Testing Services
• Gomez, AlertSite, and Keynote toolsets are similar in many ways
• Synthetic Test Setup
• Tes...
Performance Testing Locations
Your Data Centers
QA & Test
HTTP Object Model
Web Page(s)
Page Objects
(or Components)
A Test is a sequence of one or
more URLs for which HTTP
request...
Desktop Tools
• Browser Developer Tools
– F12
• Yslow, PageSpeed
• MS Fiddler, VRTA, Full HTTP proxy
• HTTPWatch
• *nix co...
Unix Performance Testing Tools
• ping – determine the RTT to a server
• nslookup, dig – retrieve DNS records
• traceroute ...
WebPageTest.Org
• Free Testing Tool
– Similar to commercial svcs.
– Can help identify problems
in the field that would be
...
Hands-on: Analyzing Waterfall Diagrams
http://www.webpagetest.org
• Choose a location and a
browser and test:
http://www.y...
Cached v. Uncached
Task-Based Performance Thinking
Welcome
(A)
Inbox
(B)
Bulk
(C)
Compose
(E)
Read
Message
(D) Verify
(F)
Send
Confirm
(G)
P(...
Testing Your Competitors for Fun & Profit
Stormcat: Global Performance Testing
• Cannot compare performance data out-of-region
• There are many global factors invol...
Antipattern: Design-time Failure
Performance is a design time activity!
Anti-Pattern: Releasing a new or
modified product ...
Section V
HTML5 & Performance
A Federated Model for HTML
Core HTML5
HTML
Markup
HTML
Media
IndexDB
Web
Storage
Web
Sockets
Web
Workers
Canvas
2D
Source:...
The Co-Evolution of HTML, JS, CSS, and
XML
Source: Sergey Mavrody c. 2013
Document Object Model
JavaScript…
JSON…
XML Core...
Tower of Babel: A Problem We Have Yet to
Solve
The Current Browser Landscape
Source: http://www.w3schools.com/browsers/browsers_stats.asp
HTML5 Performance
W3C Resource Timing
W3C Navigation Timing
Hands-on Exercise: Testing Performance
the W3C Way
• Use the Navlet:
http://code.google.com/p/navlet/
Make a bookmark or f...
Antipattern: We’ll Be Done With This Soon
Performance is an ongoing activity, not fire and forget!
Antipattern: Not treati...
Section VI
Mobile Devices
The Big Picture – Mobile is Growing
Native Apps v. HTML5 v. Desktop
• Native Apps will run ~ 5x
faster than HTML5
• Roughly 10x slower than
desktop
• HTML5 on...
If you’re designing for mobile, it’s safe to assume you’re
going to incur 2000ms of 3G latency.
Mobile Apps Are Slow
Slow Compared to What?
Since 2009 mobile browsers
went from 30x to 5x slower than
desktops
– Better than Moore’s Law
impro...
Mobile Speeds by Example
Users Expect More. Now.
Mobile JavaScript Performance
• That 5x is in the code
interpretation?
• Typed arrays
• JSON layout
• DOM Manipulation
• G...
How 3G/4G Networks Work
3G to 4G Migration
HTML5: New Features for Mobile
http://mobilehtml5.org/
Delay-tolerant Application Design
• Plan for offline/intermittent
connectivity
• Caching local content
– Local storage
– D...
The Right Tool For the Right Job
Source: Nick Zakas
Best Practices for Mobile
• Tread lightly on the JavaScript
• Don’t touch the DOM!
• CDNs are less effective due to networ...
4 Takeaways on Mobile Performance
Mobile HTML apps are slow compared to native apps
…but it’s not all about JavaScript
Mob...
Tools for Mobile Testing
• Speedtest/Ookla
– Variability
– Characteristics of different kinds of networks
• iCurl
– Simple...
Hands-on Exercise: Testing Mobile
Performance
Antipattern: It’s The Application Stupid!
T2 (server duration ~ 35% of total E2E
– More on mobile however!
Antipattern: Fa...
Finale – Summing Up
The 7 Habits of Exceptional Performance
1. Make Performance a Priority
2. Test, Measure, Test Again
3. Learn about the Too...
Yslow Rules!
• Rule 1 - Make Fewer HTTP
Requests
• Rule 2 - Use a Content Delivery
Network
• Rule 3 - Add an Expires Heade...
Every Tool Has Its Place in the Universe
The One Number of Truth
“42”
“…a single user-interface to many large classes of
stored information such as reports, notes, data-bases,
computer documen...
Theme of the Work
Ultimately, performance is about respect.
Thank You!
Daniel Austin
Interstellar Travel, Inc.
HTML5 DevConf
May 21, 2014
@daniel_b_austin
da@x.com
Upcoming SlideShare
Loading in …5
×

Web Performance Bootcamp 2014

895 views

Published on

Slides from my Web Performance Bootcamp 2014 workshop at HTML5 DevConf, May 21.

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
895
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Performance Bootcamp 2014

  1. 1. Web Performance Boot Camp 2014 Daniel Austin Interstellar Travel, Inc. HTML5 DevConf May 21, 2014 V 0.9
  2. 2. Overture: Goals of the Class • Provide a basic understanding of Web performance for Architects, Developers, Designers, and Engineers • Empower YOU to identify and resolve performance problems and make your pages and applications faster!!! • Demonstrate and explain how to use common tools and techniques used in our industry to solve performance problems
  3. 3. Self-Serving Promotion! Available October 25, 2014 You can pre-order it on Amazon now! ‘Rough Cuts’ preview scheduled for June 2014.
  4. 4. Scope of Web Performance Anything that uses HTTP Always From the End User’s Point of View Web Request/Response Only!
  5. 5. Current State of the Art • Web performance is both an Art and a Science (but it’s not yet Engineering) • Multiple tools and methodologies, large ad hoc, contend in the marketplace (but little of it is well-thought out or based on scientific reasoning). • Things are getting better – W3C involvement and competitive pressures, as well as better infrastructure and the influx of new users in Asia is driving more attention to performance. There’s hope.
  6. 6. Reading List • Performance by Design - Daniel A. Menasce (Safari) • The Practical Performance Analyst - Neil J. Gunther • Elements of Networking Style - M.A. Padlipsky • High Performance Web Sites – Steve Souders
  7. 7. Tools Used in This Class • Excel (or similar spreadsheet program) • Online Testing Tools – webpagetest.org, speedtest.net • Desktop Testing Tools – your browser, Firebug, netmon, dig, ping, curl • Mobile Tools: speedtest app, httpwatch basic, net tools, curl
  8. 8. Class Structure Schedule • Start: 9:00 AM • Break: 10:30-1:45 • Lunch: 12:30-1:15 • Break: 2:30-2:45 • End: 4:00 PM Agenda • Section I – What Is Performance? • Section I – Performance Basics • Section III – The MPPC Model • Section IV – Tools & Testing • Section V – HTML5 & Performance • Section VI – Mobile Devices
  9. 9. Section I What is Performance?
  10. 10. What Problem Are We Trying To Solve? • World-class response times compared to our competitors • Reliable, predictable performance for users worldwide across the spectrum of devices • Efficient use of resources: cost scales linearly with traffic • Delighted users!
  11. 11. Impact of Performance on Business • Google – 500 ms reduces traffic to sites by 20% • Yahoo! – 400 ms reduces traffic by 5-9% • Amazon – 100 ms reduces revenue by 1% • Compuware – 1 sec delay reduces conversion by 7% 11
  12. 12. Who needs ‘Performance’ science anyway? ? Who cares?
  13. 13. A More Rational Approach?
  14. 14. Systemic Qualities In a Nutshell “Anything you can say about a black box – from the outside” • Systemic qualities are the “ilities” – physical features of the system such as capacity, performance, and scalability • The SQs correspond to different groups of stakeholders: users, developers, operators, organizations • SQs are the best measure of the quality of the user’s experience of the system, regardless of the feature set
  15. 15. The Four Classes of Systemic Qualities Manifest Qualities - What the users see • Usability, Performance, Reliability, Availability, Accessibility Operational Qualities - What the system operators see • Throughput, Manageability, Security, Serviceability Developmental Qualities - What developers see • Buildability, Budgetability, Planability Evolutionary Qualities - How the system changes over time • Scalability, Maintainability, Extensibility, Reusability, Portability
  16. 16. The Manifest Systemic Qualities • Usability reflects the ease with which users can accomplish their goals • Performance reflects how much little time users must wait for actions to complete • Reliability measures how often the system fails • Availability measures uptime vs. downtime • Accessibility measures the systems ability to serve users regardless of location or physical condition (including I18N and L10N)
  17. 17. Performance is a Balancing Act Performance isn’t everything; sometimes we’re called on to make choices about which systemic qualities have priority over others. Security v. performance is a common tradeoff – what would you choose?
  18. 18. What Is Performance? PERFORMANCE IS RESPONSE TIME PERFORMANCE IS RESPONSE TIME PERFORMANCE IS RESPONSE TIME PERFORMANCE IS RESPONSE TIME PERFORMANCE IS RESPONSE TIME
  19. 19. Section II Performance Basics
  20. 20. Scales of Measure
  21. 21. Statistics 101
  22. 22. Comparison of Mean, Median, and Mode Comparison of mean, median and mode of two log-normal distributions with different skewness.
  23. 23. Outliers, or Why We Use the Median • A: skewed to the left • B: skewed to the right • C: symmetrical
  24. 24. Statistical Distributions • Discrete or continuous? • Mean, median, sigma, 95%? • Is it reasonable? |mean – median| <= sigma • Does it correlate?
  25. 25. Understanding the Margin of Error • Margin of error at 99% confidence = 1.29/sqrt(n) • Margin of error at 95% confidence = 0.98/sqrt(n) • Margin of error at 90% confidence = 0.82/sqrt(n) (where n is the number of sample data points) The margin of error is a measure of how close the results are likely to be.
  26. 26. 5 Number Reports A simple way of summarizing a sample • Shape of the distribution • Extreme values • Variance • Skewness Draw it! This is how you get a sense of the data… Median 1st quartile 3rd quartile Minimum Maximum
  27. 27. Hands On: Using Curl • Curl is a text-based HTTP client for single objects • We’ll do 10 consecutive tests of http://www.twitter.com • Run the 5 number report • Plot the results! • curl -o /dev/null -s -w %{time_total}n http://www.twitter.com
  28. 28. 5 Number Reports in Excel Excel functions: Min = MIN(Data Range) Q1 = QUARTILE(Data Range, 1) Q2 = QUARTILE(Data Range, 2) Q3 = QUARTILE(Data Range, 3) Max = MAX(Data Range)
  29. 29. 5 Number Reports in R Let’s make a 5 number report in R: R version 3.0.1 (2013-05-16) -- "Good Sport" > RT <- c(0, 0, 1, 2, 63, 61, 27, 13) > fivenum(RT) [1] 0.0 0.5 7.5 44.0 63.0 http://www.r-project.org/
  30. 30. Operational Research • Developed during WWII for managing armies and supply chains • A set of rules or ‘laws’ that describe the operational aspects of a system. • Useful for understanding the performance of any system • Utilization Law • Forced Flow law • Little’s Law • Response Time Law
  31. 31. Resources and Queues Si: Service time Ri: Queue Residence time i: Queue length In general, systems consist of many combined queues and resources ResourceQueue SiRi
  32. 32. The Utilization Law • The utilization (Ui) of resource i is the fraction of time that the resource is busy. • Xi: average throughput of queue i, i.e. average number of requests that complete from queue i per unit of time • Si: average service time of a request at queue i per visit to the resource Ui = Xi * Si
  33. 33. Interactive Response time law IMAGE COURTESY PROF. RAJ JAIN
  34. 34. Hands-on: Using the Response Time Law in the Real World Let’s say Facebook’s Web servers can process 10K ‘like’ requests/second, and the number of concurrent users is 600K. If each user waits 5s between requests, how long will each request take? R = (N/X) –Z
  35. 35. Hands-on: Using the Response Time Law in the Real World Let’s say Facebook’s Web servers can process 10K ‘like’ requests/second, and the number of concurrent users is 600K. If each user waits 5s between requests, how long will each request take? R = (N/X) –Z = 6 * 10e5 / (10 requests/ms) -5 * 10e4ms = 6 * 10e4 – 5* 10e4 ms = 1000ms Facebook needs more servers!
  36. 36. Antipattern: Keyhole optimization Problem: Optimizing your project Antipattern: Optimizing *your* project, at the expense of everyone else! Pattern: Your project is part of the system – optimize for the overall system performance, not just what you can see, even if that means your part is less- than-perfectly optimized.
  37. 37. Section III The MPPC Model
  38. 38. 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
  39. 39. Hardware and Routing
  40. 40. The OSI Stack Model
  41. 41. OSI Functionality Summary Physical Data Link Network Transport Session Presentation Application Transmit bits Organize bits into frames Transmit packets from source to destination Reliable message delivery end to end Establish, manage, terminate sessions Translate, compress, encrypt Access network resources
  42. 42. All People Seem To Need Data Processing Physical Data Link Network Transport Session Presentation Application Processing Data Need To Seem People All
  43. 43. HTTP Connection Flow Estimated server processing time Handshake time Client’s perceived response time Request Response Connection setup Client Server Request transmission time Response transmission time The more HTTP requests & network roundtrips you require, the slower your performance will be: Images, CSS, JS, DNS lookups, Redirects, #of packets
  44. 44. The MPPC Model Of Web Performance End User HTTP Request DNS/Network Resolution Page Composition Payload Delivery Time HTTP Request HTTP Response HTTP ResponseBrowser Rendering Time Request Initiation by User This entire cycle, steps 1-4, is repeated once for each external reference on the page, so for a given page the total time is: Where n is the number of external page requisites. T = S Dt1 + Dt2 + Dt3 + Dt4 n+1 S n+1 t1 t2 t3 t4 T1 Connection Time T2 Server Duration T3 Transport Time T4 Render Time “Multiple Parallel Persistent Connections”
  45. 45. T1 – Making the Connection t1= tDNS + tTCP+ tSSL • Typically a larger part of the E2E than expected • Highly variable • SSL is slow!
  46. 46. Why DNS Matters • Nothing happens before DNS! • User does not see anything on their page  waiting time • Homework Assignment: create a host file for yourself. Try your favorite sites without DNS! • DNS has a great impact on user’s perceptions in HTTP applications
  47. 47. Interacting with DNS: dig time
  48. 48. T2 – The Server Duration • Let (l/m) = dr • U = (dr)[1-(dr)W] • X = U * m • Navg = (dr)[W(dr)W+1 -(W+1)(dr)W+1] • … so t2 = Navg/X (The response time law)
  49. 49. T3 – TCP Transport Time • Single Object: t3 = Sz/R+2RTT+tidle For persistent parallel connections: t3 = (M+1)Si/Ri+[M/kNh]*3SRTTi+tidle … for 1 base HTML page with M objects, with Si bits, at bandwidth Ri, k connections per host, and Nh unique hostnames
  50. 50. T4 - What the Browser Does t4 = S Dtoff(i) Dtoff = time offset to parse the HTML, JS, CSS, and establish the individual connections (to different hostnames) t4 is especially significant for mobile devices! n i = 1
  51. 51. Where are the delays?
  52. 52. Bandwidth Efficiency Bmax = 1.22*(L)^1/2 * MSS/RTT
  53. 53. Bandwidth, Latency, and All That
  54. 54. More Bandwidth? Less Latency!
  55. 55. Hands-on: Testing DNS Response times We’ll use nslookup for this exercise 1. Run 10 nslookup commands for a site (e.g. www.facebook.com) 2. Observe the response time for the DNS lookup 3. Calculate statistics for the results • 5 number report (summary) • Sketch the distribution • What can you say about the response times for DNS?
  56. 56. Antipattern: That’s Outside My Control It’s never the case that there is ‘nothing you can do’ about a performance problem. Antipattern: avoiding solving a performance issue because you think it’s outside your control. This path leads to despair. Pattern: Compensate in some other part of the E2E. Think outside the box
  57. 57. Section IV Tools and Testing
  58. 58. Let’s Talk Tools Commercial Performance Services – Gomez (Compuware) – Keynote – AlertSite – ThousandEyes • ‘Wholesale’ Testing – Statistical data for many page views under different conditions – Operational testing – Best for understanding global and network effects Page Analysis Tools – YSlow – MS Virtual RoundTrip Analyzer, HTTPWatch, Many Others – F12 in your browser • ‘Retail’ Testing – One Page or App – Diagnostic – Best for functional testing
  59. 59. 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
  60. 60. Performance Testing Locations Your Data Centers QA & Test
  61. 61. HTTP Object Model Web Page(s) Page Objects (or Components) A Test is a sequence of one or more URLs for which HTTP requests will be made. A Monitor is a set of predefined Tests to be run at specific times and places Each Page Object has 4 associated time segments, t1, t2, t3, t4
  62. 62. Desktop Tools • Browser Developer Tools – F12 • Yslow, PageSpeed • MS Fiddler, VRTA, Full HTTP proxy • HTTPWatch • *nix command line tools – ping, dig, traceroute, curl • Online Tools – WebPageTest.Org
  63. 63. Unix Performance Testing Tools • ping – determine the RTT to a server • nslookup, dig – retrieve DNS records • traceroute – analyze TCP traffic routing • netstat – lists the network connections on this machine • curl – retrieves an object from a URI using HTTP
  64. 64. WebPageTest.Org • Free Testing Tool – Similar to commercial svcs. – Can help identify problems in the field that would be otherwise difficult to find – You can set up your own network of WPTO test nodes in AWS • More on this in the book! – Desktop version also
  65. 65. Hands-on: Analyzing Waterfall Diagrams http://www.webpagetest.org • Choose a location and a browser and test: http://www.yahoo.com
  66. 66. Cached v. Uncached
  67. 67. Task-Based Performance Thinking Welcome (A) Inbox (B) Bulk (C) Compose (E) Read Message (D) Verify (F) Send Confirm (G) P(A,B) = 0.5168 9.85% 35.02% 66.25%10.04% 61.77% 34.52% 58.07% 64.53% 28.04% 34.38%22.30% Welcome 1400ms Inbox 2200ms Bulk 3200ms … Exercise: What % of users follow the path: A->E->F->G?
  68. 68. Testing Your Competitors for Fun & Profit
  69. 69. Stormcat: Global Performance Testing • 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 ‘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.
  70. 70. Antipattern: Design-time Failure Performance is a design time activity! Anti-Pattern: Releasing a new or modified product without testing its performance “Bake it in up front!”
  71. 71. Section V HTML5 & Performance
  72. 72. A Federated Model for HTML Core HTML5 HTML Markup HTML Media IndexDB Web Storage Web Sockets Web Workers Canvas 2D Source: Sergey Mavrody c. 2013 This is XHTML 1.1
  73. 73. The Co-Evolution of HTML, JS, CSS, and XML Source: Sergey Mavrody c. 2013 Document Object Model JavaScript… JSON… XML Core XSLT XSD Xpath/XQuery
  74. 74. Tower of Babel: A Problem We Have Yet to Solve
  75. 75. The Current Browser Landscape Source: http://www.w3schools.com/browsers/browsers_stats.asp
  76. 76. HTML5 Performance
  77. 77. W3C Resource Timing
  78. 78. W3C Navigation Timing
  79. 79. Hands-on Exercise: Testing Performance the W3C Way • Use the Navlet: http://code.google.com/p/navlet/ Make a bookmark or favorite using the code
  80. 80. Antipattern: We’ll Be Done With This Soon Performance is an ongoing activity, not fire and forget! Antipattern: Not treating performance as a property of the system, or only testing at release time. Pattern: establishing a long-term performance management plan as part of your cycle.
  81. 81. Section VI Mobile Devices
  82. 82. The Big Picture – Mobile is Growing
  83. 83. Native Apps v. HTML5 v. Desktop • Native Apps will run ~ 5x faster than HTML5 • Roughly 10x slower than desktop • HTML5 on the mobile device can be 50x slower – 10x from the ARM chip – 5x from JavaScript
  84. 84. If you’re designing for mobile, it’s safe to assume you’re going to incur 2000ms of 3G latency. Mobile Apps Are Slow
  85. 85. Slow Compared to What? Since 2009 mobile browsers went from 30x to 5x slower than desktops – Better than Moore’s Law improvement (!) – JavaScript v. Native code ~ 5x – 4g/LTE ~ 27% faster than 3g
  86. 86. Mobile Speeds by Example
  87. 87. Users Expect More. Now.
  88. 88. Mobile JavaScript Performance • That 5x is in the code interpretation? • Typed arrays • JSON layout • DOM Manipulation • Garbage Collection
  89. 89. How 3G/4G Networks Work
  90. 90. 3G to 4G Migration
  91. 91. HTML5: New Features for Mobile http://mobilehtml5.org/
  92. 92. Delay-tolerant Application Design • Plan for offline/intermittent connectivity • Caching local content – Local storage – Don’t be afraid to use sessions – Use HTTP Caching headers wisely • Always have failure modes built-in
  93. 93. The Right Tool For the Right Job Source: Nick Zakas
  94. 94. Best Practices for Mobile • Tread lightly on the JavaScript • Don’t touch the DOM! • CDNs are less effective due to network challenges • TTFB is not a good measure of server duration • Use Web Workers for preloading • Test performance on different transport types • Test battery consumption!
  95. 95. 4 Takeaways on Mobile Performance Mobile HTML apps are slow compared to native apps …but it’s not all about JavaScript Mobile networking is a big challenge …so design for delay-tolerance HTML5 is designed for Mobile …so use it (wisely)! Use the right tool for the right job …including the right design patterns for Mobile
  96. 96. Tools for Mobile Testing • Speedtest/Ookla – Variability – Characteristics of different kinds of networks • iCurl – Simple HTTP Operations on your device • HTTPWatch Basic – Look at the Waterfall – Gather detailed data along with iCurl
  97. 97. Hands-on Exercise: Testing Mobile Performance
  98. 98. Antipattern: It’s The Application Stupid! T2 (server duration ~ 35% of total E2E – More on mobile however! Antipattern: Failing to recognize that the distribution of the Mobile E2E is very different from a desktop performance profile Pattern: Carefully analyze the MPPC numbers for your site and identify the problems that need to be solved and in what order.
  99. 99. Finale – Summing Up
  100. 100. 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! Thanks to Tenni Theurer
  101. 101. Yslow Rules! • Rule 1 - Make Fewer HTTP Requests • Rule 2 - Use a Content Delivery Network • Rule 3 - Add an Expires Header • Rule 4 - Gzip Components • Rule 5 - Put Style sheets at the Top • Rule 6 - Put Scripts at the Bottom • Rule 7 - Avoid CSS Expressions • Rule 8 - Make JavaScript and CSS External • Rule 9 - Reduce DNS Lookups • Rule 10 - Minify JavaScript • Rule 11 - Avoid Redirects • Rule 12 - Remove Duplicate Scripts • Rule 13 - Configure ETags • Rule 14 - Make AJAX Cacheable Source: Stevesouders.com
  102. 102. Every Tool Has Its Place in the Universe
  103. 103. The One Number of Truth “42”
  104. 104. “…a single user-interface to many large classes of stored information such as reports, notes, data-bases, computer documentation and on-line systems help” WorldWideWeb: Proposal for a HyperText Project Berners-Lee & Caillau, 1990 About:HTML
  105. 105. Theme of the Work Ultimately, performance is about respect.
  106. 106. Thank You! Daniel Austin Interstellar Travel, Inc. HTML5 DevConf May 21, 2014 @daniel_b_austin da@x.com

×