![Page 1: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/1.jpg)
Demystifying Page Load Performance with WProf
Xiao (Sophia) Wang, Aruna Balasubramanian,Arvind Krishnamurthy, and David Wetherall
University of Washington
![Page 2: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/2.jpg)
Web is the critical part of the Internet
1
![Page 3: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/3.jpg)
Page load is critical
● Amazon can increase 1% revenue by decreasing page load time by 0.1s.
2
![Page 4: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/4.jpg)
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
![Page 5: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/5.jpg)
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
![Page 6: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/6.jpg)
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
![Page 7: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/7.jpg)
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 8: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/8.jpg)
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.
![Page 9: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/9.jpg)
Difficult to understand page load
● Factors that affect page load○ Page structure○ Inter-dependencies between network and
computation activities○ Browser implementations
4
![Page 10: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/10.jpg)
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
![Page 11: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/11.jpg)
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
htmlb.js
c.png
![Page 12: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/12.jpg)
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
htmlb.js
c.png
html
b.js
c.png
![Page 13: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/13.jpg)
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
htmlb.js
c.png
html
b.js
c.png
![Page 14: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/14.jpg)
Overview of our work
● Model the page load process● Build the WProf tool ● Study page load on real pages
![Page 15: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/15.jpg)
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
![Page 16: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/16.jpg)
How a page is loaded
6
![Page 17: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/17.jpg)
How a page is loaded
Concurrencies among the four components
6
![Page 18: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/18.jpg)
How a page is loaded
Dependencies: one component can block others
6
![Page 19: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/19.jpg)
How a page is loaded
A page load starts with a user-initiated request.
http://www.example.com/
6
![Page 20: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/20.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
Object Loader downloads the corresponding Web page.6
![Page 21: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/21.jpg)
How a page is loaded
index.html1 <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
![Page 22: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/22.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
HTML Parser requests embedded objects, i.e., JavaScript.6
![Page 23: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/23.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
Object Loader requests the inlined JS and sends it for evaluation.
main.js...
6
![Page 24: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/24.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
JS evaluation can modify the DOM and its completion resumes HTML parsing.
main.js...
6
![Page 25: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/25.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
HTML continues being parsed and added to the DOM.6
![Page 26: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/26.jpg)
How a page is loaded
index.html1 <html>2 <script src="main.js"/>3 </html>
Rendering Engine progressively renders the page (i.e., layout and painting).
http://www.example.com/
6
![Page 27: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/27.jpg)
How to infer dependencies
● Goal○ Extract as many dependencies as possible across
browsers● Methodology
○ Design test pages○ Examine documents○ Inspect browser code
7
![Page 28: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/28.jpg)
How to infer dependencies
● Goal○ Extract as many dependencies as possible across
browsers● Methodology
○ Design test pages○ Examine documents○ Inspect browser code
7
![Page 29: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/29.jpg)
Reverse engineer page loads with test pages
● Design test pages
8
![Page 30: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/30.jpg)
Reverse engineer page loads with test pages
● Design test pages
HTML
JS CSSIMG
IMG HTML IMG
An example Web page8
![Page 31: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/31.jpg)
Reverse engineer page loads with test pages
● Design test pages
HTML
JS CSSIMG
IMG HTML IMG
○ An object follows another
An example Web page8
![Page 32: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/32.jpg)
Reverse engineer page loads with test pages
● Design test pages
HTML
JS CSSIMG
IMG HTML IMG
○ An object follows another○ An object embeds another
An example Web page8
![Page 33: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/33.jpg)
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
![Page 34: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/34.jpg)
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
![Page 35: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/35.jpg)
Dependency policy categories
● Flow dependency○ Natural order that activities occur
10
![Page 36: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/36.jpg)
Dependency policy categories
● Flow dependency● Output dependency
○ Correctness of execution when multiple processes access to the same resource
10
![Page 37: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/37.jpg)
Dependency policy categories
● Flow dependency● Output dependency● Lazy/Eager binding
○ Tradeoffs between data downloads and page load latencies
10
![Page 38: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/38.jpg)
Dependency policy categories
● Flow dependency● Output dependency● Lazy/Eager binding● Resource constraints
○ Limited computing power or network resources (# TCP conn.)
10
![Page 39: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/39.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
![Page 40: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/40.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
htmlElapsed time
11
![Page 41: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/41.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
htmlElapsed time
c.css
11
![Page 42: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/42.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
htmlElapsed time
c.css
11
![Page 43: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/43.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
htmlElapsed time
c.css
11
![Page 44: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/44.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
html
f.js
Elapsed time
c.css
11
![Page 45: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/45.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
html
f.js
Elapsed time
c.css
11
![Page 46: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/46.jpg)
Output dependencyindex.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
html
f.js
Elapsed time
c.css
11
![Page 47: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/47.jpg)
Dependency policies
12
![Page 48: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/48.jpg)
Dependency policies
12
Flow 6Output 3Lazy/Eager binding 3Resource constraint 2
![Page 49: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/49.jpg)
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
![Page 50: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/50.jpg)
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
![Page 51: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/51.jpg)
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
![Page 52: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/52.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
14
![Page 53: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/53.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine
14
![Page 54: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/54.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
14
![Page 55: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/55.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
- Log activity timings- Track dependencies by using HTML tags under parsing when an activity occurs
14
![Page 56: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/56.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
LightweightOur evaluation suggests negligible performance overhead.
14
![Page 57: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/57.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
Implementation- Built on WebKit- Extended in Chrome and Safari- Written in C++
14
![Page 58: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/58.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
Dependency graphs
Critical paths
14
![Page 59: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/59.jpg)
WProf architecture
Web page instances
Browser extension/plug-in framework
Native browser
Browser Stack
WProf profiler
Object
Loader
HTM
L P
arser
CS
S
Engine
JavaScript
Engine
Rendering E
ngine Activity timing
Dependencies
Dependency graphs
Critical paths
14
![Page 60: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/60.jpg)
<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
![Page 61: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/61.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 62: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/62.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 63: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/63.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 64: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/64.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 65: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/65.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 66: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/66.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 67: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/67.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 68: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/68.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 69: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/69.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
16
![Page 70: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/70.jpg)
Critical path analysis
Critical path: the longest bottleneck path.
Improving activities off the critical path doesn't help page load.
16
![Page 71: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/71.jpg)
Overview of our work
● Model the page load process● Build the WProf tool● Study page load with real pages
![Page 72: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/72.jpg)
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
![Page 73: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/73.jpg)
How much does computation contribute to page load time?
18
![Page 74: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/74.jpg)
Computation is significant
19
Network/Computation as a fraction of page load time
Network
Computation
![Page 75: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/75.jpg)
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.
![Page 76: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/76.jpg)
How much does caching help page load performance?
20
![Page 77: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/77.jpg)
● Caching eliminates 80% Web object loads
● It doesn't reduce page load time as much
21
How much does caching help?
![Page 78: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/78.jpg)
● 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
How much does caching help?
![Page 79: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/79.jpg)
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
![Page 80: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/80.jpg)
Related work
● Industry tools○ DevTools, Pagespeed Insights
● Academic○ WebProphet [NSDI'2010]
■ Only consider network time
23
![Page 81: Demystifying Page Load Performance with WProfwprof.cs.washington.edu/wprof-slides.pdfDemystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind](https://reader033.vdocuments.us/reader033/viewer/2022052021/60350b8fff27490be246b86c/html5/thumbnails/81.jpg)
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