First Paint – UI Metric

by

First Paint is a UI Metric denotes the time when the browser renders the very first pixels to the screen. In simple words, it refers to the time at which the first pixel renders on a screen after a user navigates to a web page. The browser can render anything that is visually different from what was on the screen prior to navigation. Also, note that First Paint is part of the Paint Timing API.

Let’s try to understand First Paint visually with an example:

First Paint - UI Metric
Figure 01

In the above figure, you can see 4 images of the same monitor:

  1. The first image shows that the user has been navigated to a new web-page but the content has not been arrived yet to display (say at t=0)
  2. The second image shows ‘First Paint’ when screen color is changed (t=0.5 second)
  3. The third image shows ‘First Contentful Paint’ when first content has been loaded on the screen (t=0.8 second)
  4. The forth image shows ‘Largest Contentful Paint’ when all the web page content has been loaded (t=1.2 seconds)

First Paint is subtle (difficult to analyse) and hence end user may or may not experience it. For an end-user, it is easy to experience the First Contentful Paint. Therefore preference is given to First Contentful Paint over First Paint.

You may be interested:

Leave a Comment