Web Page - Painting

Browser

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.

Metrics

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

Page Loading Key Moment

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.

Documentation





Discover More
Browser
Browser - Rendering

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
HTML - CSS Style in Body (FOUC)

This article talks the Style element when it's located in the body element. It is accepted by browser but this is not the standard. The HMTL DTD does not allow it. But all browsers support it. Mainly...
HTML - Style (Element|Embedded Style) - Attribute

Style in HTML is: an and/of an that permit to declare a style. declarelink element The style element allows style information to be embedded in documents. An style element should be inside...
Browser
Largest ContentFul Paint (LCP)

is a web core vital metrics of page load that measures the time: from navigation to the time when the browser renders the largest image or text block visible within the viewport (ie above the fold)...
Browser
Page (Load|Speed) Metric - First Contentful Paint (FCP)

First Contentful Paint (FCP) : is a page load timing metrics that measures the time: from navigation to the time when the browser renders the first bit of content from the DOM (which may be text,...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...



Share this page:
Follow us:
Task Runner