Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Connecting the dots between design, performance and conversion rates [SmashingConf Freiburg 2018]

569 views

Published on

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.

Published in: Data & Analytics
  • Be the first to comment

Connecting the dots between design, performance and conversion rates [SmashingConf Freiburg 2018]

  1. 1. #SmashingConf connecting the dots between design, performance, and conversion rates
  2. 2. @tameverts WPOstats.com
  3. 3. performance matters
  4. 4. the average web user believes they waste two days a year waiting for pages to load
  5. 5. “web stress” when apps or sites are slow, we have to concentrate up to 50% harder to stay on task @tameverts
  6. 6. 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
  7. 7. @tameverts
  8. 8. how fast is fast enough? which design issues matter? which metrics should I monitor?
  9. 9. how fast is fast enough?
  10. 10. optimal load times for peak conversions @tameverts
  11. 11. even 100ms delays matter @tameverts
  12. 12. which design issues matter?
  13. 13. real user data + machine learning https://www.thinkwithgoogle.com/marketing-resources/ experience-design/mobile-page-speed-load-time/
  14. 14. 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…
  15. 15. sessions that convert have fewer images than sessions that don’t
  16. 16. @tameverts
  17. 17. so what can you do with these numbers?
  18. 18. 46% @tameverts
  19. 19. pages with more scripts are less likely to convert
  20. 20. 160+ scripts… uh-oh @tameverts
  21. 21. https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to
  22. 22. 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
  23. 23. which page metrics matter?
  24. 24. 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
  25. 25. DOM ready (aka DOM content loaded) and average session load time were the best indicators of bounce rate
  26. 26. load time the time from the start of the initial navigation until the beginning of the window load event
  27. 27. up to 89.5% accuracy @tameverts
  28. 28. @tameverts
  29. 29. start render is important, too
  30. 30. start render the time from the start of the initial navigation until the first non-white content is painted to the browser display
  31. 31. NB: first paint is not start render! first paint (Chrome) start render @tameverts
  32. 32. start render repeat visits
  33. 33. wow! @tameverts
  34. 34. start render problem blocking CSS blocking JS webfonts solution inline critical CSS, loadCSS async, defer, lazy load display:optional > > >
  35. 35. but… sometimes metrics fail
  36. 36. 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/
  37. 37. how long does it take to display the main product image on my site?
  38. 38. 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
  39. 39. @tameverts
  40. 40. hero rendering times H1 largest image largest background image https://speedcurve.com/blog/web-performance-monitoring-hero-times/
  41. 41. quick case study
  42. 42. issue 1 image quality and compression issue 2 image sprite blocking page load
  43. 43. average site Fanatics @tameverts
  44. 44. 2-second improvement in median page load time almost doubled mobile conversions @tameverts
  45. 45. takeaways
  46. 46. 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
  47. 47. thank you @tameverts speedcurve.com/blog

×