Web Performance Boot Camp2014

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 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

Self-Serving Promotion!

Available October 25, 2014

You can pre-order it on Amazon now!

‘Rough Cuts’ preview scheduled for June 2014.

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 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.

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

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

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

Section I What is Performance?

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!

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

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 “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

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

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)

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?

What Is Performance?

PERFORMANCE IS RESPONSE TIME

PERFORMANCE IS RESPONSE TIME

PERFORMANCE IS RESPONSE TIME

PERFORMANCE IS RESPONSE TIME

PERFORMANCE IS RESPONSE TIME

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 skewness.

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| <= sigma• Does it correlate?

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.

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

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

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)

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/

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

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

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

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/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

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!

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.

Section IIIThe MPPC Model

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

Hardware and Routing

The OSI Stack Model

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

All People Seem To Need Data Processing

Physical

Data Link

Network

Transport

Session

Presentation

Application

Processing

Data

Need

To

Seem

People

All

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

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”

T1 – Making the Connection

t1= tDNS + tTCP+ tSSL

• Typically a larger part of the E2E than expected

• Highly variable

• SSL is slow!

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

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 = Navg/X

(The response time law)

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

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

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.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?

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

Section IV Tools and Testing

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

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

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 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

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

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

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

Hands-on: Analyzing Waterfall Diagrams

http://www.webpagetest.org• Choose a location and a

browser and test:

http://www.yahoo.com

Cached v. Uncached

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?

Testing Your Competitors for Fun & Profit

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.

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!”

Section VHTML5 & Performance

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

The Co-Evolution of HTML, JS, CSS, and XML

Source: Sergey Mavrody c. 2013

Document Object Model

JavaScript…

JSON…

XML CoreXSLTXSD

Xpath/XQuery

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 favorite using the code

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.

Section VIMobile 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 the mobile device can be 50x slower– 10x from the ARM chip– 5x from JavaScript

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 improvement (!)

– JavaScript v. Native code ~ 5x– 4g/LTE ~ 27% faster than 3g

Mobile Speeds by Example

Users Expect More. Now.

Mobile JavaScript Performance

• That 5x is in the code interpretation?

• Typed arrays• JSON layout• DOM Manipulation• Garbage Collection

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– Don’t be afraid to use sessions– Use HTTP Caching headers

wisely• Always have failure modes built-in

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 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!

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

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

Hands-on Exercise: Testing Mobile Performance

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.

Finale – Summing Up

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

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

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 documentation and on-line systems help”

WorldWideWeb: Proposal for a HyperText Project

Berners-Lee & Caillau, 1990

About:HTML

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