Product + Performance

245cee81a9c424266e5e401d844ea881?s=47 Lara Hogan
January 23, 2015

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. 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…
  2. 9.

    Perf Team #performance more favoriting (and fewer bounces) ! when

    the team improved scrolling performance
 in the activity feed 9
  3. 10.

    Perf Team #performance better experiment results ! We lose beacons

    on slower networks, 
 and the poorer UX can impact engagement metrics! 10
  4. 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
  5. 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
  6. 14.

    Perf Team #performance Aim for: <1 MB total page weight

    SpeedIndex <1000 All images compressed No scrolling jank 14
  7. 16.

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

    analysis!
 We can provide quick/high-impact ideas
 for performance improvements. 16
  8. 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
  9. 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
  10. 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
  11. 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
  12. 25.

    Perf Team #performance 4. Ask the Performance Team for an

    analysis!
 We can provide quick/high-impact ideas
 for performance improvements. 25
  13. 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
  14. 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