Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The UX of Speed
Search
Stefan Baumgartner
October 09, 2015
Technology
3
700
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
Idiomatic Rust
ddprrt
0
120
Automating UI development
ddprrt
0
150
The hero's journey in JavaScript frameworks
ddprrt
0
660
Get a grid for flex' sake
ddprrt
1
520
Technical Writing
ddprrt
0
530
Web performance optimisation for single page applications
ddprrt
1
670
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
140
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
580
The Super Mario Bros. Principle
ddprrt
2
560
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
320
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
150
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
150
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
33
9.8k
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.3k
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
1.8k
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
3.7k
バイブコーディングと継続的デプロイメント
nwiizo
2
360
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
3.5k
北海道の人に知ってもらいたいGISスポット / gis-spot-in-hokkaido-2025
sakaik
0
190
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Side Projects
sachag
455
43k
Making Projects Easy
brettharned
118
6.4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Thoughts on Productivity
jonyablonski
70
4.8k
Code Review Best Practice
trishagee
72
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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!