Web Page - Painting

1 - 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.

3 - Metrics

The first painting metrics (FP and FCP) are important to the user experience because it provides feedback that the page is actually loading.

3.1 - 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.

3.2 - 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)

4 - 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.

6 - Documentation

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap