above the fold time: a graphical approach to a …theory.stanford.edu/~za/aft/aft_slides.pdfgoogle...
TRANSCRIPT
![Page 1: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/1.jpg)
1Google Proprietary
Above the Fold Time:A Graphical Approach to a
Browser Independent Latency Metric
http://www.webperformancecentral.com/wiki/Main_Page
![Page 2: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/2.jpg)
2Google Proprietary
Motivation
Compare latency of different:
- webpages
- browsers
![Page 3: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/3.jpg)
3Google Proprietary
What should latency measure?
New latency measure needed
![Page 4: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/4.jpg)
4Google Proprietary
What is the latency of this page?
Watch video of www.verawang.com loading in IE8
![Page 5: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/5.jpg)
5Google Proprietary
What is the latency of this page?
bottom right video startsbottom right video appears
name brand flashed
(11) (15)
(0) (6) (7)
(20)
![Page 6: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/6.jpg)
6Google Proprietary
Latency: people disagree
Latency should measure how fast:
- functionality becomes available
- content is rendered
- the site “feels”
Latency is subjective
- depends on the particular user
- users perceive and use sites differently
![Page 7: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/7.jpg)
7Google Proprietary
Summary so far
People disagree.
What about browser events?
![Page 8: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/8.jpg)
8Google Proprietary
Latency: browsers disagree
Screens differ at same browser event - load www.bing.com in FF and IE
Event triggers differ between browsers - IE does not wait for extern JS in websearch results page - Firefox and Chrome do wait for extern JS
Onload Event in IEOnload Event in Firefox
![Page 9: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/9.jpg)
9Google Proprietary
Summary so far
People disagree.
Browsers disagree.
Agreement is essential for comparison.
Latency metric: - agrees with itself (selects comparable images) - directly corresponds to our users' experiences
![Page 10: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/10.jpg)
10Google Proprietary
Above the fold time (AFT) latency metric
AFT: Time when content that stops changing and is above-the-fold reaches its final state.
AFT selects comparable images - content in final state is equivalent - regardless of progressive rendering - regardless of os, network, or browser variability
![Page 11: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/11.jpg)
11Google Proprietary
AFT in Vera Wang example
bottom right video startsbottom right video appears
name brand flashed
White text on bottom right video is latest content that doesn't change after it appears
AFT(11) (15)
(0) (6) (7)
(20)
![Page 12: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/12.jpg)
12Google Proprietary
Paradigm shift: coder → user perspective
Coder perspective: measure point in sequence of code execution
User perpective: measure point in sequence of graphical changes on the screen
AFT directly correspond to our users' experiences
![Page 13: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/13.jpg)
13Google Proprietary
Summary
People disagree.
Browsers disagree.
AFT agrees (selects comparable images). AFT corresponds directly to users' experiences.
![Page 14: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/14.jpg)
14Google Proprietary
AFT challenges
AFT: Time when content that stops changing and is above-the-fold reaches its final state.
Distinguish - continuous animation - finite animation - progressive rendering - frame flow
![Page 15: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/15.jpg)
15Google Proprietary
Continuous animation changes late in load
Early Cutoff - upper bound after which the page is surely loaded - content that changes after early cutoff is 'continuous'
![Page 16: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/16.jpg)
16Google Proprietary
Latest of Early example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
![Page 17: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/17.jpg)
17Google Proprietary
Latest of Early example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
![Page 18: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/18.jpg)
18Google Proprietary
Latest of Early example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
Latest of Early
![Page 19: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/19.jpg)
19Google Proprietary
Animation ending before early cutoff - www.verawang.com - www.bing.com (flashing squares) - www.newyorktimes.com (watch page load video) - ad that animates 10s then stops
New content or animation after early cutoff - www.figaro.fr (watch page load video) - youtube watch page (watch page load video)
Automated tag of 'low confidence' results
Latest of Early: low confidence results
![Page 20: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/20.jpg)
20Google Proprietary
Low confidence if - pixels change frequently, then stop early in load - pixels change seldom, then change late in load
Pixels that change frequently ↔ change >5 times
Change frequency determines confidence
![Page 21: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/21.jpg)
21Google Proprietary
Latest of Seldom Changed example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
Latest of Early
Change late in load that is not animation(like www.figaro.fr example)
![Page 22: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/22.jpg)
22Google Proprietary
Latest of Seldom Changed example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
Latest of Early
Change late in load that is not animation(like www.figaro.fr example)
![Page 23: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/23.jpg)
23Google Proprietary
Latest of Seldom Changed example
start end
Early Cutoff20secs
Time
Pixe
l
CB
D
A
Latest of Early
Latest ofSeldom Changed
Change late in load that is not animation(like www.figaro.fr example)
Low confidence result
![Page 24: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/24.jpg)
24Google Proprietary
Latest of Seldom Changed example
Continuous animation that ends early(like www.newyorktimes.com example)
![Page 25: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/25.jpg)
25Google Proprietary
Latest of Seldom Changed example
start end
Time
Pixe
l
CB
D
A
Latest of Early
Latest ofSeldom Changed
Continuous animation that ends early(like www.newyorktimes.com example)
Low confidence result
Early Cutoff20secs
![Page 26: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/26.jpg)
26Google Proprietary
Latest of Seldom Changed example
start end
Time
Pixe
l
CB
D
A
Latest of Early
Latest ofSeldom Changed
Limited animation that ends early(like www.verawang.com example)
High confidence result
Early Cutoff20secs
![Page 27: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/27.jpg)
27Google Proprietary
How many changes before a pixel ignored?
5 changes recommended: - 100% sites with no animation have ≤ 5 changes (for 20 manually selected from Alexa top 100) - 85% high confidence (for 40 randomly selected from Alexa top 100)
Determining animation cutoff
![Page 28: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/28.jpg)
28Google Proprietary
High confidence results on 85% of popular urlsHigh confidence results are comparable
Satifies two motivating use cases: - comparing most webpages - comparing browsers
AFT Algorithm summary
![Page 29: Above the Fold Time: A Graphical Approach to a …theory.stanford.edu/~za/AFT/aft_slides.pdfGoogle Proprietary 6 Latency: people disagree Latency should measure how fast: - functionality](https://reader035.vdocuments.site/reader035/viewer/2022070819/5f1a479bc864970d783fa2c8/html5/thumbnails/29.jpg)
29Google Proprietary
End