Download - The Shape of Speed
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!
ReferencesRAILhttp://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
Optimistic UIhttp://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation