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

Facebook

# 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

Facebook

Meaningful First Paint Visually Complete

Neptune

Oz

Facebook

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!

Questions?otse@linkedin.com

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