FP, FCP, FMP and LCP

FP: First Paint is the First “point in time” on the timeline. It represents the time when the browser First transmitted pixels to the screen, and the last time a visual change occurred on the page’s screen.

FCP: First Contentful Paint, the First time the browser draws “content” to the screen

The difference between FP and FCP: the key word of FP is “visual change”, as long as there is a visual change, the page will trigger FP; The key word of FCP is “DOM content”, such as the drawing of text, pictures, SVG, Canvas and other elements.

FMP: First Meaningful Paint is effectively drawn for the First time, indicating the point at which the “main content” of the page begins to appear on screen.

The FMP algorithm may be inaccurate in the presentation of actual page content, such as font rendering.

Largest Contentful Paint Indicates the point at which the Largest visible element of the visible area “content” appears on the screen.

TTI: Time to Interactive Indicates the Time when the page reaches the Interactive state for the first Time.

The core is the interaction state between long JS tasks and blocked pages, which will hinder the user interaction process. The solution is to slice the long tasks, which has a better effect under the condition that the tasks of the main thread are not more than 50ms.

TTFB: Time to First Byte: indicates the Time when the browser accepts the First Byte.

FCI: First CPU Idle indicates the time when the CPU is Idle for the First time. This time is supplementary to TTI. When the main thread is Idle, it indicates that the page rendering is almost complete and the user’s response can be accepted.

TTI differs from FCI: FCI means that the browser is truly responsive to user input for the first time, while TTI means that the browser is consistently responsive to user input.

FID: First Input Delay indicates when the page can give the user the feedback time for the First interaction. This value can well reflect the performance of the page interaction response. Interaction triggered by TTI before the FID will be longer, because the page may not be ready at this time. Interaction FID triggered after TTI is shorter because the page is loaded while waiting for interaction.

DCL: The time when the DOMContentLoaded event is triggered

L: Time when the onLoad event is triggered

The difference between the DCL and L is that the DCL is triggered once the browser has parsed the HTML, whereas the onLoad event is triggered only after all the resources on the page have been loaded.

Speed Index: Indicates the average time to display the visible part of the page (only the visible area)

FPS: Frames Per Second Indicates the refresh rate of the display Per Second

The Link:

Common terminology in Web performance