When
Teammates
Don't Care
About Performance
Chris Sevilleja
scotch.io
@chrisoncode
sevi-jello
Ado Kukic
auth0
@kukicado
2011
2018
103kb
Median Desktop
70kb
Median Mobile
402kb
Median Desktop
358kb
Median Mobile
390%
511%
JS Bundle Sizes
2011
2017
4Mbps
America
2Mbps
Global
18Mbps
America
7Mbps
Global
450%
350%
Statista
Internet Speeds
2.5MB -> 200kb
23s -> 5s
Revenue 👆👆 44%
Signups 👆👆 753%
Yahoo
0.4 seconds faster = 9% more traffic
2% slower = 2% less searching per user
Amazon
1s slower === $1.6B lost
Performance is
hard
a feature
a ranking factor
money
Benchmarking
Tools
% of Connections over 2G
45%
GSMA Mobile Economy
Gif from website where they don't know where they got it
southwest.com
on Moto G4
Gif by Nick Buturishvili
% of Mobile Users that Leave After 3s?
Text
53%
Under 0.3s
Filmstrip View
TTI
Start
First Paint
FMP
southwest.com
on iPhone 8
First Paint
First Meaningful Paint
Time to Interactive
iPhone 8
Moto G4
Android Go
Gif by Boing Boing
% of connections over 2G or 3G?
75%
2 Types of Performance
Render
Load
CPU
Network
Performance is
Benchmarking
Optimizing
Budgeting
Monitoring
There was a game?
Finally some nerd talk
w
o
w
Ultimate Rendering Target
60fps
If it's fast on slow,
it's fast on fast.
He was really mean yesterday
My turn!
Check Out My App!
Ultimate Loading Goal
5s TTI
Let's Maths!
50 kb/s
3G Connection
5s
Goal TTI
1.5s
DNS/Connection Stuff
3.5s
Download/Parse/Compile/Execute
Ultimate Bundle Size Goal
~170kb
Analyzing Bundles
What goes into the box?
Lazy Loading
Only load things when they are needed
P ush
R ender
P re-cache
L azy-load
HTTP2 Server Push
Send multiple files fast
App Shell
Progressive Unlocking
Code Coverage
Am I using everything?
Service Worker
ng add @angular/pwa
Setting Budgets
future
Renderer
Tree shooketh
Ultimate Rendering Target
60fps
Ultimate Loading Goal
5s TTI
Ultimate Bundle Size Goal
~170kb
performance is
an investment
team