且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题

更新时间:2022-08-29 14:44:08

Optimize website speed


每当您着手提高站点的负载性能时,请始终从 audit 开始。 审计有两个重要功能:


它为您创建了一个基线来衡量后续更改。

它为您提供有关哪些更改将产生最大影响的可行提示。

本文使用下面这个网站应用作为例子。


https://glitch.com/edit/#!/tony


点击 Tony, 然后再点击 remix this,得到一个名称随机生成的项目:

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题点击 show 按钮,打开一个新的 tab. 按 F12 打开 Chrome 开发者工具,切换到 Lighthouse 标签页:

使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题确保在隐身模式下生成 report,以避免 Chrome 扩展的干扰。

稍后,审计报表就生成了:使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题