Slide 1
Slide 1 text
Breaking news at 1000ms
@patrickhamann - FrontTrends - May 2014
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
next.theguardian.com
Slide 4
Slide 4 text
100million
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
0
2.25
4.5
6.75
9
2000 2006 2009 2012
User load time expectations (Secs)
User load time expectations are decreasing
Source: Web Performance Today - March 2013
Slide 7
Slide 7 text
0
5000
10000
15000
20000
Jan Feb Mar Apr
10% Percentile
Median
90% Percentile
Average SpeedIndex top 10,000 websites
Source: HTTPArchive - May 2014
Slide 8
Slide 8 text
Maslow's hierarchy of user needs
• We surveyed 3000 users
• About 17 key product drivers
• They rated speed 2nd most important
• Only after easy to find content
Slide 9
Slide 9 text
Time & user perception
Delay User perception
0–100 ms Instant
100–300 ms Small perceptible delay
300–1000 ms Machine is working
1,000+ ms Likely mental context switch
10,000+ ms Task is abandoned
Source: Ilya Grigorik – High-Performance Browser Networking
Slide 10
Slide 10 text
1000ms
Slide 11
Slide 11 text
A performance budget
https://flic.kr/p/iQ69Kg
Slide 12
Slide 12 text
– Tim Kaldec - 2013
A performance budget is just what it sounds like:
you set a “budget” on your page and do not allow
the page to exceed that. This may be a specific load
time, but it is usually an easier conversation to
have when you break the budget down into the
number of requests or size of the page.
Slide 13
Slide 13 text
Setting a budget
https://flic.kr/p/eHsirY
Slide 14
Slide 14 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 15
Slide 15 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
User
Content API
Popular Comments
Article
DB
DB
Slide 18
Slide 18 text
https://flic.kr/p/77ZtUH
Slide 19
Slide 19 text
User
Content API
Popular Comments
Article
DB
DB
Slide 20
Slide 20 text
Final progressively
enhanced page
Initial page payload
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 23
Slide 23 text
Browser rendering 101
Slide 24
Slide 24 text
Source: Google - Pagespeed Insights
Slide 25
Slide 25 text
Network JavaScript Render tree Layout Paint
HTML DOM
CSS CSSOM
Network JavaScript Render tree Layout Paint
HTML DOM
CSS CSSOM
Network JavaScript Render tree Layout Paint
HTML DOM
CSS CSSOM
DOM
Slide 26
Slide 26 text
JS
CSS
HTML CSS & JS
§
HTML
async
DOMContentReady
Start render
Slide 27
Slide 27 text
Get the CSS down as
soon as possible.
Slide 28
Slide 28 text
What is your critical CSS?
Slide 29
Slide 29 text
Popular content ✘
Sharing
✘
Comments ✘
Related content
✘
Commercial components ✘
Article
✔
Slide 30
Slide 30 text
What if we inlined
our critical CSS?
Slide 31
Slide 31 text
WTF%$?!
Inline critical CSS
Slide 32
Slide 32 text
0.9 1.0 1.1
0.9 1.0 1.1
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Load time First byte Start render Visually complete
3.366s 0.204s 1.113s 3.700s
Before
Load time First byte Start render Visually complete
3.017s 0.262s 0.759s 2.00s
After
Slide 36
Slide 36 text
Use MD5 hash for cache
key
WTF no stylesheets?
Slide 37
Slide 37 text
What does the future hold?
Slide 38
Slide 38 text
http/2
Slide 39
Slide 39 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 40
Slide 40 text
Story of my life
Slide 41
Slide 41 text
– W3C Font Spec
!
!
!
User agents may render text as it would be rendered
if downloadable font resources are not available or
they may render text transparently with fallback
fonts to avoid a flash of text using a fallback font.
!
In cases where the font download fails user agents
must display text, simply leaving transparent text is
considered non-conformant behaviour.
Slide 42
Slide 42 text
Font loading 101
IE Firefox WebKit Blink
Blocking ✗ ✔ ✔ ✔
Timeout – 3s – –
Source: Ian Feather – Web fonts and the Critical Path
Slide 43
Slide 43 text
guardian egyptian
Slide 44
Slide 44 text
progressive
enhancement
https://flic.kr/p/9RDXVd
Slide 45
Slide 45 text
Is modern browser?
Support WOFF?
Font in localStorage?
Show font
Show fallback
Download JSON
localStorage space?
Cache in localStorage
Slide 46
Slide 46 text
Example of base64
json’ifed fonts
Slide 47
Slide 47 text
service worker
Webfontjson
Slide 48
Slide 48 text
What does the future hold?
Slide 49
Slide 49 text
Font load events
Slide 50
Slide 50 text
service worker
ServiceWorker
Slide 51
Slide 51 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 52
Slide 52 text
assets radiator
Slide 53
Slide 53 text
R.U.M.
(real user metrics)
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
speedcurve
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
What does the future hold?
Slide 60
Slide 60 text
Resource Timing API
Slide 61
Slide 61 text
Beacon API
Slide 62
Slide 62 text
1. Core content should be delivered first
2. Core content should render within 1000ms
3. Every feature must fail gracefully
4. Every request should be measured
Slide 63
Slide 63 text
Takeaways
Slide 64
Slide 64 text
Everyone must be involved by
baking performance into your
workflow from day one.
Slide 65
Slide 65 text
Deliver core content first,
then progressively enhance the
extras.
Slide 66
Slide 66 text
Set a performance budget.
Measure, optimise & repeat!
Slide 67
Slide 67 text
Performance is a requirement;
not a feature.
Slide 68
Slide 68 text
Thank you.
Questions?
@patrickhamann - http://github.com/guardian/frontend
g
We’re hiring!