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
150
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
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
330
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
320
いまさら聞けない ABテスト入門
skmr2348
1
200
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
370
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.2k
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
560
VCC 2025 Write-up
bata_24
0
180
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
380
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
490
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
Statistics for Hackers
jakevdp
799
220k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Become a Pro
speakerdeck
PRO
29
5.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Docker and Python
trallard
46
3.6k
How GitHub (no longer) Works
holman
315
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Practical Orchestrator
shlominoach
190
11k
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!