Chrome DevTools: Easily identify key rendering milestones with Paint Timing MarkersLast updated: 20th July 2020
The Paint Timing Markers feature allows you to view colour-coded markings in the Performance Panel. These Timings include:
- First Contentful Paint
- First Meaningful Paint
- DOMContentLoaded Event
- Onload Event
You can correlate these markings with the rendering data shown in a Performance Panel profile to understand which resources contributed to certain events.
I've written an article about this subject in: Improving Performance with the Paint Timing API.