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.

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
46. Show, don’t tell TECHNIQUE
47. Ecopuzzle.etsy.com 69 IMAGECON 2017 @aemcknig TOOLBOX
48. 70 IMAGECON 2017 @aemcknig
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
58. Be accountable to your stakeholders TECHNIQUE
59. 82 IMAGECON 2017 @aemcknig
60. Celebrate performance TECHNIQUE
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!