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/
Drawing thePerformance of YourWeb AppJeanette Head from Atomic Object@JeanetteHead17
View Slide
Materials List• Big Paper or Whiteboard• Post Its• Colorful Markers (not required, but nice)
Step 1: Draw ItDraw…All visible pieces of dataButtons that load more dataModals
Step 2: Load ItWith the network tab open, loadthe page you just drew
Step 3: Record itWhat call was made?When was thecall made? (1st)Did it return a listof data? (yes)How long did it take?How much longer does ittake if 1 item is added? 20ms
Step 4: Stick It
Analysis
20msFind Duplicate CallsIf 2 sticky notes aremaking the same call,that’s a duplicate
Find Expensive Calls20msCompare the timeseach request takesto complete
Find Expensive ListsHow big do youexpect yourdataset to be?20ms
Tally it all up! This is howfast you can expect yourpage to load.20ms20ms20ms20msKnow Your Expected Load Time
Diagram Full of Sticky Notesbut No Unneeded Calls?Re think your APIRe think your design
That’s All, Folks!Jeanette Head from Atomic Object@JeanetteHead17