speed in four quarters :: a technique to compare web page performance
TRANSCRIPT
![Page 1: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/1.jpg)
Four Quarters of Speed
Oliver TseSeptember 20, 2016
A Technique to Compare Web Page Performance
![Page 2: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/2.jpg)
Agenda● Learn about Four Quarter Analysis ( 4QA )● Apply to -
○ LinkedIn Lite for India○ LinkedIn Neptune○ LinkedIn Oz○ Facebook
![Page 3: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/3.jpg)
ObjectiveBy the time we’re done, you’ll be able to apply this divide and analyze performance technique and look at the network, CPU and visual progress to answer the question, “Which assets, what processes, when and impact?”
![Page 4: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/4.jpg)
Speed is how fast we get to visual complete
![Page 5: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/5.jpg)
Four Quarter Analysis ( 4QA )1. Find two or more web apps2. Identify visual complete3. Divide visual complete into four quarters4. Analyze each quarter
![Page 6: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/6.jpg)
ToolsWebpagetest ( WPT ) tools -
1. Asset waterfall2. CPU processing breakdown3. CPU execution ( aka Chrome Timeline )4. Visual progression ( Filmstrip View )
![Page 7: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/7.jpg)
Methodology● 9 Webpagetest initial runs set private ● Browser - Chrome 53.0.2785.116● Location - Dulles, Virginia● Cookie authentication● Speed - Cable modem● Pick median run
![Page 8: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/8.jpg)
Head to Head LinkedIn Lite for India
m.facebook.com
![Page 9: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/9.jpg)
![Page 10: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/10.jpg)
![Page 11: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/11.jpg)
# Requests Page Weight
LinkedIn Lite for India 22 567K
m.facebook.com 47 540K
![Page 12: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/12.jpg)
Q1 Q2 Q3 Q4
0 - 0.85s 0.86s - 1.71s 1.72s - 2.55s 2.56s - 3.4s
![Page 13: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/13.jpg)
![Page 14: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/14.jpg)
![Page 15: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/15.jpg)
![Page 16: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/16.jpg)
Show Video
![Page 17: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/17.jpg)
![Page 18: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/18.jpg)
![Page 19: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/19.jpg)
![Page 20: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/20.jpg)
LinkedIn Lite for India
m.facebook.com
![Page 21: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/21.jpg)
Meaningful First Paint Visually Complete
LinkedIn Lite for India
m.facebook.com
![Page 22: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/22.jpg)
Why is m.facebook.com faster?● Much shorter TTFB ( 6x ) though HTML is larger ( 3x )● Early flush● JavaScript executions are short
![Page 23: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/23.jpg)
Head to Head LinkedIn Lite for India
mbasic.facebook.com
![Page 24: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/24.jpg)
![Page 25: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/25.jpg)
![Page 26: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/26.jpg)
# Requests Page Weight
LinkedIn Lite for India 22 567K
mbasic.facebook.com 25 98K
![Page 27: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/27.jpg)
Q1 Q2 Q3 Q4
0 - 0.85s 0.86s - 1.71s 1.72s - 2.55s 2.56s - 3.4s
![Page 28: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/28.jpg)
![Page 29: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/29.jpg)
![Page 30: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/30.jpg)
![Page 31: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/31.jpg)
Show Video
![Page 32: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/32.jpg)
![Page 33: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/33.jpg)
![Page 34: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/34.jpg)
![Page 35: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/35.jpg)
LinkedIn Lite for India
mbasic.facebook.com
![Page 36: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/36.jpg)
Meaningful First Paint Visually Complete
LinkedIn Lite for India
mbasic.facebook.com
m.facebook.com
![Page 37: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/37.jpg)
Why is mbasic faster?● Very lightweight ( 6x less LLI )● TTFB faster ( 6x faster )● No JavaScript
![Page 38: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/38.jpg)
Head to Head LinkedIn Neptune
LinkedIn Oz
![Page 39: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/39.jpg)
![Page 40: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/40.jpg)
![Page 41: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/41.jpg)
# Requests Page Weight
Neptune 106 3.7M
Oz 132 1.5M
![Page 42: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/42.jpg)
Q1 Q2 Q3 Q4
0 - 5.12s 5.13s - 10.3s 10.31s - 15.4s 15.41s - 20.5s
![Page 43: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/43.jpg)
Neptune Oz
![Page 44: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/44.jpg)
![Page 45: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/45.jpg)
![Page 46: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/46.jpg)
Show Video
![Page 47: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/47.jpg)
![Page 48: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/48.jpg)
![Page 49: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/49.jpg)
![Page 50: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/50.jpg)
Neptune
Oz
![Page 51: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/51.jpg)
Meaningful First Paint Visually Complete
Neptune
Oz
![Page 52: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/52.jpg)
Why is Oz faster?● JavaScript doesn’t block critical path to rendering● Render first. JavaScript second.
![Page 53: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/53.jpg)
Head to HeadNeptune
Oz
![Page 54: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/54.jpg)
![Page 55: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/55.jpg)
![Page 56: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/56.jpg)
![Page 57: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/57.jpg)
# Requests Page Weight
Oz 132 1.5M
Neptune 106 3.7M
Facebook 190 1.9M
![Page 58: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/58.jpg)
Q1 Q2 Q3 Q4
0 - 5.12s 5.13s - 10.3s 10.31s - 15.4s 15.41s - 20.5s
![Page 59: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/59.jpg)
FacebookNeptuneOz
![Page 60: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/60.jpg)
![Page 61: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/61.jpg)
![Page 62: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/62.jpg)
Show Video
![Page 63: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/63.jpg)
![Page 64: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/64.jpg)
![Page 65: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/65.jpg)
![Page 66: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/66.jpg)
Neptune
Oz
![Page 67: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/67.jpg)
Meaningful First Paint Visually Complete
Neptune
Oz
![Page 68: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/68.jpg)
Why is Facebook faster?● HTTP/2● JavaScript not render blocking
![Page 69: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/69.jpg)
Wrap Up1. Identify a stop point ( ex. Visual complete )2. Divide performance into quarters3. Analyze each quarter for network, CPU and visual progress
![Page 70: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/70.jpg)
Wrap Up Redux● Having fewer requests doesn’t mean you’re faster● Server side isn’t always faster than client side
rendering● Run JavaScript expeditiously to minimize render blocking
![Page 72: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/72.jpg)
DefinitionsTime to First Byte ( TTFB ) - The time when the browser receives the first byte from the server
Visual Complete - Occurs when all visual elements appear above the fold and the page is interactable
![Page 73: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/73.jpg)
Resources● Neptune - https://www.linkedin.com/m/● Oz - https://www.linkedin.com● Facebook - https://www.facebook.com● Facebook Mobile Web - https://m.facebook.com● Facebook mbasic - https://mbasic.facebook.com
![Page 74: Speed in Four Quarters :: A Technique to Compare Web Page Performance](https://reader031.vdocuments.mx/reader031/viewer/2022021423/58aa014b1a28abec248b609d/html5/thumbnails/74.jpg)
Resources cont’d● HTTP/2● Webpagetest Definitions● LinkedIn Lite for India ( LLI ) v m.facebook.com● LLI v m.facebook.com v mbasic.facebook.com● Neptune v Oz● Neptune v Oz v www.facebook.com