justice.js

From Jason Ormond comes justice.js:

A performance metric bar with a streaming FPS graph.

It shows:

  • TTFB ( Time To First Byte )
  • DOM Interactive
  • DOM Complete
  • First Paint
  • Page Load
  • Number of Requests
  • FPS ( Frames Per Second )

Here is a screenshot of it from a page load of josephscott.org:

justice

I like that it has budget options for each number. It then sets the color of each metric based on that budget, making it easy to tell if you are over/under at a glance ( > 80% budget: Yellow ).

Works well as a bookmarklet too.

JavaScript Performance Monitor

stats.js is a nifty little performance monitor:

This class provides a simple info box that will help you monitor your code performance.

– FPS Frames rendered in the last second. The higher the number the better.
– MS Milliseconds needed to render a frame. The lower the number the better.
– MB MBytes of allocated memory. (Run Chrome with –enable-precise-memory-info)

The FPS monitor looks like this:

stats-js