Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Image Performance: Good for your users, good fo...

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.

Allison McKnight

March 02, 2017
Tweet

More Decks by Allison McKnight

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 36 IMAGECON 2017 @aemcknig Total image size (kb) 0 2013

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

    2014 2015 2016 793 KB January 2013 httparchive Average per-page total image size
  9. 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
  10. 43 IMAGECON 2017 @aemcknig Lossless compression httparchive 58 KB median

    unrealized savings per page 41.1 KB PeriwinkleNuthatch.etsy.com
  11. 51 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

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

    in bounce rate MollyMcShabby.etsy.com
  13. 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
  14. 73 IMAGECON 2017 @aemcknig YouTube: Reach 98 KB total page

    weight reached new users in areas of low connectivity CrookedCottonDesign.etsy.com
  15. 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
  16. 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