The Shape of Speed

By Oliver TseJanuary 6, 2016

Who Am I? Oliver Tse

Web Developer

Main Objective

Seriously…

Broader, when you walk out… grok ● “Render first. JavaScript second.”● Reduce render time and create a better experience.● When, what and how much you render is very important

What we’ll talk about1. All rendering2. Chart parts3. Flat4. Cache is king5. JavaScript6. Fix-a-flat7. Comparing

1All rendering

Performance is how much, how fast and when a page renders

It began with a man named Pat

2008Patrick Meenan ( and AOL ) give us Webpagetest

Webpagetest info/parameters● Synthetic testing● Only looks at above-the-fold● Private instance of webpagetest.org● 5 “first time” runs ● Chrome ( latest )● Cable 5/1 mbps 28ms RTT

2Chart parts

Yahoo!

PlateausValleysCliffsHills

Plateaus

flat areas

They occur because of activities in the main thread and assets downloading

no rendering changes occurs at plateausimportant...

Valleys

dips

What was there is visually no more

Now you see it

Now you don’t!

what you just saw was reflow*

*Bad

Cliffs

steep. Tall.

Follows a plateau.fast render

Hills

Progressive rendering

Small partial renderingsimages, content animating in

To go and feel fastAvoid valleys, long plateaus.

3Flat

“Plateaus occur because of activities in the main thread and assets downloading”

Before first render, Jobs gets assets...● 1 HTML● 2 images● 2 stylesheets● 12 JavaScript files

What about the main thread?

First plateau is about downloading

Subsequent plateau

For Jobs, it’s JavaScript

But subsequent plateaus aren’t always about JavaScript

Here, images impact plateau

4.Cache is king

Cached page is always fasterfor first render

Fewer requestsShorter first plateau

For Jobs and the Engineering Blog,80% and 68% fewer requests

5.JavaScript

When you have JavaScript dependencies,caching won’t shorten the second plateau

So, what do we do?

“Time sliced rendering”- Garris Shipon

Group blocks of work into small chunks of time

● Optimistic UI Pattern● Google’s RAIL’s “Idle”

“Whenever the user takes an action, you need to first update your UI to make things look fast, then send a request to the

server to do that modification on the real database. ” - Optimistic UI Pattern

Google’s RAIL

“Complete that work in 50ms” or less-Google RAIL

Benefits● Responsive UI● Progressive rendering

“Render first. JavaScript second.”-Steve Souders

6.Fix-a-flat

PYMK

Homepage

Stuff that’ll get hills● Animations● Deferred images● Progressive images● Time-sliced rendering

Comparing

browsers

versions

internationals

Thank you!

Questions?otse@linkedin.com

ReferencesRAILhttp://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

Optimistic UIhttp://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation