Slide 1
Slide 1 text
Beyond the bubble
Ben Schwarz
@benschwarz
!
Slide 2
Slide 2 text
calibreapp.com
Slide 3
Slide 3 text
…
…
…
✅ HTML
✅ main.css
✅ webfont.woff2
✅ hero-header.jpg
✅ webfont-semibold.woff2
✅ common-vendor.js
✅ app.js
…
✅ HTML
✅ main.css
✅ webfont.woff2
✅ hero-header.jpg
✅ webfont-semibold.woff2
✅ common-vendor.js
✅ app.js
Slide 4
Slide 4 text
Project timeline
Performance happens here
Slide 5
Slide 5 text
Project timeline
“Hey, is the website fast?”
“ohhhh fuck”
Slide 6
Slide 6 text
Project timeline
“Let’s make this really great!”
When performance should happen
Slide 7
Slide 7 text
State of Global Connectivity
Slide 8
Slide 8 text
53.9%
no internet access
46.1%
internet access
7.4
Billion People
Slide 9
Slide 9 text
108 million
65% of the 1.2 Billion population
no access to the internet.
new first time internet users in 2016.
Slide 10
Slide 10 text
Number of hours worked
for 500mb of data
$ Brazil 13 h
% Indonesia 6 h
& India 4 h
' Germany 1 h
Slide 11
Slide 11 text
1hr of work for:
• 8 songs on Spotify
• 6 minutes of Youtube
• Less than 1 hour playing online games
Slide 12
Slide 12 text
1hr of work for:
• Reading an article on theverge.com
with an empty cache (38 times)
Slide 13
Slide 13 text
Average
‘LTE’ speed
( Denmark 30.6 Mbps
' Germany 20.3 Mbps
$ Brazil 19.68 Mbps
) Sweden 15.2 Mbps
% Indonesia 8.79 Mbps
& India 6.39 Mbps
Slide 14
Slide 14 text
0 Mbps 400 Mbps
7.2 Mbps
Global Average
Global Average
Connection Speed
Slide 15
Slide 15 text
60%
of mobile connections are 2G.*
*Global connectivity
Slide 16
Slide 16 text
Even if LTE is ‘available’,
do not assume it will be fast.
Slide 17
Slide 17 text
51.3%
48.7%
Hand held is majority
Slide 18
Slide 18 text
OPPO
Huawei
vivo
Apple
Xaiomi
China
Samsung
¯\(°_o)/¯
Xaiomi
Micromax
Lenovo
India
Samsung
Apple
Huawei
Sony Ericsson
LG
Germany
Slide 19
Slide 19 text
Vendor Number of units
Samsung 78.6 Million
Apple 51.9 Million
Huawei 34.1 Million
Oppo 30.9 Million
Vivo 25.8 Million
Others 158.3 Million
Total 379.9 Million
Global smartphone sales Q1 2017
Slide 20
Slide 20 text
Is there a single device that
best represents “average”?
Slide 21
Slide 21 text
Moto G4
Quad-core CPU
2GB Ram
16 or 32Gb of storage
1080x1920
13MP Camera
Slide 22
Slide 22 text
Enabling CPU Throttling in Chrome
Slide 23
Slide 23 text
Two versions of the internet
The one we use daily
Cable
Fibre
Large corporates
University
Airplanes
AirBnBs
Coffee shop wifi
Conference wifi
Lie-fi
The one we don’t
Slide 24
Slide 24 text
We must stop optimising for $3000
computers with fast connections.
Slide 25
Slide 25 text
We must feel what our customers are feeling,
train ourselves how to diagnose common
performance issues then fix them.
Slide 26
Slide 26 text
As an industry we need to stop putting
our desires and needs in front of the
people we say we’re building for.
Slide 27
Slide 27 text
The Critical Request
Slide 28
Slide 28 text
A critical request is one that contains
an asset that is essential to the
content within the user’s viewport.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Hey read this
it’s really interesting
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Hey read this
it’s really interesting
Slide 33
Slide 33 text
Hey read this
it’s really interesting
Slide 34
Slide 34 text
Hey read this
it’s really interesting
Slide 35
Slide 35 text
Making people wait
for text to render
The Web in 2017:
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
The fold is the user’s viewport.
Yes, it’s real.
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
When did the fonts load?
Slide 40
Slide 40 text
Fonts load when:
• The stylesheet targets an element with a font declaration
• The stylesheet has a corresponding @font-face declaration
• Fonts are not requested until there is text to render
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Preload
Critical, essential resources.
Slide 43
Slide 43 text
HTML request Fonts!
CSS
Slide 44
Slide 44 text
3-5 seconds
delay caused by webfonts
68%
of sites use web fonts
Impact
Slide 45
Slide 45 text
✅ Use
✅ Use font-display: swap;
✅ Have fallbacks that look similar
✅ Use woff2, woff where possible
Webfont performance checklist
Slide 46
Slide 46 text
Looking beyond delivery
Slide 47
Slide 47 text
Delivery Parse Runtime
+ +
Asset lifetime
Slide 48
Slide 48 text
We ignore the fact that we’re
often blocking the main thread.
This matters.
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Average size script on sites
453 KB
Slide 51
Slide 51 text
453 KB " 1,500 KB
Compression rate of 2–3 times
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
560 Kb Compressed
2208 Kb Uncompressed
Slide 55
Slide 55 text
Desktop Moto G4
Parse / Compile in the wild
2 seconds!
Slide 56
Slide 56 text
http://bit.ly/your-site-without-js
Slide 57
Slide 57 text
Half the amount of data
Half the number of requests
1.59Mb vs 3.41Mb
61 Requests vs 115 Requests
Slide 58
Slide 58 text
http://bit.ly/delete-js
Slide 59
Slide 59 text
Webpack
Code splitting
import(/* webpackChunkName: “MyComponent" */ ‘./MyComponent’)
Define split points using Dynamic Imports
Webpack “magic comment”
Slide 60
Slide 60 text
Webpack
Code splitting
new webpack.optimize.CommonsChunkPlugin()
Split dependencies & cache those forever.
Slide 61
Slide 61 text
✅ Use code splitting
✅ Serve only what people need
✅ Test using ‘Real world’ conditions
✅ Monitor Parse & Compile time
JS Runtime checklist
Slide 62
Slide 62 text
Improve
Slide 63
Slide 63 text
The metrics that we’re using to talk
about performance tell us nothing
about user experience.
Slide 64
Slide 64 text
onLoad
Speed Index
onDomContentLoaded
Metrics that don’t even
Slide 65
Slide 65 text
First Paint
First Meaningful Paint
Visual Complete
Time to Interactive
Good metrics
Slide 66
Slide 66 text
User navigates
First Paint Visually Complete
First Contentful Paint
First Meaningful Paint
Slide 67
Slide 67 text
Human-centric metrics
Slide 68
Slide 68 text
Lighthouse
npm install -g lighthouse
Slide 69
Slide 69 text
Run Lighthouse in Chrome
Slide 70
Slide 70 text
User navigates
First Paint Visually Complete
Short Javascript task
Long Javascript task (>50ms)
5 seconds without
long tasks
Calculating Time to Interactive
Slide 71
Slide 71 text
Time to Interactive in
less than 5 seconds
(on every device)
Slide 72
Slide 72 text
“Time to first tweet”
Slide 73
Slide 73 text
Performance monitoring checklist
✅ Use metrics that describe user-experience
✅ Test using ‘Real world’ conditions
✅ Monitor continuously
Slide 74
Slide 74 text
Don’t try to keep people on your
site for as long as possible.
Slide 75
Slide 75 text
Help people achieve their goals
and move on with their lives.
Slide 76
Slide 76 text
Service worker cache
PRPL Pattern
Code splitting
Modern image formats
HTTP/2
Reducing JS startup time with
Prepack, Rollup, etc
Use a CDN!
Use SVG
Set Cache headers
Slide 77
Slide 77 text
Wealthy Western Web
Slide 78
Slide 78 text
World Wide Web
Slide 79
Slide 79 text
Make the web fast for everyone
Slide 80
Slide 80 text
calibreapp.com
Slide 81
Slide 81 text
@benschwarz
Cheers
calibreapp.com