Customer profiling and web personas Digital Bootcamp May 2013
Web Performance BootCamp 2013
-
Upload
daniel-austin -
Category
Technology
-
view
801 -
download
2
description
Transcript of Web Performance BootCamp 2013
![Page 1: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/1.jpg)
Web Performance Boot Camp
Daniel Austin
PayPal, Inc.
HTML5 DevConf
Oct. 24, 2013
V 2.2
![Page 2: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/2.jpg)
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
![Page 3: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/3.jpg)
Scope of Web Performance
Anything that uses HTTP
Always From the End User’s Point of View
Web Request/Response Only!
![Page 4: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/4.jpg)
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.
![Page 5: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/5.jpg)
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
![Page 6: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/6.jpg)
Tools Used in This Class
• Excel (or similar spreadsheet program)
• Online Testing Tools – webspeedtest.org
• Desktop Testing Tools – your browser, Firebug, Visual Round Trip Analyzer (VRTA), netmon, dig, ping others
• Optional: R (and Rstudio), Mathematica, SPSS
![Page 7: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/7.jpg)
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 & Peformance• Section VI – Mobile Devices
![Page 8: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/8.jpg)
Section I What is Performance?
![Page 9: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/9.jpg)
What Problem Are We Trying To Solve?
• World-class response times compared to our competitors
• Reliable, predictable performance for users worldwide
• Efficient use of resources: cost scales linearly with traffic
• Delighted users!
![Page 10: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/10.jpg)
Impact of Scalability on Business
• Google– 500 ms reduces traffic to sites by 20%
• Yahoo!– 400 ms reduces traffic y 5-9%
• Amazon– 100 ms reduces revenue by 1%
• Compuware – 1 sec delay reduces conversion by 7%
10
![Page 11: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/11.jpg)
Who needs ‘Performance’ measurements
anyway??
Who Needs Performance Anyway?
![Page 12: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/12.jpg)
A More Rational Approach?
![Page 13: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/13.jpg)
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
![Page 14: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/14.jpg)
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
![Page 15: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/15.jpg)
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)
![Page 16: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/16.jpg)
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?
![Page 17: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/17.jpg)
What Is Performance?
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
PERFORMANCE IS RESPONSE TIME
![Page 18: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/18.jpg)
Section II Performance Basics
![Page 19: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/19.jpg)
Scales of Measure
![Page 20: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/20.jpg)
Statistics 101
![Page 21: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/21.jpg)
Comparison of Mean, Median, and Mode
Comparison of mean, median and mode of two log-normal distributions with different skewness.
![Page 22: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/22.jpg)
Outliers, or Why We Use the Median
• A: skewed to the left• B: skewed to the right• C: symmetrical
![Page 23: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/23.jpg)
Statistical Distributions
• Discrete or continuous?• Mean, median, sigma,
95%?• Is it reasonable?
|mean – median| <= sigma• Does it correlate?
![Page 24: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/24.jpg)
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.
![Page 25: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/25.jpg)
5 Number Reports
A simple way of summarizing a sample
• Shape of the distribution• Extreme values• Variance• Skewness
This is how you get a sense of the data…
Median
1st quartile 3rd quartile
Minimum Maximum
![Page 26: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/26.jpg)
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)
![Page 27: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/27.jpg)
5 Number Reports in R
Let’s make a 5 number report in R:
http://www.r-project.org/
![Page 28: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/28.jpg)
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
![Page 29: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/29.jpg)
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
![Page 30: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/30.jpg)
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
![Page 31: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/31.jpg)
Interactive Response time law
IMAGE COURTESY PROF. RAJ JAIN
![Page 32: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/32.jpg)
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
![Page 33: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/33.jpg)
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!
![Page 34: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/34.jpg)
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.
![Page 35: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/35.jpg)
Section IIIThe MPPC Model
![Page 36: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/36.jpg)
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
![Page 37: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/37.jpg)
Hardware and Routing
![Page 38: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/38.jpg)
The OSI Stack Model
![Page 39: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/39.jpg)
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
![Page 40: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/40.jpg)
All People Seem To Need Data Processing
Physical
Data Link
Network
Transport
Session
Presentation
Application
Processing
Data
Need
To
Seem
People
All
![Page 41: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/41.jpg)
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
![Page 42: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/42.jpg)
The MPPC Model Of Web Performance
End User
HTTP RequestDNS/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
Sn+1
t1
t2
t3t4
T1
Connection Time
T2
Server Duration
T3
Transport Time
T4
Render Time
“Multiple Parallel Persistent Connections”
![Page 43: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/43.jpg)
T1 – Making the Connection
t1= tDNS + tTCP+ tSSL
• Typically a larger part of the E2E than expected
• Highly variable
• SSL is slow!
![Page 44: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/44.jpg)
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
![Page 45: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/45.jpg)
Interacting with DNS: dig
time
![Page 46: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/46.jpg)
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)
![Page 47: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/47.jpg)
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
![Page 48: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/48.jpg)
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
![Page 49: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/49.jpg)
Where are the delays?
![Page 50: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/50.jpg)
Bandwidth Efficiency
Bmax = 1.22*(L)^1/2 * MSS/RTT
![Page 51: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/51.jpg)
Bandwidth, Latency, and All That
![Page 52: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/52.jpg)
More Bandwidth? Less Latency!
![Page 53: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/53.jpg)
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?
![Page 54: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/54.jpg)
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
![Page 55: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/55.jpg)
![Page 56: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/56.jpg)
Section IV Tools and Testing
![Page 57: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/57.jpg)
Let’s Talk Tools
Site Performance Services– Gomez– 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
![Page 58: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/58.jpg)
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
![Page 59: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/59.jpg)
Performance Testing Locations
Your Data Centers
QA & Test
![Page 60: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/60.jpg)
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
![Page 61: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/61.jpg)
Desktop Tools
• 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
![Page 62: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/62.jpg)
Unix Performance Testing Tools
• Ping• nslookup• dig• traceroute• netstat
![Page 63: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/63.jpg)
Task-Based Performance Thinking
Welcome(A)
Inbox(B)
Bulk(C)
Compose(E)
ReadMessage(D) Verify
(F)
SendConfirm(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 1400msInbox 2200msBulk 3200ms…
Exercise: What % of users follow the path:
A->E->F->G?
![Page 64: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/64.jpg)
Testing Your Competitors for Fun & Profit
![Page 65: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/65.jpg)
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.
![Page 66: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/66.jpg)
Hands-on: Analyzing Waterfall Diagrams
http://www.webpagetest.org• Choose a location and a
browser and test:
http://www.yahoo.com
![Page 67: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/67.jpg)
Cached v. Uncached
![Page 68: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/68.jpg)
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!”
![Page 69: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/69.jpg)
Section VHTML5 & Performance
![Page 70: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/70.jpg)
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
![Page 71: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/71.jpg)
The Co-Evolution of HTML, JS, CSS, and XML
Source: Sergey Mavrody c. 2013
Document Object Model
JavaScript…
JSON…
XML CoreXSLTXSD
Xpath/XQuery
![Page 72: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/72.jpg)
Tower of Babel: A Problem We Have Yet to Solve
![Page 73: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/73.jpg)
The Current Browser Landscape
![Page 74: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/74.jpg)
HTML5 Performance
![Page 75: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/75.jpg)
W3C Resource Timing
![Page 76: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/76.jpg)
W3C Navigation Timing
![Page 77: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/77.jpg)
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
![Page 78: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/78.jpg)
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.
![Page 79: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/79.jpg)
Section VIMobile Devices
![Page 80: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/80.jpg)
The Big Picture – Mobile is Growing
![Page 81: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/81.jpg)
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
![Page 82: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/82.jpg)
If you’re designing for mobile, it’s safe to assume you’re going to incur 2000ms of 3G latency.
Mobile Apps Are Slow
![Page 83: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/83.jpg)
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
![Page 84: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/84.jpg)
Mobile Speeds by Example
![Page 85: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/85.jpg)
Users Expect More. Now.
![Page 86: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/86.jpg)
Mobile JavaScript Performance
• That 5x is in the code interpretation?
• Typed arrays• JSON layout• DOM Manipulation• Garbage Collection
![Page 87: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/87.jpg)
How 3G/4G Networks Work
![Page 88: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/88.jpg)
3G to 4G Migration
![Page 90: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/90.jpg)
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
![Page 91: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/91.jpg)
The Right Tool For the Right Job
Source: Nick Zakas
![Page 92: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/92.jpg)
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!
![Page 93: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/93.jpg)
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
![Page 94: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/94.jpg)
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
![Page 95: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/95.jpg)
Hands-on Exercise: Testing Mobile Performance
![Page 96: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/96.jpg)
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.
![Page 97: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/97.jpg)
Finale – Summing Up
![Page 98: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/98.jpg)
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
![Page 99: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/99.jpg)
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
![Page 100: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/100.jpg)
Every Tool Has Its Place in the Universe
![Page 101: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/101.jpg)
The One Number of Truth
“42”
![Page 102: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/102.jpg)
“…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
![Page 103: Web Performance BootCamp 2013](https://reader035.fdocuments.us/reader035/viewer/2022062418/554be2f5b4c9056b348b4767/html5/thumbnails/103.jpg)
Theme of the Work
Ultimately, Performance is about Respect.