Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
The UX of Speed
Stefan Baumgartner
October 09, 2015
Technology
3
440
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
37
Automating UI development
ddprrt
0
100
The hero's journey in JavaScript frameworks
ddprrt
0
340
Get a grid for flex' sake
ddprrt
1
270
Technical Writing
ddprrt
0
280
Web performance optimisation for single page applications
ddprrt
1
260
The Super Mario Bros. Principle - Extended Edition
ddprrt
1
120
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
300
The Super Mario Bros. Principle
ddprrt
2
330
Other Decks in Technology
See All in Technology
ZephyrRTOSのLongan Nanoへの移植
tokitahiroshi
0
100
【SAP知らない人向け】SAP on AWS 個人学習メモ/sap-on-aws-study
emiki
3
2.4k
【個人的】オブジェクト指向の現在地
toranoana
0
190
Azure Arc Virtual MachineとAzure Arc Resource Bridge / VM provisioning through Azure portal on Azure Stack HCI (preview)
sashizaki
0
160
FastConnect 冗長性のベスト・プラクティス
ocise
0
130
Inside out - abusing archive file formats
ange
3
280
Introduction To Technical Writing
olawanle_joel
0
100
XRとシビックテック
satoshirobatofujimoto
0
100
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る!
mot_techtalk
1
400
アーキテクチャを明文化して開発に臨んだ話
akkie76
0
360
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
930
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
310
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Optimizing for Happiness
mojombo
365
63k
Gamification - CAS2011
davidbonilla
75
3.9k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
WebSockets: Embracing the real-time Web
robhawkes
57
5.3k
Web Components: a chance to create the future
zenorocha
303
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Six Lessons from altMBA
skipperchong
14
1.4k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
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!