Paint Timing API Added To Chrome 60

The chase for the best performance metric continues. Of the many performance timing APIs we have been able to put in practice, none have been able to show us some of the more finite details that allow getting closer to the user experience that needs assessment.
Enter the Paint Timing API. With it, we can now finally discover when some pixels are making their way onto the screen so that we might better know when the user can start to experience and consume the page as was meant to be.
We need to understand two events: the First Paint, and the First Contentful Paint. The way the two differ is, one will indicate when anything visiaually different happens on the screen (FP), and the latter (FCP)is when the browser renders the first bit of content from the DOM: that means some text, any image etc...
In fact, in inspecting Chrome DevTools, we now have visual indication of when these two events take place: a dashed green line to indicate the FP and an orange dashed line to represent the FCP. This is what Phil Walton and Shubhie Panicker had discussed in the #io17 talk earier this year, and do suggest you watch the talk, and read the accompanying summary which came shortly after. In the interim, some highlights below from Chrome 60 which included the afore mentioned Paint Timing API.