Drawing the Performance of Your Web App

1949e3c40f8eb31baacc9a2f6e9e5d2a?s=47 Jeanette
November 20, 2015

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/

1949e3c40f8eb31baacc9a2f6e9e5d2a?s=128

Jeanette

November 20, 2015
Tweet

Transcript

  1. Drawing the Performance of Your Web App Jeanette Head from

    Atomic Object @JeanetteHead17
  2. None
  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