/dev tips

(203) Web Audio Inspector Improved Performance Monitor (205)

Chrome DevTools: Identify which element contributed to the Largest Contentful Paint

10th September 2019
Identify which element contributed to the Largest Contentful Paint

The Paint Timing Markers in DevTools highlights key rendering milestones in your page load. Milestones include:

The Largest Contentful Paint marker in DevTools can now pinpoint which element was considered for this event. To see the element (once you have a Performance Panel recording), you have a few options:

The Performance Panel has a heap of information, to make things easier, you can often correlate easy-to-identify markers, like the LCP, to Network events and rendering screenshots, all within the same Performance Panel recording.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.