头图

Use the lighthouse function of Chrome Developer Tools to analyze web application performance issues

JerryWang_汪子熙
中文

Optimize website speed

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":

阅读 494

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

781 声望
1k 粉丝
0 条评论

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术...

781 声望
1k 粉丝
文章目录
宣传栏