1. Performance indicators
|Metrics|Meaning| |-|-| |FP|First Paint| |FCP|First Content Paint| |LCP|Maximum Content Paint| |FID|First Input Delay| Transmission frames per second|
-
FP: Time to first paint pixel
-
FCP: First content drawing, the time when text, image, non-blank Canvas or SVG is drawn for the first time, FP<= FCP
-
FPS: Too low will make users feel stuck.
2. Three core indicators
-
LCP: The drawing time of the largest element in the viewport. This time will change as the page rendering changes, because the largest element in the page may change during the rendering process. In addition, this indicator will stop recording after the user interacts for the first time
-
FID: Records the delay in response when the user first interacts with the page between FCP and TTI. This indicator is actually quite easy to understand. It is to see how much time it takes between user interaction event triggering and page response. If there are long tasks in it, it will inevitably cause longer response time.
-
CLS: Unexpected displacement fluctuations on the page are recorded.
3. Requirements for each indicator
-
If the two indicators of FP and FCP are completed within 2 seconds, our page experience is considered to be excellent
-
LCP, used to measure page load performance, to provide a good user experience, LCP should occur within 2.5 seconds after the page first starts loading
-
FID, which measures interactive performance, in order to provide a good user experience, the FID of the page should be less than 100 milliseconds .
-
CLS, measures visual stability. To provide a good user experience, pages should keep the CLS less than 0.1 .
-
FPS：
-
Animations with a frame rate of 50-60 FPS will be quite smooth and comfortable;
-
For animations with a frame rate between 30 and 50 FPS , the comfort level varies from person to person due to the different sensitivity of each person;
-
Animations with a frame rate below 30 FPS make people feel obvious stuttering and discomfort;
-
Animations with large frame rate fluctuations can also make people feel stuck.