chrome 性能数据分析 devtool performance insight 谷歌性能分析工具

1、谷歌插件lighthouse的基本介绍

Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。

2、lighthouse使用指南

在高版本（应该是

按

针对不同的适用场景，我们可以通过多种方式来安装并使用

• Chrome 浏览器插件。Chrome 插件的形式提供了更加友好的用户界面，方便读取报告。
• Chrome DevTools。该工具集成在最新版本的 Chrome 浏览器中，无需安装即可使用。
• Lighthouse CLI 命令行工具。方便将 Lighthouse 集成到持续集成系统中。
• 编程的方式。我们也能通过

3、lighthouse生成网站报告

先访问需要评估的网站，比如

 

 

 

lighthouse 会运行一系列的测试审查这个页面，然后它会把关于页面执行的一些性能指标以报告的形式展示给你。你可以参考这份报告中的一些指标提示来提升你的网站应用。Lighthouse 能够生成一份 JSON 或 HTML 报告，HTML 可以直接打开，json 格式的报告可以通过 https://googlechrome.github.io/lighthouse/viewer/ 这个地址来打开。如图所示：

 

 

 

4、lighthouse 运行的生命周期

Lighthouse 运行测评的过程有一套完整的生命周期，可以划分成三个主要流程：

Collecting（收集数据）：首先是

Auditing（分析数据）：然后进入

Report（生成报告）：最后进行

如下图：

 

 

 

命令行工具基于此提供了生命周期的选项，我们可以让

1. lighthouse https://example.com/ -G

如果想要跳过浏览器的交互，直接从本地读取页面的临时数据，运行测评和产出结果报告，则可以使用

1. lighthouse https://example.com/ -A

两个选项同时使用，就会运行整个测评的生命周期，与直接运行

1. lighthouse https://example.com -GA

如果不想使用默认的

1. lighthouse -GA=./mycustomfolder https://example.com

参考：https://lavas-project.github.io/pwa-book/appendix01.html

5、lighthouse 报告的指标分析

使用

 

 

 

5.1、性能（Performance）

性能评分的分值区间是0到100，如果出现0分，通常是在运行 Lighthouse 时发生了错误，满分100分代表了网站已经达到了98分位值的数据，而50分则是75分位值的数据。

影响评分的性能指标：性能测试结果会分成

Lighthouse 会衡量以下 Metrics 性能指标项：

• 首次内容绘制（First Contentful Paint）。即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。
• 首次有效绘制（First Meaningful Paint）。衡量了用户感知页面的主要内容（primary content）可见的时间。对于不同的站点，首要内容是不同的，例如：对于博客文章，标题及首屏文字是首要内容，而对于购物网站来说，图片也会变得很重要。
• 首次
• 可交互时间（Time to Interactive）。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。
• 速度指标（Speed Index）。衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。
• 输入延迟估值（Estimated Input Latency）。这个指标衡量了页面对用户输入行为的反应速度，其基准值应低于 50ms。

Metrics 部分的指标项会直接影响分数，可以作为我们的主要参考点。

 

另外的两部分中， Opportunities 指的是优化机会，它提供了详细的建议和文档，来解释低分的原因，帮助我们具体进行实现和改进。Diagnostics 指的是现在存在的问题，为进一步改善性能的实验和调整给出了指导。这两者不会纳入分数的计算。

5.1.1、性能评分标准

每一项性能指标对评分的贡献都有其计算逻辑，Lighthouse 会将原始的性能值映射成为 0-100 之间的数字。

例如，FMP（First Meaningful Paint）的原始值是从页面初始化开始到主要内容渲染成功的耗时，根据真实站点的数据，顶级性能的站点的 FMP 值约为 1220ms，这个值会被映射成 Lighthouse 的 99 分。

针对不同的评分，Lighthouse 用了不同的颜色进行标注，分值区间和颜色的对应关系如下：

• 0 - 49（慢）：红色
• 50 - 89（平均值）： 橙色
• 90 - 100（快）： 绿色

各个指标对性能评分的贡献并不相同，权重较大的指标，对性能评分的影响更大一些。各指标权重分配情况可参考：https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0

 

5.2、访问无障碍（Accessibility）

访问无障碍评分的分值由相关指标的加权平均值计算而来。可以在评分详情查阅每项指标的具体权重。同理，较大权重的指标项对分数的影响较大。

无障碍性的每个指标项测试结果为pass或者fail，与性能指标项的计算方式不同，当页面只是部分通过某项指标时，页面的这项指标将不会得分。例如，如果页面中的一些元素有屏幕阅读器友好的命名，而其他的元素没有，那么这个页面的

 

5.3、最佳实践（优化）（Best Practice）

最佳实践评分的分数区间为0-100。影响这项评分的指标项的权重都是相同的。

比如：推荐使用

 

5.4、搜索引擎优化（SEO）

比如：图片元素使用

 

5.5、PWA（Progressive Web App）

Lighthouse 使用 PWA 基准检查项列表（Baseline PWA Checklist）进行测评，测评结果将这些指标项分成了四个类别，共包含12个自动测试项和3个手动测试项，其中各个自动测试项的评分权重是相同的。PWA 的评测指标对我们来说非常重要，我们可以从这四个类别详细了解一下基准指标项。

快速可靠：

1. 页面在移动网络条件下能够快速加载。
2. 在离线条件下页面能够返回状态码200。这里我们可以通过 Service Worker 来实现离线可用。
3. start_url 在离线条件下返回状态码200。start_url 是前面章节我们提到过的 manifest.json 中的一个属性，它指定了用户打开该 PWA 时加载的 URL。

可安装：

1. 始终使用
2. 注册
3. 使用

PWA 优化：

1. 将
2. 配置自定义启动画面。
3. 设置地址栏主题颜色。
4. 页面内容针对视口大小自适应，对移动用户的展示更友好。
5. 使用了
6. 当

手动测试项：

1. 站点跨浏览器可用，如主流浏览器
2. 页面间切换流畅，即使在较差的网络环境下，切换动画也应该简洁顺畅，这是提高用户感知体验的关键。
3. 保证每个页面都有独一无二的

除了上述基准指标项之外，为了让

  

6、node及Chrome版本要求

使用

node > =8.9 （未验证）

Chrome 浏览器必须 >= 79 ，否则 lighthouse 可能会运行失败，或者是某些指标无法显示出来。比如下面我安装的是 Chrome75.0.3770.80，使用命令行执行 lighthouse 时有两个指标显示异常：

 

 

 

performance 和 best practice 指标显示异常，错误如下：

       

 

 

 ---------------------------------------------------------------------------------