Understanding Web Performance · Understanding Web Performance Day 12. 10/7/15 2 1995 2000 2005...

Understanding Web Performance

Day 12

10/7/15 2

1995 2000 2005 2010 2014

HTTP/1.1: The standard to load Web pages

HTTP/1.1 becomes slow for rich, modern pages

Google developed SPDY to make the Web faster

- Starting to be deployed- Standardized HTTP/2.0

Google developed QUIC

Difficult to understand page load and its Impact

• Factors that affect page loado Page structureo Inter-dependencies between network and

computation activitieso Browser implementations

o Factors that determine page load impacto User satisfaction (Click thru)o User experience (pagination/query refinement) 4

Agenda

• Understanding Implication of page load times

• Challenges quantifying Page load times

• WPROF: Capturing Dependencies

• SPDY v HTTP1.1

Understanding Impact of Page load Time

• Why understand this?– Motivates performance discussions and analysis– Informs engineering efforts and investments

• Interesting Questions:– If the whole page is slow what happens?– If page results are slow but header is fast, what

happens?– If ads are slow what happens?

ADs

Page header

Search Results

Google Web Search Delay Experiments• A series of experiments on a small %

search traffic to measure the impact of latency on user behavior

• Randomly assign users to the experiment and control groups (A/B testing)

• Server-side delay:– Emulates additional server

processing time– May be partially masked by network

connection

• Varied type of delay, magnitude (in ms), and duration (number of weeks)

Server Delays Experiment: Results

• Strong negative impacts• Roughly linear changes with increasing delay• Time to Click changed by roughly double the delay

Time to Click

Revenue/user AnyClicks on page

50ms N/A N/A N/A200ms 500 N/A -0.3%500ms 1200 -1.2% -1%1000ms 1900 -2.8% -1.9%2000ms 3100 -4.3% -4.4%

• Results from Delay EVERYTHING!!!!

Search Traffic ImpactType of Delay

Delay (ms)

ExperimentDuration (weeks)

Impact on Average Daily Searches Per User

Pre-header 50 4 Not measurable

Pre-header 100 4 -0.20%

Post-header 200 6 -0.29%

Post-header 400 6 -0.59%

Post-ads 200 4 -0.30%

• Increase in abandonment heuristic = less satisfaction– Abandonment heuristic measures if a user stops interacting with

search engine before they find what they are looking for• Active users (users that search more often a priori) are more

sensitive

Progressive Rendering Experiment

• Goal– Determine impact sending visual header before results.

• Methodology– Build page in phases– Send using HTTP 1.1 Chunked Transfer Encoding

Visual Header - Fast to compute

Results - Slower to compute

Progressive Rendering Experiment: Results

Metric Change

PerformanceFaster across all latency percentiles4-18% faster to download all HTMLRoughly halved time to see visible page change

Time to Click ~9% fasterQuery refinement +2.2%Clicks overall +0.7%Pagination +2.3%

• Goal– Determine impact sending visual header before results.

Conclusion

• "Speed matters" is not just lip service

• Delays under half a second impact business metrics

• The cost of delay increases over time and persists

• Number of bytes in response is less important than what they are and when they are sent

Agenda




• SPDY v HTTP1.1

Difficult to understand page load

5

<html> <script src="b.js"></script> <img src="c.png"/></html>

<html> <img src="c.png"/> <script src="b.js"></script></html>


5

htmlb.js

c.png




5

htmlb.js

c.png

html

b.js

c.png




5

htmlb.js

c.png

html

b.js

c.png



Understanding dependencies is the key to understand page load.

How a page is loaded

6


6

Concurrencies among the four components


6

Dependencies: one component can block others


A page load starts with a user-initiated request.6

http://www.example.com/


index.html1 <html>2 <script src="main.js"/>3 </html>

Object Loader downloads the corresponding Web page.6



Upon receiving the first chunk of the root page, the HTML Parser starts to parse the page. 6



HTML Parser requests embedded objects, i.e., JavaScript.6



Object Loader requests the inlined JS and sends it for evaluation.

main.js...

6



JS evaluation can modify the DOM and its completion resumes HTML parsing.

main.js...

6



HTML continues being parsed and added to the DOM.6



Rendering Engine progressively renders the page (i.e., layout and painting). 6

http://www.example.com/

Agenda




• SPDY v HTTP1.1

Challenges in Capturing Dependencies

• Many factors that affect page loado Page structureo Inter-dependencies between network and computation

activitieso Browser implementations

• Different browsers have different policies on how to parse and load webpages

• Only Way to Understand is to Model Dependencies– Reverse engineer page loads with test pages

Reverse engineer page loads with test pages

• Design test pages

An example Web page8

HTML

JS CSSIMG

IMG HTML IMG

What Makes for good Test pages?

• Design test pageso An object follows another


HTML

JS CSSIMG

IMG HTML IMG


• Design test pageso An object follows anothero An object embeds another


HTML

JS CSSIMG

IMG HTML IMG


img


• Observe timings from DevTools

9

html

html

js

js

img

HTML

JS IMG

HTML

IMG JS

Injecting arbitrary delays for an object should changes things in a predictable manner:• How will things change for embedded objects?• How will things change for objects that follow each other?


img


• Observe timings from DevTools

9

html

html

js

js

img

HTML

JS IMG

HTML

IMG JS

Dependency policy categories

• Flow dependency

• Output dependency

• Lazy/Eager binding• Lazy = load when user gets there

• Eager = preloading

• Resource constraintso Limited computing power or network resources

(# TCP conn.)

10

Output dependency

index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...

11

Output dependency


11

html

Elapsed time

Output dependency


11

html

Elapsed time

c.css

Output dependency


11

html

f.js

Elapsed time

c.css

Agenda




• SPDY v HTTP1.1

10/7/15 54

HTTP/1.1 problems

10/7/15 55

ClientClient

Server

Server

HTTP/1.1 problems

• Opens too many TCP connections

10/7/15 56

ClientClient

Server

Server

HTTP/1.1 problems

• Opens too many TCP connections• Initiates object transfers strictly by

the client

10/7/15 57

ClientClient

Server

Server

HTTP/1.1 problems


the client• Compresses only HTTP payloads,

not headers

10/7/15 58

ClientClient

Server

Server

HTTP/1.1 200 OK\r\n.Date: Fri, 21 Mar 2014\r\n.Server: Apache/2.2.26\r\n\r\n****************************************


Uncompressed

Uncompressed

CompressedCompressed

HTTP/1.1 problems


the client• Compresses only HTTP payloads,

not headers

10/7/15 59

ClientClient

Server

Server



Uncompressed

Uncompressed

CompressedCompressedSPDY is proposed to address these issuesSPDY is proposed to address these issues

How well does SPDY perform?

10/7/15 60

SPDY helps 27% to 60%


How well does SPDY perform?

10/7/15 61



SPDY sometimes helps and sometimes hurts.Overall, SPDY helps < 10%.

SPDY sometimes helps and sometimes hurts.Overall, SPDY helps < 10%.Measurement results conflictMeasurement results conflict

Goals

• A systematic study of SPDY that– Extensively sweeps the parameter space– Links SPDY performance to underlying factors– Identifies the dominant factors

10/7/15 62

SPDY v.s. HTTP/1.1

10/7/15 63

Many factors external to SPDY affect SPDYMany factors external to SPDY affect SPDY

Isolate factors, sweep the parameter space Network parameters

TCP settings Web page effects

Isolate factors, sweep the parameter space Network parameters

TCP settings Web page effects

Approach

Approach

RTT Bandwidth Loss rate

RTT Bandwidth Loss rate

Synthetic objects Real objects Real pages

Synthetic objects Real objects Real pages

TCP initial congestion window TCP initial congestion window

Challenge 1

Challenge 1

10/7/15 64

Page load time has high variancePage load time has high varianceChalleng

eChalleng

e

Control source of variability by- Experimenting in a controlled

network- Using our emulator instead of

browsers

Control source of variability by- Experimenting in a controlled

network- Using our emulator instead of

browsers

Approach

Approach

0

0.2

0.4

0.6

0.8

1

0 0.5 1 1.5 2 2.5 3 3.5 4

CD

F

Page load time (seconds)

HTTP

SPDY

Variance: 0.5 second

Difference: 0.02 second

Challenge 2

Challenge 2

10/7/15 65

Dependencies between network and browser computation affect page loads

Dependencies between network and browser computation affect page loads

Challenge

Challenge

Elapsed time

Elapsed time

No browser Browser computation

Obje

cts Obje

cts

Preserve dependencies.Preserve dependencies.

Challenge 3

Challenge 3

Make HTTP requestsMake HTTP requests

Extensively sweep parameter spaceFactors RangeRTT 20ms, 100ms, 200msBandwidth 1Mbps, 10MbpsLoss rate 0, .5%, 1%, 2%TCP IW 3, 10, 21, 32Web obj. size 100B, 1K, 10K, 100K, 1M# of objects 2, 8, 16, 32, 64, 128, 512

10/7/15 66

Network paramete

rs

TCP settings

Synthetic objects

Network paramete

rs

TCP settings

Synthetic objects

Link SPDY performance to factors Decision tree analysis

10/7/15 67

lossloss

# obj#

obj

RTTRTT

BWBW

IWIW

obj sizeobj size

loss

loss

# obj# obj# obj# obj

RTTRTT RTTRTT RTTRTT

BWBW BWBW B

WBW

IWIW

SPDY

HTTPEQUALEQUAL HTTP

SPDY SPDY

SPDY SPDY HTTPEQUALEQUAL EQUAL

SPDY SPDYEQUALEQUAL

small large

low high low high

small small smalllarge large large

low low low lowhigh high highhigh

Six factors,Thousands of data points

SPDY helps on small objects

10/7/15 68

lossloss

obj sizeobj size

# obj# obj

RTTRTT

BWBW BWBW

IWIW

SPDY

SPDY

SPDY SPDYEQUAL

SPDYEQUAL

Small (< 1.5KB)

low high

small large

low high

small large

low low

high high

Unlike in HTTP, a TCP segment can carry multiple Web objects in SPDY.

Unlike in HTTP, a TCP segment can carry multiple Web objects in SPDY.

Explanation

Explanation

Why SPDY helps

Why SPDY helps

SPDY helps on large objects, low loss

10/7/15 69

# obj# obj

RTTRTT

BWBW

IWIW

obj sizeobj size

loss

loss

EQUAL

SPDY

EQUAL

SPDYEQUAL

Large (> 1.5KB)

Low (< 0.5%)

small large

low high

small large

low high

In HTTP, Multiple connections compete with each other

More retransmissions

In HTTP, Multiple connections compete with each other

More retransmissions

Explanation

Explanation

SPDY hurts on large objects, high loss

10/7/15 70

obj sizeobj size

loss

loss

# obj# obj

RTTRTT RTTRTT

BWBWHTTPEQUAL HTTP

HTTPEQUAL

Large (> 1.5KB)

High (>=0.5%)

small large

low low highhigh

low high In a single connection, SPDY reduces cwnd more aggressively under loss.

In a single connection, SPDY reduces cwnd more aggressively under loss.

Explanation

Explanation

Timecw

nd

Time

cwnd

11 11

1111

22

11

22

11

22

HTTP SPDY

loss

loss

loss

loss

Most performance impact of SPDY comes from a single TCP connection.

Most performance impact of SPDY comes from a single TCP connection.

Identify dominant factors

10/7/15 71

lossloss

obj sizeobj size

# obj#

obj

RTTRTT

BWBW

IWIW

Importance?

Identify dominant factors

10/7/15 72

RTT: 200msBW: 10MbpsLoss: 0IW: 3obj size: 10KB# obj: 8

losslossobj sizeobj size

# obj#

objRTTRTT BWBW IWIWmore important than

# obj shows a trend

# obj shows a trend

IW doesn’t show a trend

IW doesn’t show a trend

# obj

PLT

of

SPD

Y /

PLT

of

HTTP

2 8 16 32 64 128 512PLT

of

SPD

Y /

PLT

of

HTTP

TCP IW

3 11 21 32


Synthetic objects Real objectsFactors RangeRTT 20ms, 100ms, 200msBandwidth 1Mbps, 10MbpsLoss rate 0, .5%, 1%, 2%TCP IW 3, 10, 21, 32Web obj. size 100B, 1K, 10K, 100K, 1M# of objects 2, 8, 16, 32, 64, 128, 512

10/7/15 74

Network paramete

rs

TCP settings

Webobjects

Network paramete

rs

TCP settings

Webobjects

Top 200 Alexa pagesTop 200 Alexa pages

SPDY helpsSPDY helps HTTP helpsHTTP helps

0

0.2

0.4

0.6

0.8

1

0 0.5 1 1.5 2

CD

F

PLT of SPDY divided by PLT of HTTP

10/7/15 75

SPDY helps 60% in the median casebecause it largely reduces

retransmissions

SPDY helps 60% in the median casebecause it largely reduces

retransmissions

60%

Browser effects

10/7/15 76

html

f.js

Elapsed time

c.css

html

f.js

Elapsed time

c.css

Assumption that objects are fetched at the same time does

not hold.

Assumption that objects are fetched at the same time does

not hold.

Epload captures browser effects

• Recorder: capture the dependency graph• Replayer: make network requests while

simulating the computation portions

10/7/15 77

html

f.js

Elapsed time

c.css

Network

Computation

Real network requests

Real network requests

WaitWaitEpload makes experiments

reproducibleEpload makes experiments

reproducible


Real objects Real pagesFactors RangeRTT 20ms, 100ms, 200msBandwidth 1Mbps, 10MbpsLoss rate 0, .5%, 1%, 2%TCP IW 3, 10, 21, 32Web obj. size 100B, 1K, 10K, 100K, 1M# of objects 2, 8, 16, 32, 64, 128, 512

10/7/15 78

Network paramete

rs

TCP settings

Webobjects

Network paramete

rs

TCP settings

Webobjects

Top 200 Alexa pagesTop 200 Alexa pages

Emulate page loads with EploadEmulate page loads with Epload

SPDY helpsSPDY helps HTTP helpsHTTP helps

0

0.2

0.4

0.6

0.8

1

0 0.5 1 1.5 2

CD

F

PLT of SPDY divided by PLT of HTTP

10/7/15 79

RTT=20msBandwidth=10Mbps

SPDY helps marginally because• Computation and dependencies

increase PLT of both SPDY and HTTP

• Throttled object fetches result in fewer retransmissions in HTTP

SPDY helps marginally because• Computation and dependencies

increase PLT of both SPDY and HTTP

• Throttled object fetches result in fewer retransmissions in HTTP

1.0

Dependencies and computation in real page loads reduce the impact of SPDY.

Dependencies and computation in real page loads reduce the impact of SPDY.

Enhanced policies for SPDY

Improving SPDY with server push

Mod_spdy’s: one level of HTML embedingOur policy: one level of the dependency graph

10/7/15 81

Elapsed time

Obje

cts

root

Our policy

Elapsed time

Obje

cts

root

Mod_spdy’s


• Leverage information from dependency graphs– Web objects that are closer to the root should be

pushed earlier

10/7/15 82

Elapsed time

Obje

cts

Elapsed time

Obje

cts

root root


• ‘Server push’ with our policy and mod_spdy’s both helps page load time by 10%~30%

• ‘Server push’ breaks dependency and sends objects before their time

10/7/15 83

Improving page load performance requires restructuring the page load process, e.g. server push.

Improving page load performance requires restructuring the page load process, e.g. server push.

Concluding Remarks

Understanding Web Performance · Understanding Web Performance Day 12. 10/7/15 2 1995 2000 2005...

Documents

Transcript of Understanding Web Performance · Understanding Web Performance Day 12. 10/7/15 2 1995 2000 2005...