From my presentation "I feel the need..the need for speed: Optimizing the User Experience", given at UXPA Boston 2014. This is the second half of the talk. The first half (are we slow? How slow? Why? And Why That's a Problem) used a ton of animation and rapid patter, and just doesn't make much sense on SlideShare without audio. I need to upload that to YouTube, someday.
Optimizing for a faster user experience Pt 2: How-to.
1. Optimizing the User Experience
Pt 2: remedies
James Christie @jc_ux
Mad*Pow
“I Feel the Need…
…The Need for Speed”
2. Originally presented at UXPA Boston 2014.
Edited for SlideShare: bye-bye animations.
!
Part 1 (Why Speed Matters) coming soon.
!
References, links: goo.gl/w0xp1P
3. RESEARCH - how fast are we?
STRATEGY - how fast should we be?
TECHNOLOGY - what do we need to invest in?
IA and IxD - planning fast pages
VISUAL DESIGN - making front-end savings
SPEED STACK
12. Someone in…
Boston
Dulles
Juno
15+ US places
Montevideo
Monte Carlo
Sofia
Osaka
Beirut
Mombassa
(dozens more)
Using a…
PC with IE8
PC with IE6
PC with Chrome
Android Tablet
Old iPhone
New iPhone
(many more)
Connecting by…
56k modem
Good 3G
Bad 3G
EDGE
DSL
ISDN
Fast Cable
etc.
13. Someone in…
Boston
Dulles
Juno
15+ US places
Montevideo
Monte Carlo
Sofia
Osaka
Beirut
Mombassa
(dozens more)
Using a…
PC with IE8
PC with IE6
PC with Chrome
Android Tablet
Old iPhone
New iPhone
(many more)
Connecting by…
56k modem
Good 3G
Bad 3G
EDGE
DSL
ISDN
Fast Cable
etc.
32. DEVICE LAB
<needs a new photo which I probably won’t get round to in time, so
just picture a big pile of old and new smartphones, tablets, Apple Newtons,
Blackberries, Internet Fridges, iTVs, smart watches etc>
33. Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for
Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable
Minimize HTTP Requests
Use a Content Delivery Network
Avoid empty src or href
Add an Expires or a Cache-Control
Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
23 “basic” optimizations
36. OPTIMIZE IMAGES FOR MOBILE
“We’re missing out on 72% image
savings for mobile.”
Tim Kadlec
Go read: http://timkadlec.com/2013/06/why-we-need-responsive-images/
37. “What is the cost of your non-responsive images?”
>4s load
50% images
44. Set a time budget that suits needs of
audience (3s is nice, 2s is better)
(More mobile? Smaller pages.)
Guesstimate a target file size (~700kB)
Trade features and content against the
budget until it fits
PAGE BUDGETS