Page Load Performance Optimization
Demystifying Page Load
Performance
with WProf
Aruna Balasubramanian
With
Xiao (Sophia) Wang,
Arvind Krishnamurthy, and David Wetherall
University of Washington
Web page loads are extremely critical
•
Example:
Amazon can
increase 1% revenue
by decreasing page
load time by 0.1s.
•
…but page load is
often very slow
Web
browsers are
the de-facto standard
of accessing the Internet
Page load is critical
, but often slow
•
Amazon can increase 1% revenue by decreasing
page load time by 0.1s.
M
a
n
y
t
e
c
h
n
i
q
u
e
s
a
i
m
t
o
o
p
t
i
m
i
z
e
p
a
g
e
l
o
a
d
t
i
m
e
•
Best practices: JaveScript/CSS placement, Image
minification, …
•
Server placement: CDNs
•
Web pages and cache: mod_pagespeed, Silo
•
TCP/DNS: TCP fast open, ASAP, DNS pre-resolution, TCP
pre-connect
•
Application level: SPDY
…, but optimizations don
’
t always work.
…because , page load bottlenecks are not
well understood.
•
Page load process is not strictly streamlined
•
Page load activities are inter-dependent, leading to
bottlenecks
Dependency example
<html>
<script src="b.js"></script>
<img src="c.png"/>
</html>
<html>
<img src="c.png"/>
<script src="b.js"></script>
</html>
html
b.js
c.png
html
b.js
c.png
HTML depends on JS completion
HTML does not depend on image loads
Example: Dependency and bottleneck
<html>
<script src="b.js"></script>
<img src="c.png"/>
</html>
<html>
<img src="c.png"/>
<script src="b.js"></script>
</html>
html
html
b.js
c.png
b.js
c.png
b.js
Possible optimization: Make JS loads faster
Dependency and page structure key are the key
to identifying bottlenecks
Talk
Overview
•
Extract dependency policies
•
WProf: Compute bottleneck for a given page
structure
•
Study page load on real pages
P
age
load
primer
http://www.example.com/
P
age
load
primer
index.html
1 <html>
2 <script src="main.js"/>
3 </html>
P
age
load
primer
index.html
1
<
h
t
m
l
>
2 <script src="main.js"/>
3 </html>
P
age
load
primer
index.html
1 <html>
2
<
s
c
r
i
p
t
s
r
c
=
"
m
a
i
n
.
j
s
"
/
>
3 </html>
P
age
load
primer
index.html
1 <html>
2
<
s
c
r
i
p
t
s
r
c
=
"
m
a
i
n
.
j
s
"
/
>
3 </html>
Shared
object
P
age
load
primer
index.html
1 <html>
2 <script src="main.js"/>
3
<
/
h
t
m
l
>
P
age
load
primer
index.html
1 <html>
2 <script src="main.js"/>
3 </html>
http://www.example.com/
Methodology to
infer dependencies
o
Design test pages
o
Examine document
entation
o
Inspect browser code
img
Test pages (1 of 2)
html
js
Insert delays
Suggests the JS loads affects image load
Test pages (2 of 2)
html
js
img
html
js
img
Insert delays
Suggests image loads *does not* affect JS load
Reverse engineer page loads with test
pages
•
Use developer tools to measure timing
An example Web page
8
Reverse engineer page loads with test
pages
•
Use developer tools to measure timing
o
An object follows another
An example Web page
8
Reverse engineer page loads with test
pages
•
Use developer tools to measure timing
o
An object follows another
o
An object embeds another
An example Web page
8
Dependency policies
Dependency policies across browsers
O3: CSS downloads and evaluation block HTML parsing.
Overview
•
Extract dependency policies
•
WProf: Compute bottleneck for a given page
structure
•
Study page load on real pages
WProf architecture
Web page instances
Browser extension/plug-in
framework
Native browser
B
r
o
w
s
e
r
S
t
a
c
k
WProf architecture
Web page instances
Browser extension/plug-in
framework
Native browser
B
r
o
w
s
e
r
S
t
a
c
k
WProf architecture
Web page instances
Browser extension/plug-in
framework
Native browser
B
r
o
w
s
e
r
S
t
a
c
k
Activity
timing
Dependen
cies
WProf architecture
Web page instances
Browser extension/plug-in
framework
Native browser
B
r
o
w
s
e
r
S
t
a
c
k
Activity
timing
Dependen
cies
Implementation
- Built on WebKit
- Extended in Chrome
and Safari
- Written in C++
W
P
r
o
f
a
r
c
h
i
t
e
c
t
u
r
e
Web page instances
Browser extension/plug-in
framework
Native browser
B
r
o
w
s
e
r
S
t
a
c
k
Activity
timing
Dependen
cies
Dependency graphs
Bottleneck
paths
<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
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Critical path analysis
Critical path: the longest bottleneck path.
Overview
•
Extract dependency policies
•
WProf: Compute bottleneck of page structure
•
Study page load on real pages
Experimental setup
•
Location
s
o
UW campus
, DSL home, UMass campus
•
Browser
o
WProf-instrumented Chrome
•
Web pages
o
150 out of top 200 Alexa pages
•
Page load time
o
Minimum out of 5 repeats
How much does the network contribute to
page load time?
Computation is significant
Network/Computation as a fraction of page load
time
N
e
t
w
o
r
k
C
o
m
p
u
t
a
t
i
o
n
Computation is significant
N
e
t
w
o
r
k
C
o
m
p
u
t
a
t
i
o
n
Computation is ~35% of page load time
(median) on the critical path.
How much does caching help page
load performance?
•
Caching eliminates 80% Web object loads
•
It doesn't reduce page load time as much
H
o
w
m
u
c
h
d
o
e
s
c
a
c
h
i
n
g
h
e
l
p
?
•
Caching only eliminates 40% Web object loads on
the critical path
C
o
n
c
l
u
s
i
o
n
•
Understanding bottleneck is key to improving
the page load process
•
WProf
extracts page load bottlenecks at scale
•
WProf has potential to improve existing page
load optimization techniques
W
ebsite: wprof.cs.washington.edu
Overview
•
Extract dependency policies
•
Compute bottleneck performance path
•
Study page load on real pages
•
What next?
What next with WProf?
•
How speedy is SPDY?
•
What about mobile browsers?
What is SPDY?
•
Replacement HTTP protocol by Google
o
Adopted by Twitter, Amazon, Facebook,…
o
Basis for HTTP/2
•
Key ideas:
o
Multiplex HTTP over a single TCP
o
Header compression
o
Server push*
Is SPDY really speedy?
SPDY on Google’s production server
Our lab experiments
Where we wrong?
•
SPDY performance depends on many factors
o
Google tunes many many parameters.
•
Comparing CDF across web pages insufficient
o
Need to compare load times per web page
…, but there is too much variation in page load time
S
P
D
Y
p
e
r
f
o
r
m
a
n
c
e
c
a
n
v
a
r
y
a
c
r
o
s
s
p
a
g
e
s
(
a
n
d
i
s
v
a
r
i
a
b
l
e
)
Flag page
Reduce variability using WProf
•
Epload tool
o
Emulate page load process
o
Include dependencies, but keep computation
constant.
o
Systematically experiment under varying
conditions.
S
P
D
Y
h
e
l
p
s
a
l
o
t
,
b
u
t
c
a
n
a
l
s
o
h
u
r
t
.
P
e
r
f
o
r
m
a
n
c
e
v
a
r
i
e
s
w
i
t
h
n
e
t
w
o
r
k
.
S
P
D
Y
h
e
l
p
s
S
P
D
Y
h
u
r
t
s
10ms RTT, 100 Mbps bandwidth
S
P
D
Y
h
u
r
t
s
S
P
D
Y
h
e
l
p
s
H
o
w
t
o
m
a
k
e
S
P
D
Y
b
e
t
t
e
r
?
•
Align TCP behavior with SPDY
•
Use server push feature with WProf
dependencies
B
a
c
k
u
p
s
l
i
d
e
s
Does computation (e.g., HTML parsing,
JavaScript evaluation) continuously
happen?
N
e
t
w
o
r
k
d
o
w
n
l
o
a
d
s
o
f
t
e
n
b
l
o
c
k
p
a
r
s
i
n
g
60% top pages have parsing-blocking
JavaScript.
Fractions of network time to total page load time
T
o
o
l
s
t
o
u
n
d
e
r
s
t
a
n
d
p
a
g
e
l
o
a
d
•
Firebug: a "waterfall" graph of twitter.com
•
Other tools
o
WebProphet, Google Pagespeed Insights
Why is the request made
at this time, not earlier?
M
a
n
y
t
e
c
h
n
i
q
u
e
s
a
i
m
t
o
o
p
t
i
m
i
z
e
p
a
g
e
l
o
a
d
t
i
m
e
•
Example: CSS image sprites
o
Merging small images into a big one
o
Unclear how much it helps because images are
fetched in parallel
Elapsed time
A
b
i
g
i
m
a
g
e
M
a
n
y
s
m
a
l
l
i
m
a
g
e
s
Elapsed time
.
.
.
Page load time
using a big image
Page load time
using small images
3
C
a
c
h
i
n
g
d
o
e
s
n
'
t
h
e
l
p
p
e
r
f
o
r
m
a
n
c
e
a
s
m
u
c
h
a
s
#
r
e
d
u
c
e
d
o
b
j
e
c
t
s
# objects reduced due to hot loads
Caching reduced 80% Web objects in
overall, but only 40% on the critical path.
23
Optimizing page load performance is crucial for enhancing user experience and increasing revenue. This article delves into the complexities of page load times, identifies common bottlenecks, and explores optimization techniques. Examples and insights from research conducted by WProf shed light on the interdependence of various page load activities. Discover the importance of dependency analysis in identifying optimization opportunities.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Demystifying Page Load Performance with WProf Aruna Balasubramanian With Xiao (Sophia) Wang, Arvind Krishnamurthy, and David Wetherall University of Washington
Web page loads are extremely critical Example: Amazon can increase 1% revenue by decreasing page load time by 0.1s. but page load is often very slow
Page load is critical, but often slow Amazon can increase 1% revenue by decreasing page load time by 0.1s. A few top pages take more than 10 seconds to load. Median page load time is 3 seconds.
Many techniques aim to optimize page load time Best practices: JaveScript/CSS placement, Image minification, Server placement: CDNs Web pages and cache: mod_pagespeed, Silo TCP/DNS: TCP fast open, ASAP, DNS pre-resolution, TCP pre-connect Application level: SPDY , but optimizations don t always work.
because , page load bottlenecks are not well understood. Page load process is not strictly streamlined Page load activities are inter-dependent, leading to bottlenecks
Dependency example <html> <script src="b.js"></script> <img src="c.png"/> </html> html HTML depends on JS completion b.js c.png <html> <img src="c.png"/> <script src="b.js"></script> </html> HTML does not depend on image loads html c.png b.js
Example: Dependency and bottleneck Possible optimization: Make JS loads faster <html> <script src="b.js"></script> <img src="c.png"/> </html> html b.js c.png <html> <img src="c.png"/> <script src="b.js"></script> </html> html c.png b.js b.js Dependency and page structure key are the key to identifying bottlenecks
Talk Overview Extract dependency policies WProf: Compute bottleneck for a given page structure Study page load on real pages
Methodology to infer dependencies o Design test pages o Examine documententation o Inspect browser code
Test pages (1 of 2) html HTML js img JS IMG Insert delays html js img Suggests the JS loads affects image load
Test pages (2 of 2) html HTML img js IMG JS Insert delays html img js Suggests image loads *does not* affect JS load
Reverse engineer page loads with test pages Use developer tools to measure timing HTML JS IMG CSS IMG HTML IMG An example Web page 8
Reverse engineer page loads with test pages Use developer tools to measure timing o An object follows another HTML JS IMG CSS IMG HTML IMG An example Web page 8
Reverse engineer page loads with test pages Use developer tools to measure timing o An object follows another o An object embeds another HTML JS IMG CSS IMG HTML IMG An example Web page 8
Dependency policies across browsers Dependency IE Firefox WebKit Output all no O3 no O3 Late binding all all all Eager binding Preloads Preloads img, js, css Preloads css, js img, js, css Net resource 6 conn. 6 conn. 6 conn. O3: CSS downloads and evaluation block HTML parsing.
Overview Extract dependency policies WProf: Compute bottleneck for a given page structure Study page load on real pages
WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser
WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler JavaScript Rendering Loader Engine Engine Engine Parser Object HTML CSS
WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler JavaScript Rendering Loader Engine Engine Engine Parser Object HTML CSS Activity timing Dependen cies
WProf architecture Browser Stack Web page instances Bottleneck paths Browser extension/plug-in framework Native browser Dependency graphs WProf profiler JavaScript Rendering Loader Engine Engine Engine Parser Object HTML CSS Activity timing Dependen cies
Dependency graph <html> <head> <link rel="stylesheet" src="./main.css"> <script src="./main.js" /> </head> <!--request a JS--> <body onload="..."> <img src="test.png" /> </body> </html>
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path.
Critical path analysis Critical path: the longest bottleneck path. Improving activities off the critical path doesn't help page load.
Overview Extract dependency policies WProf: Compute bottleneck of page structure Study page load on real pages
Experimental setup Locations o UW campus, DSL home, UMass campus Browser o WProf-instrumented Chrome Web pages o 150 out of top 200 Alexa pages Page load time o Minimum out of 5 repeats
How much does the network contribute to page load time?
Computation is significant Network Computation Network/Computation as a fraction of page load time
Computation is significant Network Computation Computation is ~35% of page load time (median) on the critical path.
How much does caching help page load performance?
How much does caching help? 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
Conclusion Understanding bottleneck is key to improving the page load process WProf extracts page load bottlenecks at scale WProf has potential to improve existing page load optimization techniques Website: wprof.cs.washington.edu
Overview Extract dependency policies Compute bottleneck performance path Study page load on real pages What next?
What next with WProf? How speedy is SPDY? What about mobile browsers?
What is SPDY? Replacement HTTP protocol by Google oAdopted by Twitter, Amazon, Facebook, oBasis for HTTP/2 Key ideas: oMultiplex HTTP over a single TCP oHeader compression oServer push*
Is SPDY really speedy? SPDY on Google s production server Our lab experiments
Where we wrong? SPDY performance depends on many factors o Google tunes many many parameters. Comparing CDF across web pages insufficient o Need to compare load times per web page , but there is too much variation in page load time
SPDY performance can vary across pages (and is variable) Twitter Flag page
Reduce variability using WProf Epload tool oEmulate page load process oInclude dependencies, but keep computation constant. oSystematically experiment under varying conditions.
SPDY helps a lot, but can also hurt. Performance varies with network. 10ms RTT, 100 Mbps bandwidth SPDY hurts SPDY helps 100ms RTT, 100 Mbps bandwidth SPDY hurts SPDY helps
How to make SPDY better? Align TCP behavior with SPDY Use server push feature with WProf dependencies
