Drawing the Performance of Your Web App

Lightning talk presented at SEM.js about how to visualize and implement better web app performance. https://spin.atomicobject.com/2015/09/01/optimize-web-app-performance/

Transcript

1. Drawing the Performance of Your Web App Jeanette Head from Atomic Object @JeanetteHead17
3. Materials List • Big Paper or Whiteboard • Post Its • Colorful Markers (not required, but nice)
4. Step 1: Draw It Draw… All visible pieces of data Buttons that load more data Modals
5. Step 2: Load It With the network tab open, load the page you just drew
6. Step 3: Record it What call was made? When was the call made? (1st) Did it return a list of data? (yes) How long did it take? How much longer does it take if 1 item is added? 20ms
7. Step 4: Stick It
8. Analysis
9. 20ms Find Duplicate Calls If 2 sticky notes are making the same call, that’s a duplicate
10. Find Expensive Calls 20ms Compare the times each request takes to complete
11. Find Expensive Lists How big do you expect your dataset to be? 20ms
12. Tally it all up! This is how fast you can expect your page to load. 20ms 20ms 20ms 20ms Know Your Expected Load Time
13. Diagram Full of Sticky Notes but No Unneeded Calls? Re think your API Re think your design
14. That’s All, Folks! Jeanette Head from Atomic Object @JeanetteHead17