Optimizing for a faster user experience Pt 2: How-to.
92
Optimizing the User Experience Pt 2: remedies James Christie @jc_ux Mad*Pow “I Feel the Need… …The Need for Speed”
-
Upload
james-christie -
Category
Design
-
view
700 -
download
0
description
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.
Transcript of Optimizing for a faster user experience Pt 2: How-to.
Optimizing the User Experience Pt 2: remedies
James Christie @jc_ux Mad*Pow
“I Feel the Need… …The Need for Speed”
Originally presented at UXPA Boston 2014. Edited for SlideShare: bye-bye animations.
!
Part 1 (Why Speed Matters) coming soon. !
References, links: goo.gl/w0xp1P
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
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
Time To Appear: you can see something
Time To Interact: you can click something
Page Loaded: everything loaded
DEFINITION OF TERMS
0 - 3s 3.5s 7s
Walk a mile in your user’s shoes
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.
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.
Dulles + 3g + Tablet = 70s
4.5s — menu appears 8s — page complete
Enterprise grade: Real User Monitoring
Average site load times
Specific load times for different personas/markets
List of things slowing us down.
RESEARCH UPSHOT
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
Bring performance out into the open
Sell the benefits
Get them hooked on Speed
Make performance cultural - use design principles
Set a goal: “<Our website> should load
in under 3 seconds”.
Explain the benefit
Organizational buy-in
Set goals
A culture of improvement
STRATEGY UPSHOT
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
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>
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
The responsive image problem
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/
“What is the cost of your non-responsive images?”
>4s load 50% images
Outsource it.
Speed-as-a-Service
Content Delivery Network
Script minification
Image optimisation
Accelerates modern and legacy browsers – creates different HTML for each
FRONT-END ACCELERATION
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE (& CS) INTERACTION DESIGN VISUAL DESIGN
1 video = 20 hi-res images
1 photo = 50,000 words
50,000 words = 3 SVG animations
CONTENT TRADE-OFFS
Home 2s
Product info 2s
Details video 8s
Ad landing 1.5s
Product info 2s
Which pages can be slow?
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
1.2MB images
100kB JavaScript
400kB share buttons
200kB web fonts
50kB HTML & CSS
Size = 1,950kB
Total requests = 121
WIREFRAMES
100kb of images
10kB Script
0kB from share buttons
50kB web fonts
50kB HTML + CSS
Size = 200kB
Total requests = 20
AFTER
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN: CHALLENGE TRENDS VISUAL DESIGN
“Don’t let 3rd parties get you down” - Google, at Velocity 2010
Found an ~15% latency impact
(Sleazy impact: 1,000%)
3RD PARTY CONTENT
BIG FAT PHOTO ~400kB
3 more photos …that no one will ever see
Facebook & Twitter & G+
& Disqus =
400kB in images & scripts
SHARE BUTTONS
SIMPLE BUTTON CURE
Maps: 400kB in images and scripts
Stop putting them in footers
Load them conditionally
MAPS
Just, no.
AUTOPLAY VIDEO
FOOL THE EYE
RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN: CHALLENGE TRENDS VISUAL DESIGN
“Save for web” is broken
Use a 3rd party (Kraken.io)
Experiment: point it at a homepage carousel.
OPTIMIZE PROPERLY
1.7MB, 5s load
1.7MB (5s load) 900kB (2s load?)
Combine the small fry
Replace lots of icons with one png or gif
Reduces objects and file size
Make your own: csssprites.com
CSS SPRITES
One file (and js) replacing all your site icons
Off the shelf: Icomoon, Pictos, Font Awesome…
Not super-well supported - test!
ICON FONTS
RADICAL CHANGE
Mono is smaller
Example:
130kB to 70kB
Mono doesn’t mean B&W
MONO!
wow
http://www.alistapart.com/articles/the-web-aesthetic
@garrettc’s cat
Big illustration: 75kB
!
Big photo: 350kB
ILLUSTRATION
Old iPhone: 163ppi
iPhone 5 Retina: 326ppi
Samsung: 560ppi now, 880ppi in 2015.
Each demanding higher-res pictures.
MARCH OF THE SCREENS
Scales to any size, stays same small size
Crisp on every screen
Versatile
Programmable
Safe to use (IE needs fallbacks)
VECTOR FTW
21 kB 600x300px
270 kB 600x300px
21 kB 1400x700
1.8 MB 1400x700
Standard resolutionRetina resolution
DesignModo Flat UI
JUST GO SEE THIS
http://goo.gl/RtvsUQ
WHAT DOES THE FAST WEB LOOK LIKE?
Photos
Photo Gradients
Complex
Many objects to load
3rd party dependencies
SLOW
Illustrations, Vectors
CSS gradients
Simple, flat
In-line, few objects
FAST
GET INSPIRED!
154kB page <1s load
22 objects (average:+100)
Photos: 10kB Selective blur
Web font: 22kB
SVG logo SVG background
Flat structure
100kB page 50kB less
536kB page 1.6s load
36 objects
Take away Google Analytics:6kB
19kB ~150ms load
GO FORTH AND SAVE!
90 pages / day x 1 second / page x 65 years
= 25 daysLoading…
Save 1s / page 50 pages / day 33m hours / day 2.4 billion users
506m days / year 121 Wikipedias x 121
Save 1s / page 50 pages / day 33m hours / day
506m days / year 1 Apollo Program x 1
“Lost time is never found again.” !
Benjamin Franklin
