Demystifying Page Load Performance with WProf Xiao (Sophia) Wang, - - PowerPoint PPT Presentation

▶
demystifying page load performance with wprof
SMART_READER_LITE
LIVE PREVIEW

Demystifying Page Load Performance with WProf Xiao (Sophia) Wang, - - PowerPoint PPT Presentation

Oct 24, 2023 188 likes •1.01k views

Demystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind Krishnamurthy, and David Wetherall University of Washington Web is the critical part of the Internet 1 Page load is critical Amazon can

slide-1
SLIDE 1

Demystifying Page Load Performance with WProf

Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind Krishnamurthy, and David Wetherall University of Washington

slide-2
SLIDE 2

Web is the critical part of the Internet

1

slide-3
SLIDE 3

Page load is critical

  • Amazon can increase 1% revenue by

decreasing page load time by 0.1s.

2

slide-4
SLIDE 4

Page load is critical

  • Amazon can increase 1% revenue by

decreasing page load time by 0.1s.

  • Page load is slow even on top 200 websites

but slow

2

slide-5
SLIDE 5

Page load is critical

  • Amazon can increase 1% revenue by

decreasing page load time by 0.1s.

  • Page load is slow even on top 200 websites

Median page load time is 3 seconds.

but slow

2

slide-6
SLIDE 6

Page load is critical

  • Amazon can increase 1% revenue by

decreasing page load time by 0.1s.

  • Page load is slow even on top 200 websites

A few top pages take more than 10 seconds to load.

but slow

2

slide-7
SLIDE 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/. *http://www.stevesouders.com/

slide-8
SLIDE 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/

Page load process is poorly understood.

slide-9
SLIDE 9

Difficult to understand page load

  • Factors that affect page load

○ Page structure ○ Inter-dependencies between network and computation activities ○ Browser implementations

4

slide-10
SLIDE 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

slide-11
SLIDE 11

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 html b.js c.png

slide-12
SLIDE 12

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 html b.js c.png html b.js c.png

slide-13
SLIDE 13

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>

Understanding dependencies is the key to understand page load.

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

slide-14
SLIDE 14

Overview of our work

  • Model the page load process
  • Build the WProf tool
  • Study page load on real pages
slide-15
SLIDE 15

Overview of our work

  • Model the page load process

○ How a page is loaded? ○ How to infer dependencies?

  • Build the WProf tool
  • Study page load on real pages
slide-16
SLIDE 16

How a page is loaded

6

slide-17
SLIDE 17

How a page is loaded

Concurrencies among the four components

6

slide-18
SLIDE 18

How a page is loaded

Dependencies: one component can block

  • thers

6

slide-19
SLIDE 19

How a page is loaded

A page load starts with a user-initiated request.

http://www.example.com/

6

slide-20
SLIDE 20

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> Object Loader downloads the corresponding Web page.

6

slide-21
SLIDE 21

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> Upon receiving the first chunk of the root page, the HTML Parser starts to parse the page.

6

slide-22
SLIDE 22

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> HTML Parser requests embedded objects, i.e., JavaScript.

6

slide-23
SLIDE 23

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> Object Loader requests the inlined JS and sends it for evaluation. main.js

... 6

slide-24
SLIDE 24

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> JS evaluation can modify the DOM and its completion resumes HTML parsing. main.js

... 6

slide-25
SLIDE 25

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> HTML continues being parsed and added to the DOM.

6

slide-26
SLIDE 26

How a page is loaded

index.html 1 <html> 2 <script src="main.js"/> 3 </html> Rendering Engine progressively renders the page (i.e., layout and painting).

http://www.example.com/

6

slide-27
SLIDE 27

How to infer dependencies

  • Goal

○ Extract as many dependencies as possible across browsers

  • Methodology

○ Design test pages ○ Examine documents ○ Inspect browser code

7

slide-28
SLIDE 28

How to infer dependencies

  • Goal

○ Extract as many dependencies as possible across browsers

  • Methodology

○ Design test pages ○ Examine documents ○ Inspect browser code

7

slide-29
SLIDE 29

Reverse engineer page loads with test pages

  • Design test pages

8

slide-30
SLIDE 30

Reverse engineer page loads with test pages

  • Design test pages

HTML JS CSS IMG IMG HTML IMG

An example Web page

8

slide-31
SLIDE 31

Reverse engineer page loads with test pages

  • Design test pages

HTML JS CSS IMG IMG HTML IMG

○ An object follows another An example Web page

8

slide-32
SLIDE 32

Reverse engineer page loads with test pages

  • Design test pages

HTML JS CSS IMG IMG HTML IMG

○ An object follows another ○ An object embeds another An example Web page

8

slide-33
SLIDE 33

img

Reverse engineer page loads with test pages

  • Design test pages
  • Observe timings from DevTools

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

slide-34
SLIDE 34

img

Reverse engineer page loads with test pages

  • Design test pages
  • Observe timings from DevTools

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

slide-35
SLIDE 35

Dependency policy categories

  • Flow dependency

○ Natural order that activities occur

10

slide-36
SLIDE 36

Dependency policy categories

  • Flow dependency
  • Output dependency

○ Correctness of execution when multiple processes access to the same resource

10

slide-37
SLIDE 37

Dependency policy categories

  • Flow dependency
  • Output dependency
  • Lazy/Eager binding

○ Tradeoffs between data downloads and page load latencies

10

slide-38
SLIDE 38

Dependency policy categories

  • Flow dependency
  • Output dependency
  • Lazy/Eager binding
  • Resource constraints

○ Limited computing power or network resources (# TCP conn.)

10

slide-39
SLIDE 39

Output dependency

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

slide-40
SLIDE 40

Output dependency

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

slide-41
SLIDE 41

Output dependency

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

slide-42
SLIDE 42

Output dependency

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

slide-43
SLIDE 43

Output dependency

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

slide-44
SLIDE 44

Output dependency

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

slide-45
SLIDE 45

Output dependency

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

slide-46
SLIDE 46

Output dependency

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

slide-47
SLIDE 47

Dependency policies

12

slide-48
SLIDE 48

Dependency policies

12

Flow

6

Output

3

Lazy/Eag er binding 3 Resource constraint 2

slide-49
SLIDE 49

Dependency policies across browsers

Dependency IE Firefox WebKit Output all no O3 no O3 Late binding all all all Eager binding Preloads img, js, css Preloads img, js, css Preloads css, js Net resource 6 conn. 6 conn. 6 conn.

13

slide-50
SLIDE 50

Dependency policies across browsers

Dependency IE Firefox WebKit Output all no O3 no O3 Late binding all all all Eager binding Preloads img, js, css Preloads img, js, css Preloads css, js Net resource 6 conn. 6 conn. 6 conn. O3: CSS downloads and evaluation block HTML parsing.

13

slide-51
SLIDE 51

Overview of our work

  • Model the page load process
  • Build the WProf tool

○ Profiling in browsers ○ Generating dependency graphs ○ Analyzing critical paths

  • Study page load on real pages
slide-52
SLIDE 52

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

14

slide-53
SLIDE 53

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine 14

slide-54
SLIDE 54

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies 14

slide-55
SLIDE 55

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies

  • Log activity timings
  • Track dependencies

by using HTML tags under parsing when an activity occurs

14

slide-56
SLIDE 56

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies

Lightweight Our evaluation suggests negligible performance

  • verhead.

14

slide-57
SLIDE 57

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies

Implementation

  • Built on WebKit
  • Extended in Chrome

and Safari

  • Written in C++

14

slide-58
SLIDE 58

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies Dependency graphs Critical paths 14

slide-59
SLIDE 59

WProf architecture

Web page instances Browser extension/plug-in framework Native browser

Browser Stack

WProf profiler Object Loader HTML Parser CSS Engine JavaScript Engine Rendering Engine Activity timing Dependen cies Dependency graphs Critical paths 14

slide-60
SLIDE 60

<html> <head> <link rel="stylesheet" src="./main.css"> <script src="./main.js" /> </head> <!--request a JS--> <body onload="..."> <img src="test.png" /> </body> </html>

Dependency graph

15

slide-61
SLIDE 61

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-62
SLIDE 62

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-63
SLIDE 63

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-64
SLIDE 64

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-65
SLIDE 65

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-66
SLIDE 66

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-67
SLIDE 67

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-68
SLIDE 68

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-69
SLIDE 69

Critical path analysis

Critical path: the longest bottleneck path.

16

slide-70
SLIDE 70

Critical path analysis

Critical path: the longest bottleneck path.

Improving activities off the critical path doesn't help page load.

16

slide-71
SLIDE 71

Overview of our work

  • Model the page load process
  • Build the WProf tool
  • Study page load with real pages
slide-72
SLIDE 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

17

slide-73
SLIDE 73

How much does computation contribute to page load time?

18

slide-74
SLIDE 74

Computation is significant

19

Network/Computation as a fraction of page load time Network Computation

slide-75
SLIDE 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.

slide-76
SLIDE 76

How much does caching help page load performance?

20

slide-77
SLIDE 77
  • Caching eliminates 80% Web object

loads

  • It doesn't reduce page load time as

much

21

How much does caching help?

slide-78
SLIDE 78
  • Caching eliminates 80% Web object

loads

  • It doesn't reduce page load time as

much

  • Caching only eliminates 40% Web
  • bject loads on the critical path

21

How much does caching help?

slide-79
SLIDE 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

22

slide-80
SLIDE 80

Related work

  • Industry tools

○ DevTools, Pagespeed Insights

  • Academic

○ WebProphet [NSDI'2010] ■ Only consider network time

23

slide-81
SLIDE 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

24