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.

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