Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drawing the Performance of Your Web App

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/


November 20, 2015

More Decks by Jeanette

Other Decks in Technology


  1. Materials List • Big Paper or Whiteboard • Post Its

    • Colorful Markers (not required, but nice)
  2. Step 1: Draw It Draw… All visible pieces of data

    Buttons that load more data Modals
  3. 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
  4. 20ms Find Duplicate Calls If 2 sticky notes are making

    the same call, that’s a duplicate
  5. Tally it all up! This is how fast you can

    expect your page to load. 20ms 20ms 20ms 20ms Know Your Expected Load Time
  6. Diagram Full of Sticky Notes but No Unneeded Calls? Re

    think your API Re think your design