Product + Performance

Product + Performance

Etsy's Performance team gave this internal presentation to all the Product Managers at Etsy about how to incorporate performance into their product development cycles.

245cee81a9c424266e5e401d844ea881?s=128

Lara Hogan

January 23, 2015
Tweet

Transcript

  1. Product + Performance Etsy’s Performance Team

  2. We — performance.

  3. Why is perf important? Etsy shop: sharpshirter

  4. Perf Team #performance 2 seconds ! (what users expect) 4

  5. Perf Team #performance +12% bounces ! when we added 160k

    of page weight on mobile web 5
  6. Perf Team #performance Performance on mobile is as slow as

    dialup. 6
  7. Cable connection 3G connection

  8. Perf Team #performance 8 Delay User Reaction 0-100ms Instant 100-300ms

    Slight perceptible delay 300-1000ms Task focus, perceptible delay 1s+ Mental context switch 10s+ I’ll come back later…
  9. Perf Team #performance more favoriting (and fewer bounces) ! when

    the team improved scrolling performance
 in the activity feed 9
  10. Perf Team #performance better experiment results ! We lose beacons

    on slower networks, 
 and the poorer UX can impact engagement metrics! 10
  11. Perf Team #performance Native app performance tooling is coming. 11

  12. Perf Team #performance We have tools for you for the

    web! Front-end: WebPagetest, Chrome DevTools Back-end: CrossStitch, XHProf Back-end in experiment results Soon: Front-end in experiment results, App performance 12
  13. Perf Team #performance Aim for: 800ms back-end load time 2

    seconds total load time on WebPagetest (non-mobile) 4.5 seconds mobile total load time 13
  14. Perf Team #performance Aim for: <1 MB total page weight

    SpeedIndex <1000 All images compressed No scrolling jank 14
  15. When you’re iterating on existing features

  16. Perf Team #performance 1. Ask the Performance Team for an

    analysis!
 We can provide quick/high-impact ideas
 for performance improvements. 16
  17. Perf Team #performance 2. Follow our tips for audits in

    go/perfworkflow 17
  18. Perf Team #performance 3. In your experiment: "Add Additional Metric"

    under "Detailed Statistics", select "Backend Load Time" for the event you want to measure. 
 We’re working on front-end time too! 18
  19. Perf Team #performance 19

  20. When you’re designing and developing new features

  21. Perf Team #performance 1. Create a performance budget. Be clear

    up front what you’re aiming for, such as: • total page load time, especially on mobile • total page weight • total CSS and JS files 21 2s on cable connection 4s on 3G 1mb only one of each
  22. Perf Team #performance 22 Example Metric Example Goal How we’ll

    measure Page weight 1Mb WebPagetest, Chrome, Dulles VA, Cable connection Page load time, mobile 4.5 seconds WebPagetest, Chrome, Dulles VA, 3G connection Page load time, 
 mobile in Australia 6.5 seconds WebPagetest, Chrome, Australia, 3G connection Frame rendering 16.6ms Chrome DevTools New CSS, JS files One of each Chrome DevTools App launch time 1 second iOS simulator, Android simulator
  23. Perf Team #performance 2. Audit on your VM before running

    any experiment! 23
  24. Perf Team #performance 3. Create a performance dashboard for your

    feature.
 You can measure things like total page weight, 
 back-end and front-end load time over time. Use the benchmarks you created in your performance budget. 24
  25. Perf Team #performance 4. Ask the Performance Team for an

    analysis!
 We can provide quick/high-impact ideas
 for performance improvements. 25
  26. Perf Team #performance Resources: Basics of Performance (PDF) Join our

    Performance Google Group “Performance Workflow” on Confluence Example Performance Budget on Google Sheets App Perf Measurement Tools on Confluence (in progress) 26
  27. Some of the work that Perf is doing * You

    can follow along!
  28. Perf Team #performance 28

  29. Perf Team #performance 29

  30. Perf Team #performance Where are we with apps? 1. Right

    now we’re figuring out what to measure. 2. Next we’ll figure out how what tools we need to use to measure each thing. 3. Then we’ll document and start teaching everybody about how to measure app performance. 30
  31. Questions? Etsy shop: sharpshirter