Demystifying Page Load Performance with WProf

(1)

Demystifying Page Load

Performance with WProf

Xiao (Sophia) Wang

, Aruna Balasubramanian,

Arvind Krishnamurthy, and David Wetherall

(2)

Web is the critical part of the Internet

(3)

Page load is critical

● Amazon can increase 1% revenue by

decreasing page load time by 0.1s.

(4)

● Amazon can increase 1% revenue by

● Page load is slow even on top 200 websites

but slow

(5)

Median page load

time is 3 seconds.

but slow

(6)

A few top pages

take more than 10

seconds to load.

but slow

(7)

Many techniques aim to optimize

page load time

● Optimization techniques

○

Server placement: CDNs

○

Web pages and cache: mod_pagespeed, Silo

○

Application level: SPDY

○

TCP/DNS: TCP fast open, ASAP, DNS

pre-resolution, TCP pre-connect

● Problem

○

Unclear whether they help or hurt page loads*

3 *http://www.guypo.com/technical/not-as-spdy-as-you-thought/.

(8)

Many techniques aim to optimize

page load time

● Optimization techniques

○

Server placement: CDNs

○

Web pages and cache: mod_pagespeed, Silo

○

Application level: SPDY

○

TCP/DNS: TCP fast open, ASAP, DNS

pre-resolution, TCP pre-connect

● Problem

○

Unclear whether they help or hurt page loads*

3 *http://www.guypo.com/technical/not-as-spdy-as-you-thought/.

*http://www.stevesouders.com/

(9)

Difficult to understand page load

● Factors that affect page load

○ Page structure

○ Inter-dependencies between network and

computation activities

○ Browser implementations

(10)

Difficult to understand page load

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

(11)

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

(12)

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

(13)

Understanding dependencies is the key to

understand page load.

5 html b.js c.png html b.js c.png

(14)

Overview of our work

● Model the page load process

● Build the WProf tool

(15)

● Model the page load process

○ How a page is loaded?

○ How to infer dependencies?

●

Build the WProf tool

(16)

How a page is loaded

(17)

Concurrencies among

the four components

(18)

Dependencies: one

component can block

others

(19)

A page load starts with a user-initiated request.

http://www.example.com/

(20)

How a page is loaded

index.html

1 <html>

2 <script src="main.js"/>

3 </html>

Object Loader downloads the corresponding Web page.

(21)

index.html

1 <html>

3 </html>

Upon receiving the first chunk of the root page, the HTML

Parser starts to parse the page.

6

(22)

index.html

1 <html>

3 </html>

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

(23)

index.html

1 <html>

3 </html>

Object Loader requests the inlined JS and sends it for

evaluation.

main.js

...

(24)

index.html

1 <html>

3 </html>

JS evaluation can modify the DOM and its completion

resumes HTML parsing.

main.js

...

(25)

index.html

1 <html>

3 </html>

HTML continues being parsed and added to the DOM.

(26)

index.html

1 <html>

3 </html>

Rendering Engine progressively renders the page (i.e.,

layout and painting).

http://www.example.com/

(27)

How to infer dependencies

● Goal

○ Extract as many dependencies as possible across

browsers

● Methodology

○ Design test pages

○ Examine documents

○ Inspect browser code

(28)

How to infer dependencies

● Goal

○ Extract as many dependencies as possible across

browsers

● Methodology

○ Design test pages

○ Examine documents

○ Inspect browser code

(29)

Reverse engineer page loads with

test pages

● Design test pages

(30)

test pages

HTML

JS IMG CSS

IMG HTML IMG

An example Web page

(31)

test pages

HTML

JS IMG CSS

IMG HTML IMG

○ An object follows another

An example Web page

(32)

test pages

HTML

JS IMG CSS

IMG HTML IMG

○ An object follows another

○ An object embeds another

An example Web page

(33)

img

test pages

● Observe timings from DevTools

9 HTML JS IMG HTML IMG JS html html js js img

(34)

img

test pages

● Design test pages

● Observe timings from DevTools

9 HTML JS IMG HTML IMG JS html html js js img

(35)

Dependency policy categories

● Flow dependency

○ Natural order that activities occur

(36)

● Flow dependency

● Output dependency

○ Correctness of execution when multiple processes

access to the same resource

(37)

Dependency policy categories

● Flow dependency

● Lazy/Eager binding

○ Tradeoffs between data downloads and page load

latencies

(38)

● Flow dependency

● Lazy/Eager binding

● Resource constraints

○ Limited computing power or network resources (#

TCP conn.)

(39)

Output dependency

index.html 1 <html>

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

...

(40)

Output dependency

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

...

html

Elapsed time

(41)

Output dependency

2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/> ... html Elapsed time c.css 11

(42)

Output dependency

(43)

Output dependency

(44)

Output dependency

2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/> ... html f.js Elapsed time c.css 11

(45)

Output dependency

(46)

Output dependency

(47)

Dependency policies

(48)

Dependency policies

12

Flow

6

Output

3

Lazy/Eag

er binding

3

Resource

constraint

2

(49)

Dependency policies across browsers

Dependency IE

Firefox

WebKit

Output

all

no O3

Late binding

all

Eager binding Preloads

img, js, css

Preloads

img, js, css

Preloads

css, js

Net resource

6 conn.

(50)

Dependency policies across browsers

Dependency IE

Firefox

WebKit

Output

all

no O3

Late binding

all

Eager binding Preloads

img, js, css

Preloads

img, js, css

Preloads

css, js

Net resource

6 conn.

O3: CSS downloads and evaluation block HTML parsing.

(51)

Overview of our work

●

Model the page load process

● Build the WProf tool

○ Profiling in browsers

○ Generating dependency graphs

○ Analyzing critical paths

(52)

WProf architecture

Web page instances

Browser extension/plug-in framework

Native browser

Browser Stack

(53)

WProf architecture

Web page instances

Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object

Loader Parser _HTML Engine _CSS Engine JavaScript Engine Rendering

(54)

WProf architecture

Web page instances

Browser Stack

Activity timing

Dependen cies

(55)

WProf architecture

Web page instances

Browser Stack

Activity timing

Dependen cies

- Log activity timings

- Track dependencies

by using HTML tags

under parsing when an

activity occurs

(56)

WProf architecture

Web page instances

Browser Stack

Activity timing Dependen cies

Lightweight

Our evaluation

suggests negligible

performance

overhead.

14

(57)

WProf architecture

Web page instances

Browser Stack

Activity timing Dependen cies

Implementation

- Built on WebKit

- Extended in Chrome

and Safari

- Written in C++

14

(58)

WProf architecture

Web page instances

Browser Stack

Activity timing Dependen cies Dependency graphs Critical paths 14

(59)

WProf architecture

Web page instances

Browser Stack

Activity timing Dependen cies Dependency graphs Critical paths 14

(60)

Dependency graph

15

(61)

Critical path analysis

Critical path: the longest bottleneck path.

(62)

(63)

(64)

(65)

Critical path analysis

(66)

(67)

(68)

(69)

Critical path: the longest bottleneck path.

(70)

Improving activities off

the critical path doesn't

help page load.

(71)

●

Model the page load process

●

Build the WProf tool

(72)

Experimental setup

● Location

○ UW Seattle campus network

● Browser

○ WProf-instrumented Chrome

● Web pages

○ 150 out of top 200 Alexa pages

● Page load time

○ Minimum out of 5 repeats

(73)

How much does computation contribute

to page load time?

(74)

Computation is significant

19

Network/Computation as a fraction of page load time

Network

(75)

Computation is significant

19

Network/Computation as a fraction of page load time

Network

Computation

Computation is ~35% of page load time

(median) on the critical path.

(76)

How much does caching help page

load performance?

(77)

●

Caching eliminates 80% Web object

loads

●

It doesn't reduce page load time as

much

21

(78)

●

Caching eliminates 80% Web object

loads

●

It doesn't reduce page load time as

much

●

Caching only eliminates 40% Web

object loads on the critical path

21

(79)

Summary of other results

● Most object downloads are not critical

● JS blocks parsing on 60% top pages

● SPDY doesn't help much as expected

● Minification with mod_pagespeed doesn't

reduce received bytes on the critical path

(80)

Related work

● Industry tools

○ DevTools, Pagespeed Insights

● Academic

○ WebProphet [NSDI'2010]

■ Only consider network time

(81)

Conclusion

● Model page load process

● WProf automatically extracts dependencies

and analyzes critical paths

● WProf can be used to

○ Understand performance of any page load

○ Explain behaviors of current optimizations

○ Perform what-if analysis

Project website: wprof.cs.washington.edu