How do you know what consumers expect from your site? Every shopper is different and every shopping visit is different. Industry stats tell only part of the story. You need to crack the hood and analyze your own real user data. In this talk at SmashingConf Freiburg 2018, I outline how and why to gather real user data, extract action-oriented insights, create a better shopper experience, and improve business metrics.

1. #SmashingConf
connecting the dots
between design, performance,
and conversion rates

3. @tameverts
WPOstats.com

5. performance matters

6. the average web user believes they waste
two days a year waiting for pages to load

7. “web stress”
when apps or sites are slow,
we have to concentrate
up to 50% harder to stay on task
@tameverts

8. Rebuilding Pinterest pages for performance
resulted in 40% decrease in wait time, 15%
increase in SEO traffic, and 15% increase in
signup conversion rate
Ancestry.com saw a 7% increase in
conversions after improving render time by
68%, page weight by 46% and load time by
64%
Staples reduced median page load time by 1
second and 98th percentile load time by 6
seconds, resulting in a 10% conversion rate@tameverts

9. @tameverts

10. how fast is fast enough?
which design issues matter?
which metrics should I monitor?

11. how fast is fast enough?

12. optimal load times for peak conversions
@tameverts

13. even 100ms delays matter
@tameverts

14. which design issues matter?

15. real user data +
machine learning
https://www.thinkwithgoogle.com/marketing-resources/
experience-design/mobile-page-speed-load-time/

16. collected 1M+ beacons of real user data
across 93 attributes, including…
• 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…

17. sessions that convert
have fewer images
than sessions that don’t

18. @tameverts

19. so what can you do
with these numbers?

21. 46%
@tameverts

23. pages with more scripts
are less likely to convert

24. 160+ scripts… uh-oh
@tameverts

25. https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to

26. https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Embrace performance budgets and
learn to live within them.
For mobile, aim for a JS budget of
<170KB minified/compressed.
Uncompressed this is still ~0.7MB of
code.
Addy Osmani • Google engineer

28. which page metrics matter?

29. TTFB DNS TCP Start render
DOM loading DOM ready Page load Fully loaded
TTI Resource timing Number of requests Bytes in
Speed Index PageSpeed Navigation timing DOM elements
DOM size Visually complete TTFP TTFMP

30. DOM ready (aka DOM content
loaded) and average session
load time were the best
indicators of bounce rate

31. load time
the time from the start of the initial navigation
until the beginning of the window load event

32. up to 89.5% accuracy
@tameverts

33. @tameverts

36. start render is
important, too

37. start render
the time from the start of the initial navigation
until the first non-white content is painted to
the browser display

38. NB: first paint is not start render!
first paint (Chrome) start render
@tameverts

39. start render repeat visits

40. wow!
@tameverts

41. start render
problem
blocking CSS
blocking JS
webfonts
solution
inline critical CSS, loadCSS
async, defer, lazy load
display:optional
>
>
>

43. but… sometimes metrics fail

45. custom metrics FTW!
measure performance with high-precision
timestamps, using both synthetic and real user
monitoring
https://www.w3.org/TR/user-timing/
https://speedcurve.com/blog/user-timing-and-custom-metrics/

46. how long does it take
to display the main
product image on my
site?

47. Time to First Tweet
The time from clicking the link to viewing
the first tweet on each page’s timeline
Pinner Wait Time (PWT)
The time from initiating an action (e.g.,
tapping a pin) until the action is complete
(pin close-up view is loaded)
@tameverts

48. @tameverts

49. hero rendering times
H1
largest image
largest background image
https://speedcurve.com/blog/web-performance-monitoring-hero-times/

53. quick case study

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

55. average site Fanatics
@tameverts

57. 2-second improvement
in median page load time
almost doubled mobile conversions
@tameverts

58. takeaways

59. 1. You can’t understand what you don’t measure
2. You don’t have to optimize everything
3. Focus on user-centered metrics
4. Validate your metrics regularly
5. Set targets (e.g., performance budgets)
6. Make yourself accountable (e.g., alerts)
7. Remember that even small design changes can
make a big difference

61. thank you
@tameverts
speedcurve.com/blog