Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
The UX of Speed
Stefan Baumgartner
October 09, 2015
Technology
3
350
The UX of Speed
An ode to performance -- presented at #DIV15
Stefan Baumgartner
October 09, 2015
Tweet
Share
More Decks by Stefan Baumgartner
See All by Stefan Baumgartner
ddprrt
0
88
ddprrt
0
220
ddprrt
1
170
ddprrt
0
190
ddprrt
1
170
ddprrt
1
110
ddprrt
4
200
ddprrt
2
290
ddprrt
5
1.1k
Other Decks in Technology
See All in Technology
sasakendayo
2
260
hacker2202
0
750
neo_analytics
0
960
shomaekawa
3
1k
masakick
0
110
yukitodate
2
310
saoritakita
0
340
tdys13
4
3.4k
line_developers
PRO
3
470
yuuturn
1
130
humank
0
210
satotakeshi
0
160
Featured
See All Featured
marcelosomers
220
15k
searls
204
35k
akmur
252
19k
scottboms
251
11k
shpigford
368
42k
dougneiner
119
7.8k
philnash
8
480
jonyablonski
14
1.1k
imathis
478
150k
sstephenson
144
12k
lynnandtonic
270
16k
jakevdp
774
200k
Transcript
None
None
None
None
None
None
None
400ms 9% traffic
1.5 seconds 150% organic traffic
2.2 seconds 60 mio downloads / yr
100ms 1% revenue
1 second 1.6 billion USD / yr
None
A website’s first content should not be a loading indicator,
but the content.
Define metrics Define a goal Optimize
Define a goal Optimize Define metrics
1 Pageweight
Images 1.310 Other 4 Video 227 HTML 56 Fonts 97
Scripts 329 Stylesheets 63
CSS JS
CSS JS
CSS JS JPG
CSS JS JPG
2 Page Speed Score
“Page Speed Score” tells you if you’ve followed a series
of best practices for every component of your website
None
https://developers.google.com/speed/pagespeed/insights
Eliminate render-blocking JS and CSS Optimize images Minify HTML, CSS,
JavaScript
Reduce server response time Leverage browser caching Avoid landing page
redirects Enable compression
How safe is Page Speed Score?
blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
blog.ruxit.com/pagespeed-score-matters-less-think/
None
None
None
Solution: Page Speed Score is a good indicator on your
dev style … but we need more!
Speed Index 3
The Speed Index is the average time at which visible
parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port.
∫ 1 - visuallycomplete/100 0 end
What does this mean?
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Every page is fully loaded in 10 seconds 93% linear
after 1 second 100% linear after 10 seconds 20% linear after 9 seconds 7% linear after 9 seconds 80% linear after 1 second 881 5000 8610
The lower Speed Index: The lower the better
qq http://webpagetest.org
None
Define a goal Optimize Define a goal
Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms
User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy
Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms
User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to avoid this
Delay User reaction 0-100ms Instant 100ms-300ms Feels sluggish … 300-1000ms
User realizes that the machine is working 1s + Mental context switch 10s + Come back later (or never) http://goo.gl/QnnbNy We want to be in this area
1. User gets information in under 1 second
1. User gets important information in under 1 second
1. ~ Speed Index < 1000
2. Page Speed Score > 85
3. Page Weight < 1.5 MB
Define a goal Optimize Optimize
DNS Lookup Initial connection TTFB HTML Download Life of an
URL request
Starting here, we are able to control …
Starting here, we are able to control …
<link rel=“stylesheet” href=“main.css”> blocking!
<link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking!
<link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render
<link rel=“stylesheet” href=“main.css”> blocking! <script src=“main.js”> blocking! start render?
Important content first!
Everything else is an enhancement
Critical CSS
<style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
<style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
<style> … </style> … <script> loadCSS(‘main.css’) </script> <script src=“main.js”>
Open up your website at the desired viewport. Look at
the above the fold content.
Open a headless browser to find the CSS for that
content.
npm install --save-dev critical
http://jonassebastianohlsson.com/criticalpathcssgenerator/
Webfonts as an Enhancement
None
None
None
Modern browser? Supports WOFF? Font in Storage Show Font Pre-Render
Modern browser? Supports WOFF? Font in Storage Show Font No
Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Pre-Render
localStorage available? Download Font Save in localStorage Show Font No
Font http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage Post-Render
None
None
None
None
None
None
None
Use Dynatrace the Ruxit way
@ddprrt @dynatrace @ruxit
StahlstadtJS @stahlstadtjs
@plauscherl ERZÄHL UNS WAS!