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 for a faster user experience Pt 2: How-to.

1,370 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ♥♥♥ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Overflow Cafe staff likes your presentation, thank you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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)

×