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

Slide 1

Slide 1 text

IMAGECON 2017 Image Performance Good for your users, good for your business Allison McKnight

Slide 2

Slide 2 text

FreeFolding.etsy.com

Slide 3

Slide 3 text

Agenda Performance is user experience The impact of images Performance is a business optimization

Slide 4

Slide 4 text

Performance is user experience

Slide 5

Slide 5 text

6 IMAGECON 2017 @aemcknig

Slide 6

Slide 6 text

7 IMAGECON 2017 @aemcknig normal speed

Slide 7

Slide 7 text

8 IMAGECON 2017 @aemcknig normal speed +500ms network

Slide 8

Slide 8 text

9 IMAGECON 2017 @aemcknig Normal load times

Slide 9

Slide 9 text

10 IMAGECON 2017 @aemcknig Normal load times

Slide 10

Slide 10 text

11 IMAGECON 2017 @aemcknig +500ms network

Slide 11

Slide 11 text

12 IMAGECON 2017 @aemcknig +500ms network

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

24 IMAGECON 2017 @aemcknig aliciawatkins.etsy.com

Slide 16

Slide 16 text

The impact of images

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

35 IMAGECON 2017 @aemcknig Average total page size breakdown httparchive 64% images other stuff

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Low-hanging fruit veronicakaycrochet.etsy.com

Slide 25

Slide 25 text

40 IMAGECON 2017 @aemcknig Lossless compression

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

42 IMAGECON 2017 @aemcknig Lossless compression 58 KB median unrealized savings per page

Slide 28

Slide 28 text

43 IMAGECON 2017 @aemcknig Lossless compression httparchive 58 KB median unrealized savings per page 41.1 KB PeriwinkleNuthatch.etsy.com

Slide 29

Slide 29 text

44 IMAGECON 2017 @aemcknig Image optimization opportunities are out there AlicesStudio.etsy.com

Slide 30

Slide 30 text

47 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB)

Slide 31

Slide 31 text

48 IMAGECON 2017 @aemcknig Savings with srcset Image size (KB) Image load time (ms)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

54 IMAGECON 2017 @aemcknig 160 KB added images 12% increase in bounce rate MollyMcShabby.etsy.com

Slide 36

Slide 36 text

55 IMAGECON 2017 @aemcknig Images are not small potatoes thesawdustshop.etsy.com

Slide 37

Slide 37 text

Performance is a business optimization

Slide 38

Slide 38 text

mountainmolehill.etsy.com

Slide 39

Slide 39 text

58 IMAGECON 2017 @aemcknig Financial Times: Engagement

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Appeal to the need for a better understanding of metric dependencies TECHNIQUE

Slide 42

Slide 42 text

64 IMAGECON 2017 @aemcknig Mozilla: Downloads Download

Slide 43

Slide 43 text

65 IMAGECON 2017 @aemcknig Mozilla: Downloads Download Download ✓ 2.2 seconds faster +15.4% download rate

Slide 44

Slide 44 text

Compare your product to the competition TECHNIQUE

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Show, don’t tell TECHNIQUE

Slide 47

Slide 47 text

Ecopuzzle.etsy.com 69 IMAGECON 2017 @aemcknig TOOLBOX

Slide 48

Slide 48 text

70 IMAGECON 2017 @aemcknig

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

73 IMAGECON 2017 @aemcknig YouTube: Reach 98 KB total page weight reached new users in areas of low connectivity CrookedCottonDesign.etsy.com

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Issue a challenge TECHNIQUE

Slide 53

Slide 53 text

76 IMAGECON 2017 @aemcknig SmartFurniture: Search Engine Optimization Better search ranking, 20% increase in traffic from search

Slide 54

Slide 54 text

Entice with lucrative business opportunities TECHNIQUE

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Be accountable to your stakeholders TECHNIQUE

Slide 59

Slide 59 text

82 IMAGECON 2017 @aemcknig

Slide 60

Slide 60 text

Celebrate performance TECHNIQUE

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Make performance relevant.

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

88 IMAGECON 2017 @aemcknig Thank you!