Whenever you set out to improve the load performance of your site, always start with audit. Audit has two important functions:
- It creates a baseline for you to measure subsequent changes.
- It gives you actionable hints on which changes will have the greatest impact.
This article uses the following website application as an example.
https://glitch.com/edit/#!/tony
Click Tony, and then click remix this to get a project with a randomly generated name:
Click the show button to open a new tab. Press F12 to open the Chrome Developer Tools and switch to the Lighthouse tab:
Establish a baseline
Select only the checkboxes of Performance and Mobile:
Click generate report, and the audit will begin:
Make sure to generate the report in incognito mode to avoid interference from Chrome extensions.
After a while, the audit report is generated:
The number at the top of the report is the overall performance score of the website. Later, when you make changes to the code, you should see this number rise. A higher score means better performance.
The indicators section provides a quantitative measurement of site performance. Each metric provides insight into different aspects of performance. For example, First Contentful Paint tells you when the content is first drawn on the screen, which is an important milestone in the user's perception of page loading, and Time To Interactive marks the point in time when the page appears to be ready to handle user interaction.
For each option, you can click learn more to study in depth:
Passed audits contains the audit items passed by the web application:
The Diagnostics column is where the application can be improved:
More original articles by Jerry, all in: "Wang Zixi":
chrome
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。