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.