How do you know what consumers expect from your site? Every shopper is different and every visit is different. Industry stats tell only part of the story. You need to crack the hood and analyze your own real user data. This talk covers how and why to gather real user data and connect the dots between the metrics that matter most -- IT, UX, and business -- in order to create better shopper experiences and improve your business.

1. the small things that add up
how to fix the design issues that matter on the pages that matter
@tameverts #smashingconf

2. performance matters

3. Every 1 second of median load time
improvement equals a 2% conversion
rate increase for Walmart.com
Staples.com shaves 1 second from
median load time, improves conversion
rate by 10%
Intuit cuts median load times by more
than half, increases conversions by 14%
@tameverts #smashingconf

4. fast
slow
@tameverts #smashingconf

5. @tameverts #smashingconf

6. WPOstats.com

7. which design issues matter?
which metrics matter?
which pages matter?

9. which metrics matter?

10. what we used to think…

11. @tameverts #smashingconf

12. what we know now…

13. not everything matters

14. machine learning FTW!
https://github.com/WPO-
Foundation/beacon-ml

15. collected beacon data for 93 attributes
• top-level – domain, timestamp, SSL
• session – start time, length (in pages), total load time
• user agent – browser, OS, mobile ISP
• geo – country, city, organization, ISP, network speed
• bandwidth
• timers – base, custom, user-defined
• custom metrics
• HTTP headers
• much more…
https://docs.soasta.com/whatsinbeacon/
@tameverts #smashingconf

16. finding 1
DOM ready (aka DOM content loaded)
and average session load time
were the best combined indicators
of bounce rate
@tameverts #smashingconf

17. Up to 89.5% accuracy
@tameverts #smashingconf

18. @tameverts #smashingconf
bounce probability jumps to ~60% at 4.5s

19. finding 2
start render is important, too
@tameverts #smashingconf

20. NB: first paint is not start render!
first paint (Chrome) start render
@tameverts #smashingconf

21. finding 3
mobile-related metrics
were not meaningful predictors of
conversions
@tameverts #smashingconf

22. @tameverts #smashingconf

23. start render repeat visits

24. wow!

25. UserTiming
measure performance of your applications
through high-precision timestamps
https://www.w3.org/TR/user-timing/

26. how long does it
take to display the
main product image
on my site?
<img src=“image1.gif” onload=“performance.mark(‘image1’)”>

27. measure hero image delay
http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/
measure aggregate times to get
“above the fold” time
http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html

28. http://soasta.io/perftimings

29. which pages matter?

30. what we used to think…

33. what we know now…

34. it depends

38. source: webperf.io
@tameverts #smashingconf

39. load times for “checkout” pages goes from 4 to 9 seconds
conversion rate barely decreases
@tameverts #smashingconf

40. load time for “browse” pages grows from 1 to 6 seconds
conversion rate shrinks by ~50%
@tameverts #smashingconf

41. Conversion Impact Score
The Conversion Impact Score (CIS) is a relative score that ranks page groups
by their propensity to negatively impact conversions due to high load times.
For each page group, the Conversion Impact Score is calculated using the
proportion of overall requests that are associated with that group, along with
the Spearman Ranked Correlation between its load times and number of
conversions. The Conversion Impact Score will always be a number between
-1 and 1, though scores much greater than zero should be very rare. The more
negative the score, the more detrimental to conversions that high load times
for that page group are, relative to the other page groups.

42. TL;DR
How much impact does the performance
of this page have on conversions?

44. what you need
access to 100% of your user data
(including historical data)
tag pages into meaningful groups,
(products, departments, search, promotions, checkout)
correlate performance data to conversion rate

45. avoid these mistakes
wasting massive optimization resources
on the wrong pages
continuing to optimize pages that are
already fast enough
ignoring pages that have relatively good performance
forgetting that every site is different

46. soasta.io/ConversionImpactScore
soasta.io/ActivityImpactScore

47. which design issues matter?

48. what we used to think…

49. @tameverts #smashingconf

50. @tameverts #smashingconf

51. @tameverts #smashingconf

53. what we know now…

54. it’s the same
(but we know more)

55. pages with more scripts
are less likely to convert
@tameverts #smashingconf

56. @tameverts #smashingconf
160+ scripts… uh-oh

57. the number of DOM
elements on the page
matters… A LOT
@tameverts #smashingconf

58. @tameverts #smashingconf
optimal: 400-700

59. sessions that convert
have fewer images
than sessions that don’t
@tameverts #smashingconf

60. number of images per page (median)
@tameverts #smashingconf

61. image format matters
@tameverts #smashingconf

62. http://www.webperformancetoday.com/2014/09/17/progressive-image-rendering-good-evil/

63. @tameverts #smashingconf

64. quick case study

65. issue 1
image quality and
compression
issue 2
image sprite
blocking page load

67. average site Fanatics

68. 2-second improvement
in median page load time
almost doubled mobile conversions

69. takeaways

70. 1 Every site and app is different
2 User behaviour is context sensitive and
always changing
3 Performance issues are unpredictable
4 You can’t understand what you don’t measure
5 You don’t have to optimize everything
6 Even small design changes can make
a big difference
@tameverts #smashingconf

71. thank you!
@tameverts
performancebeacon.com
WPOstats.com