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

4.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN

5.
Time To Appear: you can see something
Time To Interact: you can click something
Page Loaded: everything loaded
DEFINITION OF TERMS

6.
0 - 3s 3.5s 7s

7.
Walk a mile in your user’s shoes

8.
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.

9.
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.

10.
Dulles + 3g + Tablet = 70s

11.
4.5s — menu appears 8s — page complete

12.
Enterprise grade:
Real User Monitoring

13.
Average site load times
Specific load times for different
personas/markets
List of things slowing us down.
RESEARCH UPSHOT

14.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN

15.
Bring performance out
into the open

16.
Sell the benefits

17.
Get them hooked on Speed

18.
Make performance cultural
- use design principles

19.
Set a goal:
“<Our website> should load
in under 3 seconds”.

20.
Explain the benefit
Organizational buy-in
Set goals
A culture of improvement
STRATEGY UPSHOT

21.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN

22.
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>

23.
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

24.
The responsive image problem

25.
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/

26.
“What is the cost of your non-responsive images?”
>4s load
50% images

27.
Outsource it.

28.
Speed-as-a-Service
Content Delivery Network
Script minification
Image optimisation
Accelerates modern and legacy browsers – creates
different HTML for each
FRONT-END ACCELERATION

29.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE (& CS)
INTERACTION DESIGN
VISUAL DESIGN

30.
1 video = 20 hi-res images
1 photo = 50,000 words
50,000 words = 3 SVG animations
CONTENT TRADE-OFFS

31.
Home
2s
Product info
2s
Details video
8s
Ad landing
1.5s
Product info
2s
Which pages can be slow?

32.
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

33.
1.2MB images
100kB JavaScript
400kB share buttons
200kB web fonts
50kB HTML & CSS
Size = 1,950kB
Total requests = 121
WIREFRAMES

34.
100kb of images
10kB Script
0kB from share buttons
50kB web fonts
50kB HTML + CSS
Size = 200kB
Total requests = 20
AFTER

35.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN: CHALLENGE TRENDS
VISUAL DESIGN

36.
“Don’t let 3rd parties get
you down” - Google, at
Velocity 2010
Found an ~15% latency
impact
(Sleazy impact: 1,000%)
3RD PARTY CONTENT

37.
BIG FAT PHOTO
~400kB
3 more photos
…that no one will ever see

38.
Facebook & Twitter & G+
& Disqus =
400kB in images & scripts
SHARE BUTTONS

39.
SIMPLE BUTTON CURE

40.
Maps: 400kB in images and
scripts
Stop putting them in footers
Load them conditionally
MAPS

41.
Just, no.
AUTOPLAY VIDEO

42.
FOOL THE EYE

43.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN: CHALLENGE TRENDS
VISUAL DESIGN

44.
“Save for web” is broken
Use a 3rd party (Kraken.io)
Experiment: point it at a
homepage carousel.
OPTIMIZE PROPERLY
1.7MB, 5s load

45.
1.7MB (5s load) 900kB (2s load?)

46.
Combine the small fry

47.
Replace lots of icons with
one png or gif
Reduces objects and file
size
Make your own:
csssprites.com
CSS SPRITES

48.
One file (and js) replacing
all your site icons
Off the shelf: Icomoon,
Pictos, Font Awesome…
Not super-well supported -
test!
ICON FONTS

49.
RADICAL CHANGE

50.
Mono is smaller
Example:
130kB to 70kB
Mono doesn’t mean B&W
MONO!
wow

51.
@garrettc’s cat

52.
Big illustration: 75kB
!
Big photo: 350kB
ILLUSTRATION

53.
Old iPhone: 163ppi
iPhone 5 Retina: 326ppi
Samsung: 560ppi now, 880ppi in 2015.
Each demanding higher-res pictures.
MARCH OF THE SCREENS

54.
Scales to any size, stays same small size
Crisp on every screen
Versatile
Programmable
Safe to use (IE needs fallbacks)
VECTOR FTW

55.
21 kB
600x300px
270 kB
600x300px
21 kB
1400x700
1.8 MB
1400x700
Standard resolution
Retina resolution

56.
DesignModo Flat UI

57.
JUST GO SEE THIS
http://goo.gl/RtvsUQ

58.
WHAT DOES THE FAST WEB LOOK LIKE?

59.
Photos
Photo Gradients
Complex
Many objects to load
3rd party dependencies
SLOW
Illustrations, Vectors
CSS gradients
Simple, flat
In-line, few objects
FAST

60.
GET INSPIRED!

61.
154kB page
<1s load
22 objects
(average:+100)

62.
Photos: 10kB
Selective blur

63.
Web font:
22kB

64.
SVG logo SVG
background

65.
Flat structure

66.
100kB page
50kB less

67.
536kB page
1.6s load
36 objects

68.
Take away Google
Analytics:6kB
19kB
~150ms load

69.
GO FORTH AND SAVE!

70.
90 pages / day
x 1 second / page
x 65 years
= 25 days
Loading…

71.
Save 1s / page
50 pages / day
33m hours / day
2.4 billion users
506m days / year
121 Wikipedias x 121

72.
Save 1s / page
50 pages / day
33m hours / day
506m days / year
1 Apollo Program
x 1

73.
“Lost time is never found again.”
!
Benjamin Franklin

74.
BIG THANK YOU
Twitter: @jc_ux
Email: jchristie@madpow.com

75.
http://goo.gl/w0xp1P
(That’s a zero)