speed in four quarters :: a technique to compare web page performance
TRANSCRIPT
Four Quarters of Speed
Oliver TseSeptember 20, 2016
A Technique to Compare Web Page Performance
Agenda● Learn about Four Quarter Analysis ( 4QA )● Apply to -
○ LinkedIn Lite for India○ LinkedIn Neptune○ LinkedIn Oz○ Facebook
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?”
Speed is how fast we get to visual complete
Four Quarter Analysis ( 4QA )1. Find two or more web apps2. Identify visual complete3. Divide visual complete into four quarters4. Analyze each quarter
ToolsWebpagetest ( WPT ) tools -
1. Asset waterfall2. CPU processing breakdown3. CPU execution ( aka Chrome Timeline )4. Visual progression ( Filmstrip View )
Methodology● 9 Webpagetest initial runs set private ● Browser - Chrome 53.0.2785.116● Location - Dulles, Virginia● Cookie authentication● Speed - Cable modem● Pick median run
Head to Head LinkedIn Lite for India
m.facebook.com
# Requests Page Weight
LinkedIn Lite for India 22 567K
m.facebook.com 47 540K
Q1 Q2 Q3 Q4
0 - 0.85s 0.86s - 1.71s 1.72s - 2.55s 2.56s - 3.4s
Show Video
LinkedIn Lite for India
m.facebook.com
Meaningful First Paint Visually Complete
LinkedIn Lite for India
m.facebook.com
Why is m.facebook.com faster?● Much shorter TTFB ( 6x ) though HTML is larger ( 3x )● Early flush● JavaScript executions are short
Head to Head LinkedIn Lite for India
mbasic.facebook.com
# Requests Page Weight
LinkedIn Lite for India 22 567K
mbasic.facebook.com 25 98K
Q1 Q2 Q3 Q4
0 - 0.85s 0.86s - 1.71s 1.72s - 2.55s 2.56s - 3.4s
Show Video
LinkedIn Lite for India
mbasic.facebook.com
Meaningful First Paint Visually Complete
LinkedIn Lite for India
mbasic.facebook.com
m.facebook.com
Why is mbasic faster?● Very lightweight ( 6x less LLI )● TTFB faster ( 6x faster )● No JavaScript
Head to Head LinkedIn Neptune
LinkedIn Oz
# Requests Page Weight
Neptune 106 3.7M
Oz 132 1.5M
Q1 Q2 Q3 Q4
0 - 5.12s 5.13s - 10.3s 10.31s - 15.4s 15.41s - 20.5s
Neptune Oz
Show Video
Neptune
Oz
Meaningful First Paint Visually Complete
Neptune
Oz
Why is Oz faster?● JavaScript doesn’t block critical path to rendering● Render first. JavaScript second.
Head to HeadNeptune
Oz
# Requests Page Weight
Oz 132 1.5M
Neptune 106 3.7M
Facebook 190 1.9M
Q1 Q2 Q3 Q4
0 - 5.12s 5.13s - 10.3s 10.31s - 15.4s 15.41s - 20.5s
FacebookNeptuneOz
Show Video
Neptune
Oz
Meaningful First Paint Visually Complete
Neptune
Oz
Why is Facebook faster?● HTTP/2● JavaScript not render blocking
Wrap Up1. Identify a stop point ( ex. Visual complete )2. Divide performance into quarters3. Analyze each quarter for network, CPU and visual progress
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
Thank You!
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
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
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