Performance insight overview
Performance insight is a built-in tool in chrome Chrome DevTools (Chrome102 version is released), and it can still be started in chrome DevTool at present, as shown in the figure below: we can simulate the cpu, select 4x slowdown, and start simulating a 4x low-speed CPU. It can also simulate the network to meet the test requirements of different networks.
Click Measure page load in the picture above to start analyzing the current page performance!
The most convenient part of the Performance insights tool is the "insights" panel, which is located on the far right of the panel. It displays events such as render-blocking requests, long tasks, layout changes, etc. in the order in which they occurred in the form of a vertical timeline. Clicking on these specific events will navigate to the "Details" tab, which gives detailed information about its potential cause and elements affected by it, etc., in Details see various factors affecting performance issues, unfortunately The restoration plan still needs to climb over the wall. Let's take the jd homepage as an example. We can easily see that the Cumulative Layout shift is slow (the red box and red arrow are identified as seriously exceeding the standard and need to be rectified). If you want to further optimize, click on this event to view a detailed description of the problem and Specific optimization scheme. In addition, at the top of the page (green box), we can easily see the parameter indicators of FCP, LCP, DCL and TTI on the current page. For details about the meaning of indicators and reference time, please refer to the article:
Click the Toggle visual preview button in the figure below to see the UI displayed at specific time points on the page, and drag the scroll bar to easily see the changes in UI loading at different time points.
Comparison between Performance and Performance insight
We can also use the performance of Chrome DevTools to analyze the performance of the page, but I personally think that the tool is not easy to use. Compared with the previous Performance, the advantages of Performance insight are as follows:
- Provide developers with a more concise and friendly page performance record, and display the entire page rendering process from two dimensions on the main interface, the horizontal axis is the time axis, and the vertical axis is each stage of the rendering process
- Provide developers with the analysis of key page performance indicators, display page performance indicators and defects in the Insight panel, and give repair suggestions
- It is easier for regular developers to understand web page performance, but this is still an experimental module and there is a lot of room for optimization.
Regarding the use of Performance insight, I suggest you try it yourself. The design of this tool is extremely easy to use. I believe that students who have engaged in front-end related work development or testing can get started within ten minutes.
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!