Perf Metric Analysis Pages

HTML pages used for perf metric analysis, to help visualize and understand the differences between various perf timings (i.e., domInteractive, domContentLoaded, onload, LCP, TTI, and so on).

Usage

Can access the latest page at: https://brophdawg11.github.io/perf-metric-analysis/

For local development, run npx http-server docs/

Notes

• First Paint
  • Document parsed + blocking stylesheets downloaded
• domInteractive
  • First Paint + blocking scripts downloaded
• DOMContentLoaded
  • domInteractive + defer scripts downloaded/executed
  • Does not include any synchronous or asynchronous waterfall scripts from defer
  • Does not include images completing
• domComplete
  • DOMContentLoaded + images + async scripts downloaded/executed
  • Does include any synchronous or asynchronous waterfall scripts from async
  • Effectively when the load event fires
• load
  • domComplete + synchronous code that runs as part of the load event
  • Does not include any additional scripts added during the load event listener