vlambda博客
学习文章列表

作为测试工程狮，性能是我们非常关注的，我们会尝试使用各种工具去分析web、app、服务性能。Lighthouse是一款Google开源的自动化工具，主要用于改进网络应用的质量。使用超级简单，只要提供一个链接就能对页面性能、PWA、可访问性（无障碍）、最佳实践、SEO进行分析。Lighthouse也会对各个测试项结果进行打分，同时给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。如果你想了解lighthouse究竟都能分析什么，我相信这一篇文章可以帮到你，不会再百度到更详细的。

1. 安装使用（不知道是啥，没关系，先装）

安装方式有三种，可以pick你习惯使用的方式。

1.1 第一种 使用 Chrome 扩展程序运行

1. 打开Chrome ，访问链接https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk ，直接点击安装扩展程序即可。

2. 访问需要分析的链接，如https://www.baidu.com/，点击菜单栏上的Lighthouse 灯塔图标的扩展程序，再点击Generate report 生成分析报告。

3.分析报告在这里。会给出页面性能、PWA、可访问性（无障碍）、最佳实践、SEO五方面的性能分值，以及具体哪一项不符合Google网页的最佳实践。

1.2 第二种 使用Chrome开发者工具

访问需要分析的链接，打开Chrome 开发者工具，选择Lighthouse -> Generate report ，会直接生成分析报告。这里可以选择分析的内容，设备类型。

1.3 第三种 使用命令行工具运行（个人喜欢这个）

  1. 安装 npm install -g lighthouse

  2.运行： lighthouse https://www.mi.com会直接在当前目录生成 xxx.report.html 报告。报告内容如上。

使用命令行的方式，能够灵活的配置和生成分析报告。如果想使用更多的用法，或者想在自动化中应用可以使用命令行的方式。

2. 性能数据怎么来的

一张图帮我们了解数据是怎么来的～

下面简述一下 lighthouse 中的重要组件：
driver： 所有自动化都离不开的驱动程序。提供了实现Chrome DevTools Protocol的API，可以通过调用API进行数据收集、调试、分析
Gatherers： 使用驱动程序driver来收集页面信息，将数据输出到Artifacts
Audit： 检查。接下来就是根据Artifacts中的数据进行计算，校验成功、失败的检查项，最后会从不同类别进行评估，得到各项指标的检测结果以及综合分数，评分时不同指标占不同的权重。
Report： 生成报告。将Audit检查结果进行处理，生成并渲染得到最终性能评估报告。
顺便说下 Chrome DevTools Protocol，允许第三方对基于chrome的web应用程序进行调试、分析等，它基于WebSocket，利用WebSocket建立连接DevTools和浏览器内核的快速数据通道。也就是说任何一个实现了 Chrome DevTools Protocol 的程序都可以用来调试页面,可以自己开发工具获取chrome的数据。

3. 究竟会分析哪些性能数据

Lighthouse 对页面性能、PWA、可访问性（无障碍）、最佳实践、SEO五项指标进行分析，我们可以通过报告查看各项得分，以及每项存在的问题。接下来我们详细说说每个分值是怎么计算的，以及每项分析的指标说明的是什么问题。

3.1 页面性能

Lighthouse 在页面性能项会检查三方面，Metrics指标、Opportunities可优化项、Diagnostics诊断，其中只有Metrics指标会计入最终分数。

Metrics指标

页面性能分值，是根据Metrics指标加权计算获得的，不同指标权重不一样。如FCP首次内容绘制指标，基于真实网络数据，FPC性能最佳呈现约为1860ms，绘制时间在1860～8000ms之间时就会映射到具体的99～0分，绘制时间小于1860ms, 就会映射到100分，同时这一项指标的权重占比15%，所以满分是15分。lighthouse 6.0版本指标权重参考下图，想了解更多详细信息，戳链接：https://googlechrome.github.io/lighthouse/scorecalc/

介绍下相关的性能指标：
FCP (First Contentful Paint)
首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素
SI (Speed Index)
指标用于显示页面可见部分的显示速度, 单位是时间
LCP (Largest Contentful Paint)
最大内容渲染，代表在viewport中最大的页面元素加载的时间
TTI (Time to Interactive)
可交互时间，用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点
TBT (Total Blocking Time)
页面阻塞总时长，TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总
CLS (Cumulative Layout Shift)
累积布局偏移，总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了, 则会被计算进去

以上六个性能指标，每一项都有基于网络数据得到的最佳性能数值，通过计算每一项映射出来的分值、权重，最后可以得到页面性能的评分。页面性能同用户体验息息相关，也是非常值得我们优化的方向。

Opportunities可优化项

Opportunities可优化项不会计入得分。但是在Opportunities可优化项中，LightHouse 针对我们的性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间，接下来说下有哪些可优化项。

• 消除渲染阻塞资源。 在head标签里面的CSS和JS都会阻塞渲染，所以应该避免head标签JS、CSS阻塞，把需要首屏渲染的样式从整体样式中剥离出来优先加载。

• 合适尺寸的图片。 让请求的图片和使用尺寸对应，避免缩放，造成浪费

• 延迟加载。 延迟加载是一种在需要时才开始加载图片或其他任何内容的方法。当图库中有 1000 个图片时，并非所有图片都需要加载。只需加载前 10 个，其余的等用户需要时再加载

• 压缩CSS。 不用解释，传输更快

• 压缩JS。 这不用解释，传输更快

• 移除无用的CSS。 减少传输实际上不需要的代码

• 优化图片编码方式。

• 下一代图片格式。 使用更好的压缩算法压缩图片

• 文本资源压缩。

• 预连接。 和DNS Prefetch类似，但是，更进一步。它不仅要求浏览器预解析指定域名的DNS，还需要预先与服务器握手以及TLS协商

• 减少服务响应时间
  

• 避免多页面重定向

• 预加载。 顺便了解了下预加载和懒加载。预加载，提前加载图片，当用户需要查看时可直接从本地缓存中渲染；懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数

• 对于动画的内容使用视频格式。 大量GIF图片的网站是非常低效的。通过用video来替换GIF动画可以使网页加载速度大大提升。

• 减少第三方代码的影响

Diagnostics诊断

Diagnostics诊断项不会计入得分。下面会列举一下具体的诊断项，感兴趣的可以仔细专研每一项。

• 避免巨大的网络负载

• 通过有效的缓存策略缓存一些静态资源

• 避免DOM太大

• 避免链接关键请求

• 通过User Timing API标记和测量

• 减少JavaScript运行时间

• 最小化主线程工作

• 在web 字体加载期间，确保文本信息可见

• 保持低请求数量和传输大小

3.2 PWA

PWA是什么，Progressive Web App，渐进式应用。Google 16年推出的项目，PWA并不是单指某一项技术，更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。
渐进式增强WEB应用特点：
可靠——即时加载，即使在不确定的网络条件下也不会受到影响
快速—— 据统计，如果站点加载时间超过 3s，53% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应
沉浸式体验—— 感觉就像设备上的原生应用程序，具有沉浸式的用户体验。
PWA中包含的核心功能及特性如下：

1. Web App Manifest

2. Service Worker

3. Cache API 缓存

4. Push&Notification 推送与通知

5. Background Sync 后台同步

6. 响应式设计

   Lighthouse 在PWA项会对以下四个小方面进行检查验证（以下皆为扣分项）：

快速可靠

• 移动网络下，页面加载速度不够快。这里用的是用户能够感知到加载慢的两个指标是FMP、TTI。如4G网络下，可交互时间超过10秒,则会标记为审查失败。

• 离线状态下，页面没有返回200的响应内容

• 离线状态下，主屏幕启动start_url, 页面没有返回200的响应内容（无论网络状态如何都应该正常响应）start_url 用来描述当用户从设备的主屏幕点击图标进入时，出现的第一个画面.

可安装性

• 没使用HTTPS

• 没有注册Service worker 缓存控制页面，主屏幕页面。通过 service workers 可以在离线或者网速极差的环境下工作

• Web应用程序清单配置不符合安装设备主屏幕要求

让PWA最优化

• 不能将HTTP流量重定向到HTTPS

• 没有配置自定义启动动画

• 内容尺寸没有正确适配窗口。当你的页面的内容的宽度比视窗的宽度更小或更大,让内容适配窗口可以让用户更易于阅读。

• 没有使用<meta name="viewport”> 标签设置宽度、缩放比例，让网页的宽度自动适应手机屏幕的宽度

• Js失效时没有提供fallback内容

• 没有提供有效的桌面图标

手动检查附加项-不会记分

• 网站能够在主流的浏览器上运行

• 每个页面都有URL，是唯一的，便于在社交媒体上共享

• 弱网条件，页面访问没有阻塞，用户无感知

3.3 可访问性（无障碍）

Accessibility 指的是那些可能超出"普通"用户范围之外的用户（残障用户）的体验，他们以不同于你期望的方式访问你的网页或进行交互，增加可阅读和可理解性，所以更应该被重视。
这些检查强调提高web应用程序的辅助性能，可以译为 “网页亲和力（又称网络无障碍、网络可达性、网络可用性、网页可访问性）” 。
Lighthouse 在Accessibility项会对以下内容检查验证（以下皆为扣分项），简单列举几个，这里检查点很多很多，还需要花时间去了解：

对比度

• 背景色和前景色没有足够的对比度

导航

• [accesskey]值不唯一。

• 页面不包含一个标题,跳过链接,landmark区域

• 属性active,focusable的元素ID 不唯一

• 标题元素不是有序的

ARIA

适用于跨越某些领域的障碍，使用 ARIA 属性，我们就可以为元素提供缺少的信息，以便屏幕阅读器能正确解读它

通过以上设置都是为了帮助用户在网页上导航、找到内容和方便键盘操作等等。想了解更多关于可访问性检查点，可以查看此文档：https://web.dev/lighthouse-accessibility/

3.4 最佳实践

这些检查项通过整体代码改善让你的web应用程序更健康。（以下皆为扣分项）

通用最佳实践

• 页面没有指定HTML类型,从而触发页面怪异模式

• 网站错误日志输出到控制台

• 图片显示比例不正确

让你的页面更快

• 没有使用HTTP/2

• 使用document.write()。这种方式应该被避免，因为使用document.write()时浏览器必须采取一些多余的步骤，会降低页面加载的速度。

• 没有使用被动监听来改善滚动的性能

让你的页面更安全

• 没使用HTTPS

• 链接到跨域的不安全链接

• 包含存在已知安全漏洞的JavaScript库

一个好的用户体验

• 页面加载时请求地理位置权限

• 页面加载时请求通知权限

• 阻止用户在密码字段使用粘贴功能。密码粘贴实际上提高了安全性,因为它允许使用密码管理器

避免使用弃用的技术

• 使用应用级缓存。Application Cache已经被弃用了，建议通过service worker使用缓存的API替代。

• 使用废弃的API

3.5 SEO

什么是SEO？
Search English Optimization，搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。

SEO分类需要科普一下：SEO分两类，白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。那么白帽SEO能做什么呢？

1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；

2. 网站内容优化：内容与关键字的对应，增加关键字的密度；

3. 在网站上合理设置Robot.txt文件；

4. 生成针对搜索引擎友好的网站地图；

5. 增加外部链接，到各个网站上宣传
   Lighthouse 在SEO项会对以下几项内容进行检查验证（以下检查点皆为扣分项）

确保搜索引擎理解你的内容

• Document没有<title>元素

• Document没有meta描述

• 链接没有描述文案

• Document没有有效的hreflang属性

• Document没有添加有效的rel=canonical 链接

确保搜索引擎可以遍历索引到你的页面

• 页面返回了不成功的HTTP状态码

• 页面索引被阻塞，如 content=“noindex”（noindex表示不希望搜索引擎收录的页面和链接，noindex和nofollow两个标签就是为了解决这个问题。noindex：禁止收录该页，nofollow：禁止抓取该链接）

• robots.txt文件失效。在搜索引擎搜索遇到新网站时，它将打开该网站的robots.txt文件，该文件告诉搜索引擎允许该站点上的哪些URL进行索引

• Document使用了插件。搜索引擎往往索引不到依赖于浏览器插件的内容，如Java or Flash

确保你的页面对移动设备更友好

• 没有使用<meta name="viewport”> 标签设置宽度、缩放比例

• Document设置的字号可读性差。在移动设备上，字号小于12px通常很难阅读

• 点击目标尺寸不合适。确保点击目标足够大，确保你的页面在各种移动设备上都更友好，更易于访问

需要手动检查项

• 搜索引擎使用结构化数据确认页面内容的类型。例如，你可以告诉搜索引擎，你的页面是一篇文章,一个公告,或者一个FAQ

• 使用数据结构标记你的内容，确保它在更多的搜索结构中出现

以上就是关于lighthouse的五个检查项，有种使用拙劣的英文翻译了官方文档的感觉，内容很多，仅仅作为科普哈。

4. 如何进行批量分析 lighthouse-batch

就在了解Lighthouse的使用之后，我发现我们大部分的场景还是同时访问多个页面测试性能，所以我们更需要一款可以批量进行测试的工具，然后我就发现了lighthouse-batch的存在。

lighthouse-batch安装使用

安装

一条命令进行安装，要求 Node v10.13+
npm install lighthouse-batch -g

使用

lighthouse-batch -s https://www.mi.com,https://m.mi.com
命令执行后，会生成report文件夹，默认生成json格式数据，里面包含各个页面性能数据以及汇总数据。如下：

m_mi_com.report.json
summary.json
www_mi_com.report.json

想要html报告，使用 --html 可以生成html报告。

m_mi_com.report.html
www_mi_com.report.html

更多命令行参数，请查看文档 https://developer.aliyun.com/mirror/npm/package/lighthouse-batch，慢慢尝试！

通过上面的内容希望可以帮助大家学会使用lighthouse这个工具，更重要的是能够了解Web性能优化的方向，作为测试小伙伴也能够知道在进行web性能测试时重点关注哪些内容。想了解更多的同学自己继续学习吧 https://web.dev/learn/#lighthouse

打包更多精彩好文给你：

越测越开森

小可爱，别忘记分享、在看与点赞哦！