Chrome DevTools: Easily identify key rendering milestones with Paint Timing Markers

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.

🔥️  Tip: Did you know you can programmatically access Paint Timing information in JavaScript? Try code like:

performance.getEntriesByType('paint')

I've written an article about this subject in: Improving Performance with the Paint Timing API.