The Need for Speed, Optimizing the User Experience pt2 - UXPA Boston 2014 - James Christie

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

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

10. 0 - 3s 3.5s 7s

11. Walk a mile in your user’s shoes

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.

14. Dulles + 3g + Tablet = 70s

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

16. Enterprise grade:
Real User Monitoring

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

22. RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN

23. Bring performance out
into the open

24. Sell the benefits

25. Get them hooked on Speed

26. Make performance cultural
- use design principles

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

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

31. RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN

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

35. The responsive image problem

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

39. Outsource it.

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

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

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

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

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

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

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

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

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

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

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

53. SIMPLE BUTTON CURE

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

55. Just, no.
AUTOPLAY VIDEO

56. FOOL THE EYE

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

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

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

61. Combine the small fry

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

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

64. RADICAL CHANGE

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

66. @garrettc’s cat

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

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

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

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

72. DesignModo Flat UI

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

75. WHAT DOES THE FAST WEB LOOK LIKE?

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

77. GET INSPIRED!

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

79. Photos: 10kB
Selective blur

80. Web font:
22kB

81. SVG logo SVG
background

82. Flat structure

83. 100kB page
50kB less

84. 536kB page
1.6s load
36 objects

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

86. GO FORTH AND SAVE!

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

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

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

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

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

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