Chris Sevilleja
Making scotch.io. Google Dev Expert. Champion pizza maker.
Speed Up JavaScript
50%
Guaranteed
Chris Sevilleja
scotch.io | GDE
@chrisoncode
50%?!?
Guaranteed?!?
Prove It
Less JavaScript
Less Browser Work
Refactoring
JavaScript
Bloat
State of
Internets
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
Performance is
Measuring
Monitoring
Optimizing
Repeat
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
Slow Internet
Old Phones
Network
If it's fast on slow,
it's fast on fast.
Ultimate Rendering Target
60fps
Browser Time
- JS Execution: 25%
- JS Parsing + Compilation: 25%
- Styling + Layout: 10%
- Everything else: CSS/HTML Parsing + Paint
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
How do IÂ send less JavaScript?
P ush
R ender
P re-cache
L azy-load
Code Coverage
Am I using everything?
Analyzing Bundles
What goes into the box?
import cost
Lazy Loading
Only load things when they are needed
HTTP2 Server Push
Send multiple files fast
App Shell
Progressive Unlocking
Setting Budgets
Ultimate Rendering Target
60fps
Recap
- Only load JS for the current page
- Check JS bundle sizes
- Use performance budgets
- Less JS processing
Ultimate Loading Goal
5s TTI
Ultimate Bundle Size Goal
~170kb
performance is
an investment
JavaScript Performance
By Chris Sevilleja
