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
690
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
110
Automating UI development
ddprrt
0
140
The hero's journey in JavaScript frameworks
ddprrt
0
640
Get a grid for flex' sake
ddprrt
1
500
Technical Writing
ddprrt
0
520
Web performance optimisation for single page applications
ddprrt
1
640
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
140
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
570
The Super Mario Bros. Principle
ddprrt
2
550
Other Decks in Technology
See All in Technology
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
Github Copilot エージェントモードで試してみた
ochtum
0
110
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
解析の定理証明実践@Lean 4
dec9ue
0
180
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
910
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
130
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
330
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
0
360
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
GitHub's CSS Performance
jonrohan
1031
460k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Thoughts on Productivity
jonyablonski
69
4.7k
4 Signs Your Business is Dying
shpigford
184
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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!