Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 s...
RESEARCH - how fast are we? STRATEGY - how fast should we be? TECHNOLOGY - what do we need to invest in? IA and IxD - plan...
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 ...
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 w...
Someone in… Boston Dulles Juno 15+ US places Montevideo Monte Carlo Sofia Osaka Beirut Mombassa (dozens more) Using a… PC w...
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 smart...
Remove Duplicate Scripts Configure ETags Make AJAX Cacheable Use GET for AJAX Requests Reduce the Number of DOM Elements No...
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/2...
“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 –...
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 targ...
1.2MB images 100kB JavaScript 400kB share buttons 200kB web fonts 50kB HTML & CSS Size = 1,950kB Total requests = 121 WIRE...
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 P...
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,...
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 - te...
RADICAL CHANGE
Mono is smaller Example: 130kB to 70kB Mono doesn’t mean B&W MONO! wow
@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 ...
Scales to any size, stays same small size Crisp on every screen Versatile Programmable Safe to use (IE needs fallbacks) VE...
21 kB 600x300px 270 kB 600x300px 21 kB 1400x700 1.8 MB 1400x700 Standard resolution Retina 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 Simpl...
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 days Loading…
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
BIG THANK YOU Twitter: @jc_ux Email: jchristie@madpow.com
http://goo.gl/w0xp1P (That’s a zero)
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Upcoming SlideShare
Loading in …5
×

Optimizing for a faster user experience Pt 2: How-to.

1,327 views

Published on

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.

Published in: Design
no profile picture user
Show More

Optimizing for a faster user experience Pt 2: How-to.

  1. 1. Optimizing the User Experience Pt 2: remedies James Christie @jc_ux Mad*Pow “I Feel the Need… …The Need for Speed”
  2. 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. 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. 4. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
  5. 5. Time To Appear: you can see something Time To Interact: you can click something Page Loaded: everything loaded DEFINITION OF TERMS
  6. 6. 0 - 3s 3.5s 7s
  7. 7. Walk a mile in your user’s shoes
  8. 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. 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. 10. Dulles + 3g + Tablet = 70s
  11. 11. 4.5s — menu appears 8s — page complete
  12. 12. Enterprise grade: Real User Monitoring
  13. 13. Average site load times Specific load times for different personas/markets List of things slowing us down. RESEARCH UPSHOT
  14. 14. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
  15. 15. Bring performance out into the open
  16. 16. Sell the benefits
  17. 17. Get them hooked on Speed
  18. 18. Make performance cultural - use design principles
  19. 19. Set a goal: “<Our website> should load in under 3 seconds”.
  20. 20. Explain the benefit Organizational buy-in Set goals A culture of improvement STRATEGY UPSHOT
  21. 21. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN VISUAL DESIGN
  22. 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. 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. 24. The responsive image problem
  25. 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. 26. “What is the cost of your non-responsive images?” >4s load 50% images
  27. 27. Outsource it.
  28. 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. 29. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE (& CS) INTERACTION DESIGN VISUAL DESIGN
  30. 30. 1 video = 20 hi-res images 1 photo = 50,000 words 50,000 words = 3 SVG animations CONTENT TRADE-OFFS
  31. 31. Home 2s Product info 2s Details video 8s Ad landing 1.5s Product info 2s Which pages can be slow?
  32. 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. 33. 1.2MB images 100kB JavaScript 400kB share buttons 200kB web fonts 50kB HTML & CSS Size = 1,950kB Total requests = 121 WIREFRAMES
  34. 34. 100kb of images 10kB Script 0kB from share buttons 50kB web fonts 50kB HTML + CSS Size = 200kB Total requests = 20 AFTER
  35. 35. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN: CHALLENGE TRENDS VISUAL DESIGN
  36. 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. 37. BIG FAT PHOTO ~400kB 3 more photos …that no one will ever see
  38. 38. Facebook & Twitter & G+ & Disqus = 400kB in images & scripts SHARE BUTTONS
  39. 39. SIMPLE BUTTON CURE
  40. 40. Maps: 400kB in images and scripts Stop putting them in footers Load them conditionally MAPS
  41. 41. Just, no. AUTOPLAY VIDEO
  42. 42. FOOL THE EYE
  43. 43. RESEARCH STRATEGY TECHNOLOGY INFORMATION ARCHITECTURE INTERACTION DESIGN: CHALLENGE TRENDS VISUAL DESIGN
  44. 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. 45. 1.7MB (5s load) 900kB (2s load?)
  46. 46. Combine the small fry
  47. 47. Replace lots of icons with one png or gif Reduces objects and file size Make your own: csssprites.com CSS SPRITES
  48. 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. 49. RADICAL CHANGE
  50. 50. Mono is smaller Example: 130kB to 70kB Mono doesn’t mean B&W MONO! wow
  51. 51. @garrettc’s cat
  52. 52. Big illustration: 75kB ! 
 Big photo: 350kB ILLUSTRATION
  53. 53. Old iPhone: 163ppi iPhone 5 Retina: 326ppi Samsung: 560ppi now, 880ppi in 2015. Each demanding higher-res pictures. MARCH OF THE SCREENS
  54. 54. Scales to any size, stays same small size Crisp on every screen Versatile Programmable Safe to use (IE needs fallbacks) VECTOR FTW
  55. 55. 21 kB 600x300px 270 kB 600x300px 21 kB 1400x700 1.8 MB 1400x700 Standard resolution Retina resolution
  56. 56. DesignModo Flat UI
  57. 57. JUST GO SEE THIS http://goo.gl/RtvsUQ
  58. 58. WHAT DOES THE FAST WEB LOOK LIKE?
  59. 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. 60. GET INSPIRED!
  61. 61. 154kB page <1s load 22 objects (average:+100)
  62. 62. Photos: 10kB Selective blur
  63. 63. Web font: 22kB
  64. 64. SVG logo SVG background
  65. 65. Flat structure
  66. 66. 100kB page 50kB less
  67. 67. 536kB page 1.6s load 36 objects
  68. 68. Take away Google Analytics:6kB 19kB ~150ms load
  69. 69. GO FORTH AND SAVE!
  70. 70. 90 pages / day x 1 second / page x 65 years = 25 days Loading…
  71. 71. Save 1s / page 50 pages / day 33m hours / day 2.4 billion users 506m days / year 121 Wikipedias x 121
  72. 72. Save 1s / page 50 pages / day 33m hours / day 506m days / year 1 Apollo Program x 1
  73. 73. “Lost time is never found again.” ! Benjamin Franklin
  74. 74. BIG THANK YOU Twitter: @jc_ux Email: jchristie@madpow.com
  75. 75. http://goo.gl/w0xp1P (That’s a zero)

×