Performance as User Experience [An Event Apart Denver 2017]
-
Upload
aaron-gustafson -
Category
Design
-
view
64 -
download
0
Transcript of Performance as User Experience [An Event Apart Denver 2017]
![Page 1: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/1.jpg)
Performance as User Experience
Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
![Page 2: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/2.jpg)
/dəˈzīn/
![Page 3: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/3.jpg)
JEFF VEEN
“I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration—
likely because so much bad design simply is decoration. Good design isn’t.
Good design is problem solving.”
![Page 4: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/4.jpg)
/ˈfrikSH(ə)n/
![Page 5: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/5.jpg)
PERFORMANCE AS USER EXPERIENCE
Hallmarks of Good UX๏ Streamlined flow
๏ Clear, concise copy
๏ Low cognitive load
๏ Fast performance
5
![Page 6: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/6.jpg)
![Page 7: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/7.jpg)
Poor performanceis friction
![Page 8: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/8.jpg)
Source: eMarketer
![Page 9: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/9.jpg)
A 1s delay in pageload can reduce
conversions by 7%
Source: Kissmetrics
![Page 10: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/10.jpg)
For an online shop earning $100k/day, that’s about
$2.5m in lost sales
Source: Kissmetrics
![Page 11: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/11.jpg)
For Amazon, 1s is worth about $1.6b in sales
Source: HubSpot
![Page 12: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/12.jpg)
Source: eMarketer
![Page 13: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/13.jpg)
53% abandonwebsites that take
more than 3s to load
Source: Google
![Page 14: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/14.jpg)
By shaving 7s off load, Edmunds increased page views by 17%
& ad revenue by 3%
Source: HubSpot
![Page 15: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/15.jpg)
Mozilla reduced page load by 2.2s and saw a 15.4% increase in downloads
Source: HubSpot
![Page 16: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/16.jpg)
Performancematters
![Page 17: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/17.jpg)
![Page 18: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/18.jpg)
PERFORMANCE AS USER EXPERIENCE
What we were looking for๏ Usable pages are delivered in 10kB or less
๏ Pages are accessible via screen readers, the keyboard, etc.
๏ Entries follow the philosophy of progressive enhancement
๏ Users can do what they need to without JavaScript
18
![Page 19: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/19.jpg)
/dôɡˈfo͞odiNG/
![Page 20: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/20.jpg)
Let’s talk (briefly) about page load
![Page 21: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/21.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
DNS Lookup Icons by Mahmure Alp
![Page 22: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/22.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
DNS Lookup Icons by Mahmure Alp
![Page 23: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/23.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
TCP Handshake
Hello 40.77.56.174
Icons by Mahmure Alp
![Page 24: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/24.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
TCP Handshake
Hello 40.77.56.174
Howdy!
Icons by Mahmure Alp
![Page 25: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/25.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Request
Hello 40.77.56.174
Howdy!
I’d like /index.html
Icons by Mahmure Alp
![Page 26: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/26.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Server Processing
Hello 40.77.56.174
Howdy!
I’d like /index.html
Icons by Mahmure Alp
![Page 27: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/27.jpg)
time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Response
Hello 40.77.56.174
Howdy!
I’d like /index.html
Ok, here it is.
Icons by Mahmure Alp
![Page 29: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/29.jpg)
Icons by Mahmure Alp
Resp
onse
Load
Pain
t
Layo
ut
Rend
er T
ree
CSS
DO
M
![Page 30: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/30.jpg)
Icons by Mahmure Alp
Resp
onse
Load
Pain
t
Layo
ut
Rend
er T
ree
CSS
DO
M
CSS & JavaScript can delay rendering or cause
these to be run again
![Page 31: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/31.jpg)
PERFORMANCE AS USER EXPERIENCE
DOM Parsing<html><head><title>Sillyexample</title><scriptsrc="head.js"></script><linkrel="stylesheet"href="main.css"><style>h2{font-wight:bold;}</style><script>console.log('hi');</script></head><body><imgsrc="my.png"alt=""><scriptsrc="body.js"></script></body></html>
wait while the browserfetches & parses the script
![Page 32: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/32.jpg)
PERFORMANCE AS USER EXPERIENCE
DOM Parsing<html><head><title>Sillyexample</title><scriptsrc="head.js"></script><linkrel="stylesheet"href="main.css"><style>h2{font-wight:bold;}</style><script>console.log('hi');</script></head><body><imgsrc="my.png"alt=""><scriptsrc="body.js"></script></body></html>
wait while the browser
fetches & parses the CSS
![Page 33: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/33.jpg)
PERFORMANCE AS USER EXPERIENCE
DOM Parsing<html><head><title>Sillyexample</title><scriptsrc="head.js"></script><linkrel="stylesheet"href="main.css"><style>h2{font-wight:bold;}</style><script>console.log('hi');</script></head><body><imgsrc="my.png"alt=""><scriptsrc="body.js"></script></body></html>
kicks off downloadingthe image
![Page 34: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/34.jpg)
PERFORMANCE AS USER EXPERIENCE
DOM Parsing<html><head><title>Sillyexample</title><scriptsrc="head.js"></script><linkrel="stylesheet"href="main.css"><style>h2{font-wight:bold;}</style><script>console.log('hi');</script></head><body><imgsrc="my.png"alt=""><scriptsrc="body.js"></script></body></html> wait while the browser
fetches & parses the script
![Page 35: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/35.jpg)
PERFORMANCE AS USER EXPERIENCE
Steps for better performance1. Use native features whenever possible
2. Only include assets you actually need
3. Optimize everything
4. Think about when you load assets
5. Consider how you load assets
6. Only load assets when they add value
43
![Page 36: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/36.jpg)
Step 1:Use native featureswhenever possible
![Page 37: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/37.jpg)
(they’re effectively free)
![Page 38: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/38.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplo<header>Headercontent…</header> not only shorter than
<div id=“header">, butsemantic too
depending on its locationin the document, could also provide a landmark for navigation
![Page 39: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/39.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplo<inputid="n"name="n"requiredaria-required="true"autocorrect="off"autocapitalize="words"placeholder="SirTimBernersLee"autocomplete="name">
modern browsers require
users to enter content
browser can informassistive tech thatthe field is required
don’t let the browser try to correctsomeone’s name
auto-disappearing suggestionwithout JavaScriptif the browser already
knows the user’s name,
by all means, let it fill it in
![Page 40: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/40.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplo<inputtype="email"id="e"name="e"requiredaria-required="true"autocorrect="off"autocapitalize="off"autocomplete="email"placeholder="[email protected]">
modern browsers validatethe email addressand may supply a
custom keyboard layout
let the browser suggest
an email address if it has one
![Page 41: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/41.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplo@media(min-width:600px){.layout-container{display:flex;}.primary{width:68%;}.secondary{width:32%;}}
So much better than floats
![Page 42: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/42.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplovar$radios=document.querySelectorAll('input[type=radio]');
CSS selector-basedDOM traversal
without a JS library
![Page 43: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/43.jpg)
PERFORMANCE AS USER EXPERIENCE
Por exemplofont-family:Georgia,Times,"TimesNewRoman",serif
font-family:"SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue", Arial,sans-serif;
Serif
Sans Serif
![Page 44: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/44.jpg)
![Page 45: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/45.jpg)
If you need a custom font:
subset, subset, subset
![Page 46: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/46.jpg)
PERFORMANCE AS USER EXPERIENCE
Proceed with caution
Source: Bran Stein
![Page 47: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/47.jpg)
Step 2:Only include assetsyou actually need
![Page 48: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/48.jpg)
Great tools, possibly overkill
![Page 49: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/49.jpg)
PERFORMANCE AS USER EXPERIENCE
Every tool has a costFramework Size (Compressed)
Bootstrap 2 149 kB
Bootstrap 3 103 kB
Angular 1.4 51 kB
Ember 2.2.0 111 kB
Foundation 4 266 kB
jQuery 32 kB
UI Kit 86 kB
React 16 + React DOM 35 kB
Vue 2.4.2 20 kB
![Page 50: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/50.jpg)
Chances are, yourlibrary of choice
is on a CDN
![Page 51: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/51.jpg)
time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Hello 123.45.67.89
Howdy!
I’d like /jquery.min.js
Ok, here it is.
Icons by Mahmure Alp
![Page 52: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/52.jpg)
time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Icons by Mahmure AlpYou can optimize this
![Page 53: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/53.jpg)
PERFORMANCE AS USER EXPERIENCE
Find the server early<linkrel="dns-prefetch"href="https://cdn.foo.com">
Drop this in thehead of your pages
![Page 54: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/54.jpg)
time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Hello 123.45.67.89
Howdy!
Icons by Mahmure AlpYou can optimize this
![Page 55: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/55.jpg)
PERFORMANCE AS USER EXPERIENCE
Go for the handshake<linkrel="preconnect"href="https://cdn.foo.com">
![Page 56: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/56.jpg)
time
Your Device The Web
I’d like /jquery.min.js
Ok, here it is.
Icons by Mahmure Alp
You can even optimize this
![Page 57: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/57.jpg)
PERFORMANCE AS USER EXPERIENCE
Grab that resource<linkrel="preload"href="https://cdn.foo.com/jquery.min.js" as="script">
Helps optimize the process
![Page 58: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/58.jpg)
PERFORMANCE AS USER EXPERIENCE
Download isn’t everything
Source: The Filament Group
![Page 59: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/59.jpg)
PERFORMANCE AS USER EXPERIENCE
Download isn’t everythingFramework Method/function operations/s
Vanilla JS document.getElementById() 12,137,211
Dojo dojo.byId(); 5,443,343
Prototype $() 2,940,734
Ext JS Ext.get() 997,562
jQuery $() 350,557
YUI YAHOO.util.Dom.get() 326,534
MooTools document.id() 78,802
Source: VanillaJS
![Page 60: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/60.jpg)
100% library free
![Page 61: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/61.jpg)
PERFORMANCE AS USER EXPERIENCE
We used some hints though<linkrel="preconnect"href="//10kapart.blob.core.windows.net"><linkrel="preconnect"href="//cdnjs.cloudflare.com"><linkrel="preconnect"href="//www.google-analytics.com">
![Page 62: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/62.jpg)
Step 3:Optimize
everything
![Page 63: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/63.jpg)
PERFORMANCE AS USER EXPERIENCE
Our approach to CSS (Gulp)1. Write modular CSS in Sass (+ Breakup for MQ management)
2. Compile CSS with a precision of 4 decimal places (gulp-sass)
3. Fallbacks for the last 2 browser versions (gulp-autoprefixer)
4. CSS shorthand declarations if possible (gulp-shorthand)
5. Remove any unused declarations/rule sets (gulp-uncss)
6. Optimize the files (gulp-csso)
7. Minify (gulp-clean-css)
8. Gzip (gulp-zopfli)
9. Brotli (gulp-brotli)71
![Page 64: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/64.jpg)
PERFORMANCE AS USER EXPERIENCE
Before
![Page 65: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/65.jpg)
PERFORMANCE AS USER EXPERIENCE
After
![Page 66: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/66.jpg)
PERFORMANCE AS USER EXPERIENCE
After
everyone else8 kB
browsers that support
brotli compression
2 kB
browsers that supportgzip compression3 kB
![Page 67: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/67.jpg)
PERFORMANCE AS USER EXPERIENCE
Our approach to JS (Gulp)1. Write modular JavaScript, grouped as appropriate
2. Combine files based on folder structure (gulp-folders, gulp-concat)
3. Create an wrapping closure to isolate from other JS (gulp-insert)
4. Minify (gulp-uglify)
5. Gzip (gulp-zopfli)
6. Brotli (gulp-brotli)
74
![Page 68: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/68.jpg)
PERFORMANCE AS USER EXPERIENCE
Results
about 8 kB all-up
4 kB
1 kB
2 kB
![Page 69: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/69.jpg)
PERFORMANCE AS USER EXPERIENCE
Interesting side note
indexes last
indexes first
![Page 70: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/70.jpg)
We also minified & pre-compressed
our HTML
![Page 71: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/71.jpg)
Step 4:Think about when
you load assets
![Page 72: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/72.jpg)
PERFORMANCE AS USER EXPERIENCE
We had 10 JS files๏ Global
‣ main.js - the site’s library
‣ serviceworker.js - The site’s service worker
๏ Browser-specific
‣ html5shiv.js - local copy of the HTML5 Shiv for < IE9
79
![Page 73: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/73.jpg)
PERFORMANCE AS USER EXPERIENCE
We had 10 JS files๏ Page-specific
‣ enter.js - Entry form-related code
‣ form-saver.js - Used to save form entries locally until submitted
‣ hero.js - Runs the SVG animation on the homepage
‣ home.js - Handles homepage-specific tasks
‣ project.js - Used on project pages during voting
‣ update.js - Handles the winner update form
80
![Page 74: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/74.jpg)
PERFORMANCE AS USER EXPERIENCE
Per the common wisdom<scriptsrc="/j/main.min.js"></script></body></html>
![Page 75: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/75.jpg)
PERFORMANCE AS USER EXPERIENCE
No need to run immediately<scriptsrc="/j/main.min.js"></script><scriptsrc="/j/home.min.js"defer></script></body></html>
run after the DOM is loaded
![Page 76: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/76.jpg)
PERFORMANCE AS USER EXPERIENCE
Run whenever you can<scriptsrc="/j/main.min.js"></script><scriptsrc="/j/home.min.js"async></script></body></html>
run whenever it becomes
available, but don’t
delay page load
![Page 77: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/77.jpg)
PERFORMANCE AS USER EXPERIENCE
Consider dependencies<scriptsrc="/j/main.min.js"></script><scriptsrc="/j/home.min.js"async></script>
![Page 78: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/78.jpg)
PERFORMANCE AS USER EXPERIENCE
Consider dependencies<scriptsrc="/j/main.min.js"async></script><scriptsrc="/j/home.min.js"async></script>
what if this calls a functionin main.min.js?
![Page 79: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/79.jpg)
“race condition”
![Page 80: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/80.jpg)
PERFORMANCE AS USER EXPERIENCE
Avoid race conditions<scriptsrc="/j/main.min.js"></script><scriptsrc="/j/home.min.js"async></script>
![Page 81: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/81.jpg)
Why so many separate files?
![Page 82: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/82.jpg)
PERFORMANCE AS USER EXPERIENCE
Connections in HTTP/1.1Browser Per host Overall
IE 9 6 35
IE 10 8 17
IE 11 13 17
Firefox 4+ 6 17
Opera 11+ 6 user defined
Chrome 4+ 6 10
Safari 7+ 6 17
![Page 83: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/83.jpg)
time
Your Device The Web
HTTP/1.1
Icons by Mahmure Alp
I’d like /c/main.css
I’d like /j/main.min.js
I’d like /i/o.svg
I’d like /j/home.min.js
I’d like /i/edge.svg
I’d like /i/aea.svg
![Page 84: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/84.jpg)
HTTP/2 createsa single connection and
contents stream in
![Page 85: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/85.jpg)
time
Your Device The Web
HTTP/2
Icons by Mahmure Alp
I’d like /c/main.css
I’d like /i/o.svg
I’d like /i/edge.svg
![Page 88: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/88.jpg)
Step 5:Consider how
you load assets
![Page 89: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/89.jpg)
PERFORMANCE AS USER EXPERIENCE
Start simple<linkrel="stylesheet"href="/c/d.min.css"><linkrel="stylesheet"href="/c/a.min.css"media="onlyscreen">
default styles(all browsers)advanced styles
(modern browsers)
![Page 90: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/90.jpg)
PERFORMANCE AS USER EXPERIENCE
Fault tolerance FTW!<linkrel="stylesheet"href="/c/d.min.css"><linkrel="stylesheet"href="/c/a.min.css"media="onlyscreen">
browsers that don’t grok
media queries ignore this file
![Page 91: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/91.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional scripting<!--[ifltIE9]><scriptsrc="/j/html5shiv.min.js"></script><![endif]-->
delivers this script to <= IE 8
![Page 92: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/92.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional scripting<!--[ifgtIE8]><!--><scriptsrc="/j/main.min.js"></script> <scriptsrc="/j/home.min.js"async></script><!--<![endif]--></body></html>
hides scripts from <= IE8 (no need to test!)
![Page 93: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/93.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional imagery
![Page 94: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/94.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional images@media(min-width:36.375em){.presented-by[href*=microsoft]::before{background-image:url(/i/c/edge.png);background-image:url(/i/c/edge.svg), none;…}}
![Page 95: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/95.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional images@media(min-width:36.375em){.presented-by[href*=microsoft]::before{background-image:url(/i/c/edge.png);background-image:url(/i/c/edge.svg), none;…}}
![Page 96: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/96.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional images@media(min-width:36.375em){.presented-by[href*=microsoft]::before{background-image:url(/i/c/edge.png);background-image:url(/i/c/edge.svg),none;…}}
browsers that supportmultiple backgroundsalso support SVG
![Page 97: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/97.jpg)
PERFORMANCE AS USER EXPERIENCE
Conditional animation
![Page 98: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/98.jpg)
PERFORMANCE AS USER EXPERIENCE
How do we get there?JS?
NoNo imageLoad
Yes
<>SVG support?
Yes
SVGAjax request SVG Yank out script & add to document
No picture
Save the markup for next page load
NoYes
Verify browser width condition
![Page 99: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/99.jpg)
Step 6:Only load assets
when they add value
![Page 100: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/100.jpg)
![Page 101: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/101.jpg)
![Page 102: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/102.jpg)
PERFORMANCE AS USER EXPERIENCE
Evaluate images case-by-case๏ Does the image reiterate information found in the surrounding text?
๏ Is the image necessary to understand the surrounding content?
๏ Does the image contain text?
๏ Is the image a graph, chart, or table?
๏ Could the content of the image be presented in a different format that would not require an image?
๏ Is the image purely presentational?
111
![Page 103: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/103.jpg)
PERFORMANCE AS USER EXPERIENCE
53% of the average web page
Source: Internet Archive
![Page 104: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/104.jpg)
PERFORMANCE AS USER EXPERIENCE
And they don’t always fit
![Page 106: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/106.jpg)
If you can avoid using an image, do it
![Page 107: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/107.jpg)
If you need an image, choose the best format
![Page 108: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/108.jpg)
PERFORMANCE AS USER EXPERIENCE
Quick format recap๏ GIF
‣ for images with large swaths of solid colors
‣ Binary transparency
๏ JPG
‣ For photographs and images with gradations of color
‣ Can be compressed (introduces artifacts)
117
![Page 109: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/109.jpg)
PERFORMANCE AS USER EXPERIENCE
Quick format recap๏ PNG (8-Bit)
‣ Alternative to GIF
‣ Can support alpha transparency (with the right creation software)
๏ PNG (24-bit)
‣ Alternative to JPG
‣ Usually larger than JPGs
‣ Supports alpha tranparency
118
![Page 110: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/110.jpg)
PERFORMANCE AS USER EXPERIENCE
Quick format recap๏ WebP
‣ Newer format, not universally supported
‣ Smaller than JPGs and 24-bit PNGs
‣ Support alpha transparency
‣ and so much more…
119
![Page 111: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/111.jpg)
Sometimes imagesare “nice to have”
![Page 112: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/112.jpg)
that’s 29 kB of images
![Page 113: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/113.jpg)
![Page 114: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/114.jpg)
PERFORMANCE AS USER EXPERIENCE
How it works<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
![Page 115: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/115.jpg)
PERFORMANCE AS USER EXPERIENCE
How it works<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
image path
no alt necessary
prepend tothis list item
![Page 116: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/116.jpg)
PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in syncvar$watcher=document.createElement('div'),re=/['"]/g;
$watcher.setAttribute('id','getActiveMQ-watcher');$watcher.style.display='none';document.body.appendChild($watcher);
window.getActiveMQ=function(){returnwindow.getComputedStyle($watcher,null).getPropertyValue('font-family').replace(re,'');};
![Page 117: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/117.jpg)
PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in sync#getActiveMQ-watcher{font-family:global;}@media(min-width:15em){#getActiveMQ-watcher{font-family:tiny;}}@media(min-width:20em){#getActiveMQ-watcher{font-family:small;}}@media(min-width:30em){#getActiveMQ-watcher{font-family:medium;}}@media(min-width:40em){#getActiveMQ-watcher{font-family:large;}}@media(min-width:48.75em){#getActiveMQ-watcher{font-family:larger;}}@media(min-width:60em){#getActiveMQ-watcher{font-family:full;}}
![Page 118: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/118.jpg)
PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in sync#getActiveMQ-watcher{font-family:global;}@media(min-width:15em){#getActiveMQ-watcher{font-family:tiny;}}@media(min-width:20em){#getActiveMQ-watcher{font-family:small;}}@media(min-width:30em){#getActiveMQ-watcher{font-family:medium;}}@media(min-width:40em){#getActiveMQ-watcher{font-family:large;}}@media(min-width:48.75em){#getActiveMQ-watcher{font-family:larger;}}@media(min-width:60em){#getActiveMQ-watcher{font-family:full;}}
![Page 119: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/119.jpg)
PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in syncvar$watcher=document.createElement('div'),re=/['"]/g;
$watcher.setAttribute('id','getActiveMQ-watcher');$watcher.style.display='none';document.body.appendChild($watcher);
window.getActiveMQ=function(){returnwindow.getComputedStyle($watcher,null).getPropertyValue('font-family').replace(re,'');};
![Page 120: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/120.jpg)
PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in syncvarMQ=getActiveMQ();
if(MQ=='larger'||MQ=='full'){lazyLoadImages();}
![Page 121: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/121.jpg)
PERFORMANCE AS USER EXPERIENCE
How it works<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
![Page 122: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/122.jpg)
PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"data-imaged="true"><imgsrc="/i/j/r.jpg"alt=""><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
![Page 123: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/123.jpg)
Oh wait… optimize everything
![Page 124: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/124.jpg)
![Page 125: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/125.jpg)
![Page 126: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/126.jpg)
Source: 38 kB JPG
![Page 127: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/127.jpg)
B&W: 35 kB JPG (-7%)
![Page 128: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/128.jpg)
Crop & Resize: 12 kB JPG (-68%)
![Page 129: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/129.jpg)
Blur & optimize: 9 kB JPG (-76%)
![Page 130: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/130.jpg)
blurred everythingbut their faces
![Page 131: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/131.jpg)
WebP: 4 kB (-89%)JPG: 9 kB (-76%)
![Page 132: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/132.jpg)
!Not every browser
supports WebP
![Page 133: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/133.jpg)
PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats<picture><sourcetype="image/webp"srcset="my.webp"><imgsrc="my.jpg"alt="Alttextgoeshere"></picture>
first choice ifWebP is supported fallback imageif it isn’t
![Page 134: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/134.jpg)
PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats<picture><sourcetype="image/svg+xml"srcset="my.svg"><sourcetype="image/webp"srcset="my.webp"> <imgsrc="my.jpg"alt="Alttextgoeshere"></picture>
![Page 135: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/135.jpg)
PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"data-imaged="true"><imgsrc="/i/j/r.jpg"alt=""><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
![Page 136: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/136.jpg)
PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats<liclass="gallery__itemh-card"data-img="/i/j/r.jpg||y"data-imaged="true"><picture><sourcetype="image/webp"srcset="/i/j/r.webp"><imgsrc="/i/j/r.jpg"alt=""></picture><ahref="https://twitter.com/rachelandrew"> <b>RachelAndrew</b></a></li>
![Page 137: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/137.jpg)
PERFORMANCE AS USER EXPERIENCE
Steps for better performance1. Use native features whenever possible
2. Only include assets you actually need
3. Optimize everything
4. Think about when you load assets
5. Consider how you load assets
6. Only load assets when they add value
146
![Page 138: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/138.jpg)
Every choice wemake affects our
users’ experiences
![Page 139: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/139.jpg)
Let’s spend our time to save it for our users
![Page 140: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/140.jpg)
Speedy performance isa great user experience
![Page 141: Performance as User Experience [An Event Apart Denver 2017]](https://reader031.fdocuments.us/reader031/viewer/2022030318/5a64cef47f8b9a735d8b4a53/html5/thumbnails/141.jpg)
Thank you!
@AaronGustafson aaron-gustafson.com
slideshare.net/AaronGustafson