Your SlideShare is downloading. ×
Optimizing for a faster user experience Pt 2: How-to.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

838

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? …

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
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
838
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
11
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)

×