/dev tips

(194) Long Tasks CSS Autocomplete Presets (196)

Chrome DevTools: Better Paint markers in a Performance recording

19th February 2019
Better Paint markers in a Performance recording

DevTools includes new markers which can explain to you the render progression of your website. The markers are:

These Markers are shown the the Timings section of a Performance Panel recording. As a challenge, see if you can correlate the markers with the visual progression you see in the Network requests + screenshots section. Note: these sections are still included within a Performance Panel recording, just make sure you have the Screenshots checkbox checked!.

Bonus: I wrote an article about the Paint Timing API where you can learn more about the First Paint + First Contentful Paint events listed above.

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