About
Painting is the last step of the rendering phase for a page load.
This phase takes the box model tree created during the layout rendering phase and positions each pixels accordingly to the screen.
Articles Related
Metrics
The first painting metrics (FP and FCP) are important to the user experience because it provides feedback that the page is actually loading.
First Paint (FP)
FP marks the point when the browser renders anything that is visually different from what was on the screen prior to navigation.
First Contentful Paint (FCP)
FCP is the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a canvas element. See Page (Load|Speed) Metric - First Contentful Paint (FCP)
Debug
- puppeteer has a argument –show-paint-rects that visibly render a border around paint rects in the web page to help debug and study painting behavior.