天天看点

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

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 应用的性能问题

继续阅读