Image Performance: Good for your users, good for your business

Image Performance: Good for your users, good for your business

We know that there's a lot of optimizations that we can use to improve the performance of our images - but does this work really translate into wins for your company? In this talk, Allison McKnight, performance engineer at Etsy, will share real-world examples of the positive impact that image optimizations can have on metrics that your bosses and clients care about. You will walk away from this talk with compelling data and useful tools to help you get buy-in and support for this important user experience work at your company.

C5ca01974effba0b394a7f54f26747ea?s=128

Allison McKnight

March 02, 2017
Tweet

Transcript

  1. IMAGECON 2017 Image Performance Good for your users, good for

    your business Allison McKnight
  2. FreeFolding.etsy.com

  3. Agenda Performance is user experience The impact of images Performance

    is a business optimization
  4. Performance is user experience

  5. 6 IMAGECON 2017 @aemcknig

  6. 7 IMAGECON 2017 @aemcknig normal speed

  7. 8 IMAGECON 2017 @aemcknig normal speed +500ms network

  8. 9 IMAGECON 2017 @aemcknig Normal load times

  9. 10 IMAGECON 2017 @aemcknig Normal load times

  10. 11 IMAGECON 2017 @aemcknig +500ms network

  11. 12 IMAGECON 2017 @aemcknig +500ms network

  12. 18 IMAGECON 2017 @aemcknig response time user perception 0 -

    100 ms instant 100 - 300 ms small, perceptible delay 1 second mental context switch likely 10+ seconds task abandoned
  13. 22 IMAGECON 2017 @aemcknig response time user perception 0 -

    100 ms instant 100 - 300 ms small, perceptible delay 1 second mental context switch likely 10+ seconds task abandoned
  14. 23 IMAGECON 2017 @aemcknig response time user perception 0 -

    100 ms instant 100 - 300 ms small, perceptible delay 1 second mental context switch likely 10+ seconds task abandoned
  15. 24 IMAGECON 2017 @aemcknig aliciawatkins.etsy.com

  16. The impact of images

  17. 29 IMAGECON 2017 @aemcknig 900x244 1440x450 Image size 16.7 KB

    41.4 KB Desktop, cable 40 ms 140 ms Mobile, 3G 82 ms 317 ms PeriwinkleNuthatch.etsy.com
  18. 30 IMAGECON 2017 @aemcknig 900x244 1440x450 Image size 16.7 KB

    41.4 KB Desktop, cable 40 ms 140 ms Mobile, 3G 82 ms 317 ms PeriwinkleNuthatch.etsy.com
  19. 31 IMAGECON 2017 @aemcknig 900x244 1440x450 Image size 16.7 KB

    41.4 KB Desktop, cable 40 ms 140 ms Mobile, 3G 82 ms 317 ms Your mileage may vary PeriwinkleNuthatch.etsy.com
  20. 35 IMAGECON 2017 @aemcknig Average total page size breakdown httparchive

    64% images other stuff
  21. 36 IMAGECON 2017 @aemcknig Total image size (kb) 0 2013

    2014 2015 2016 httparchive Average per-page total image size
  22. 37 IMAGECON 2017 @aemcknig Total image size (kb) 0 2013

    2014 2015 2016 793 KB January 2013 httparchive Average per-page total image size
  23. 38 IMAGECON 2017 @aemcknig Total image size (kb) 0 2013

    2014 2015 2016 793 KB 1623 KB January 2013 December 2016 httparchive Average per-page total image size
  24. Low-hanging fruit veronicakaycrochet.etsy.com

  25. 40 IMAGECON 2017 @aemcknig Lossless compression

  26. 41 IMAGECON 2017 @aemcknig Lossless compression 15 pages fully optimized!

  27. 42 IMAGECON 2017 @aemcknig Lossless compression 58 KB median unrealized

    savings per page
  28. 43 IMAGECON 2017 @aemcknig Lossless compression httparchive 58 KB median

    unrealized savings per page 41.1 KB PeriwinkleNuthatch.etsy.com
  29. 44 IMAGECON 2017 @aemcknig Image optimization opportunities are out there

    AlicesStudio.etsy.com
  30. 47 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

  31. 48 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

    Image load time (ms)
  32. 49 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

    Image load time (ms) 651 ms
  33. 50 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

    Image load time (ms) 651 ms 126 ms
  34. 51 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

    Image load time (ms) 651 ms 126 ms 49 ms
  35. 54 IMAGECON 2017 @aemcknig 160 KB added images 12% increase

    in bounce rate MollyMcShabby.etsy.com
  36. 55 IMAGECON 2017 @aemcknig Images are not small potatoes thesawdustshop.etsy.com

  37. Performance is a business optimization

  38. mountainmolehill.etsy.com

  39. 58 IMAGECON 2017 @aemcknig Financial Times: Engagement

  40. 61 IMAGECON 2017 @aemcknig Added page load time 7 days

    28 days 1 second -4.9% -4.6% 2 seconds no statistical significance -5.0% 3 seconds -7.2% -7.9% Average difference in article views compared to control Financial Times: Engagement
  41. Appeal to the need for a better understanding of metric

    dependencies TECHNIQUE
  42. 64 IMAGECON 2017 @aemcknig Mozilla: Downloads Download

  43. 65 IMAGECON 2017 @aemcknig Mozilla: Downloads Download Download ✓ 2.2

    seconds faster +15.4% download rate
  44. Compare your product to the competition TECHNIQUE

  45. None
  46. Show, don’t tell TECHNIQUE

  47. Ecopuzzle.etsy.com 69 IMAGECON 2017 @aemcknig TOOLBOX

  48. 70 IMAGECON 2017 @aemcknig

  49. None
  50. 73 IMAGECON 2017 @aemcknig YouTube: Reach 98 KB total page

    weight reached new users in areas of low connectivity CrookedCottonDesign.etsy.com
  51. 74 IMAGECON 2017 @aemcknig YouTube: Reach Large numbers of people

    who were previously unable to use YouTube before were suddenly able to. Chris Zacharias YouTube Feather creator CrookedCottonDesign.etsy.com
  52. Issue a challenge TECHNIQUE

  53. 76 IMAGECON 2017 @aemcknig SmartFurniture: Search Engine Optimization Better search

    ranking, 20% increase in traffic from search
  54. Entice with lucrative business opportunities TECHNIQUE

  55. Ecopuzzle.etsy.com 78 IMAGECON 2017 @aemcknig TOOLBOX www.wpostats.com

  56. 79 IMAGECON 2017 @aemcknig 50% improvement in page load time

    12% increase in sales AutoAnything.com 2010 New version of donation page 60% faster 14% increase in donation conversions Obama for America 2012 1 second increase in page load time 7% drop in conversion rate Glasses Direct 2012 SewCadence.etsy.com
  57. None
  58. Be accountable to your stakeholders TECHNIQUE

  59. 82 IMAGECON 2017 @aemcknig

  60. Celebrate performance TECHNIQUE

  61. None
  62. Make performance relevant.

  63. 87 IMAGECON 2017 @aemcknig http://bit.ly/imagecon17-perfmatters Allison McKnight @aemcknig Thank you!

  64. 88 IMAGECON 2017 @aemcknig Thank you!