understanding web performance · understanding web performance day 12. 10/7/15 2 1995 2000 2005...
TRANSCRIPT
![Page 1: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/1.jpg)
Understanding Web Performance
Day 12
![Page 2: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/2.jpg)
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
![Page 3: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/3.jpg)
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
![Page 4: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/4.jpg)
Agenda
• Understanding Implication of page load times
• Challenges quantifying Page load times
• WPROF: Capturing Dependencies
• SPDY v HTTP1.1
![Page 5: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/5.jpg)
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?
![Page 6: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/6.jpg)
![Page 7: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/7.jpg)
ADs
Page header
Search Results
![Page 8: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/8.jpg)
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)
![Page 9: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/9.jpg)
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!!!!
![Page 10: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/10.jpg)
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
![Page 11: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/11.jpg)
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
![Page 12: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/12.jpg)
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.
![Page 13: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/13.jpg)
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
![Page 14: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/14.jpg)
Agenda
• Understanding Implication of page load times
• Challenges quantifying Page load times
• WPROF: Capturing Dependencies
• SPDY v HTTP1.1
![Page 15: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/15.jpg)
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>
![Page 16: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/16.jpg)
Difficult to understand page load
5
htmlb.js
c.png
<html> <script src="b.js"></script> <img src="c.png"/></html>
<html> <img src="c.png"/> <script src="b.js"></script></html>
![Page 17: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/17.jpg)
Difficult to understand page load
5
htmlb.js
c.png
html
b.js
c.png
<html> <script src="b.js"></script> <img src="c.png"/></html>
<html> <img src="c.png"/> <script src="b.js"></script></html>
![Page 18: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/18.jpg)
Difficult to understand page load
5
htmlb.js
c.png
html
b.js
c.png
<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.
![Page 19: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/19.jpg)
How a page is loaded
6
![Page 20: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/20.jpg)
How a page is loaded
6
Concurrencies among the four components
![Page 21: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/21.jpg)
How a page is loaded
6
Dependencies: one component can block others
![Page 22: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/22.jpg)
How a page is loaded
A page load starts with a user-initiated request.6
http://www.example.com/
![Page 23: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/23.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 24: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/24.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 25: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/25.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 26: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/26.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 27: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/27.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 28: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/28.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 29: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/29.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). 6
http://www.example.com/
![Page 30: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/30.jpg)
Agenda
• Understanding Implication of page load times
• Challenges quantifying Page load times
• WPROF: Capturing Dependencies
• SPDY v HTTP1.1
![Page 31: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/31.jpg)
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
![Page 32: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/32.jpg)
Reverse engineer page loads with test pages
• Design test pages
An example Web page8
HTML
JS CSSIMG
IMG HTML IMG
![Page 33: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/33.jpg)
What Makes for good Test pages?
• Design test pageso An object follows another
An example Web page8
HTML
JS CSSIMG
IMG HTML IMG
![Page 34: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/34.jpg)
What Makes for good Test pages?
• Design test pageso An object follows anothero An object embeds another
An example Web page8
HTML
JS CSSIMG
IMG HTML IMG
![Page 35: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/35.jpg)
What Makes for good Test pages?
img
• Design test pages
• 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?
![Page 36: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/36.jpg)
What Makes for good Test pages?
img
• Design test pages
• Observe timings from DevTools
9
html
html
js
js
img
HTML
JS IMG
HTML
IMG JS
![Page 37: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/37.jpg)
What Makes for good Test pages?
img
• Design test pages
• Observe timings from DevTools
9
html
html
js
js
img
HTML
JS IMG
HTML
IMG JS
![Page 38: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/38.jpg)
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
![Page 39: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/39.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
![Page 40: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/40.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
Elapsed time
![Page 41: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/41.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
Elapsed time
c.css
![Page 42: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/42.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
Elapsed time
c.css
![Page 43: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/43.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
Elapsed time
c.css
![Page 44: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/44.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
f.js
Elapsed time
c.css
![Page 45: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/45.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
f.js
Elapsed time
c.css
![Page 46: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/46.jpg)
Output dependency
index.html1 <html>2 <link rel="stylesheet" href="c.css">3 <script src="f.js"/> ...
11
html
f.js
Elapsed time
c.css
![Page 47: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/47.jpg)
Agenda
• Understanding Implication of page load times
• Challenges quantifying Page load times
• WPROF: Capturing Dependencies
• SPDY v HTTP1.1
![Page 48: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/48.jpg)
10/7/15 54
![Page 49: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/49.jpg)
HTTP/1.1 problems
10/7/15 55
ClientClient
Server
Server
![Page 50: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/50.jpg)
HTTP/1.1 problems
• Opens too many TCP connections
10/7/15 56
ClientClient
Server
Server
![Page 51: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/51.jpg)
HTTP/1.1 problems
• Opens too many TCP connections• Initiates object transfers strictly by
the client
10/7/15 57
ClientClient
Server
Server
![Page 52: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/52.jpg)
HTTP/1.1 problems
• Opens too many TCP connections• Initiates object transfers strictly by
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****************************************
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
![Page 53: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/53.jpg)
HTTP/1.1 problems
• Opens too many TCP connections• Initiates object transfers strictly by
the client• Compresses only HTTP payloads,
not headers
10/7/15 59
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****************************************
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
CompressedCompressedSPDY is proposed to address these issuesSPDY is proposed to address these issues
![Page 54: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/54.jpg)
How well does SPDY perform?
10/7/15 60
SPDY helps 27% to 60%
SPDY helps 27% to 60%
![Page 55: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/55.jpg)
How well does SPDY perform?
10/7/15 61
SPDY helps 27% to 60%
SPDY helps 27% to 60%
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
![Page 56: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/56.jpg)
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
![Page 57: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/57.jpg)
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
![Page 58: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/58.jpg)
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
![Page 59: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/59.jpg)
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
![Page 60: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/60.jpg)
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
![Page 61: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/61.jpg)
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
![Page 62: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/62.jpg)
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
![Page 63: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/63.jpg)
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
![Page 64: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/64.jpg)
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.
![Page 65: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/65.jpg)
Identify dominant factors
10/7/15 71
lossloss
obj sizeobj size
# obj#
obj
RTTRTT
BWBW
IWIW
Importance?
![Page 66: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/66.jpg)
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
![Page 67: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/67.jpg)
Make HTTP requestsMake HTTP requests
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
![Page 68: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/68.jpg)
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%
![Page 69: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/69.jpg)
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.
![Page 70: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/70.jpg)
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
![Page 71: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/71.jpg)
Make HTTP requestsMake HTTP requests
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
![Page 72: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/72.jpg)
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.
![Page 73: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/73.jpg)
Enhanced policies for SPDY
![Page 74: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/74.jpg)
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
![Page 75: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/75.jpg)
Improving SPDY with server push
• 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
![Page 76: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/76.jpg)
Improving SPDY with server push
• ‘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.
![Page 77: Understanding Web Performance · 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,](https://reader034.vdocuments.us/reader034/viewer/2022052102/603cd38502d77f09722ef9a9/html5/thumbnails/77.jpg)
Concluding Remarks