The recent work needs to start working on front-end performance testing. Since there is no relevant experience before, it costs a certain amount of learning costs. This article focuses on summarizing the meaning of the core indicators involved in front-end performance testing and the range of response time. I hope it will be helpful to students who have just entered the field of front-end performance testing! These indicators are mainly based on google web vitals. The article is very practical and I recommend everyone to collect it.
LCP
Largest Contentful Paint (LCP): Maximum content painting, measuring loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of the page first starting to load.
reasonable time frame
FID
First Input Delay (FID): FID measures the time from the first time a user interacts with a page (such as when they click a link, tap a button, or use a custom control powered by JavaScript) until the browser responds to the interaction and is actually able to start The time elapsed to process the event handler, the page's FID should be 100ms or less. Tools like lighthouse that load pages in a simulated environment without a user cannot measure FID (without user input). However, the Total Blocking Time Total Blocking Time (TBT) metric is not only a lab measurement, but also an excellent proxy for FID.
reasonable time frame
CLS
Cumulative Layout Shift (CLS): Cumulative layout shift, measuring visual stability. To provide a good user experience, the CLS of the page should be kept at 0.1. or less.
reasonable time frame
TBT
Total Blocking Time Total Blocking Time (TBT), which measures the total time between First Contentful Paint's first content drawing (FCP) and Time to Interactive interactive time (TTI), during which the main thread is blocked for too long, Unable to respond to input. Whenever there is a long task (a task running on the main thread for more than 50 milliseconds), the main thread is considered "blocked". We say that the main thread is "blocked" because the browser cannot interrupt an ongoing task.
TTI
Time to Interactive (TTI): The Time to Interactive metric measures the time it takes for a page to start loading until the main subresource finishes rendering and is able to respond to user input quickly and reliably. In order to provide a good user experience, websites should strive to control the interactive time within 5 seconds when testing on common mobile hardware.
To calculate a TTI based on a page's performance trace, follow these steps:
1 First, perform First Contentful Paint (FCP).
2 Search forward along the time axis for a quiet window with a duration of at least 5 seconds, where the quiet window is defined as: no long tasks and no more than two network GET requests being processed.
3 Search backward along the time axis for the last long task before the quiet window, if no long task is found, stop execution at the FCP step.
4TTI is the end time of the last long task before the quiet window (same as FCP value if no long task was found).
The following diagram will help you understand the above steps more intuitively:
FCP
First Contentful Paint (FCP): The First Contentful Paint metric measures the time from when a page starts loading to when any part of the page content finishes rendering on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.
In the loading timeline above, the FCP occurs on frame two because that's when the first text and image elements finish rendering on the screen.
reasonable time frame
The figure below shows the difference between FCP and LCP
TTFB
Time To First Byte (TTFB): is a metric that measures the time between the start and arrival of the first byte of a request and response to a resource.
TFB is a summary of the time loss for the following requesting nodes:
- Redirect time Redirect delay
- Service worker startup delay (if applicable)
- DNS query latency
- Latency for connection establishment and TLS
- request, the delay until the first byte of the response arrives
Reduced latency for connection establishment and backend services will help lower TTFB
reasonable time frame
Every article of mine hopes to help readers solve problems encountered in actual work! If the article helped you, please like, bookmark, forward! Your encouragement is my biggest motivation to keep updating articles!