前端性能分析工具——Lighthouse

在前端开发中，自己开发的app或者web page性能的好坏，一直是让前端开发人员很在意的话题。因为影响用户浏览网页速度的因素主要有：服务端数据返回、网络传输、页面渲染等等，这些方面做的不够好，都会影响客户体验。所以我们除了在开发的过程中注意代码的质量，同时还需要专业的网站测试工具辅助，让我们知道自己的网页还有哪些需要更为优化的方面。

当下流行的前端性能分析工具有很多，比如 Lighthouse、Pingdom、SpeedTracker、WebPageTest、Sitespeed.io等等。

我自己尝试了一款工具：Lighthouse，感觉还不错，上手容易，操作简单。

Lighthouse是一个开源的自动化工具，用于帮助改进网络应用的质量。可将其作为一个 Chrome扩展程序运行，或从命令行运行。Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。

一、安装使用

安装方式一：
1.全局安装：npm install -g lighthouse
2.创建一个文件（用于存放生成的报告文件），然后进入到文件，运行命令：lighthouse http://xxxxxxx
3.然后静态运行，生成报告，跑完之后，会生成一个.html的报告

安装方式二：
通过chrome的应用商店搜索Lighthouse下载安装，安装好后打开需要测试的网页，按F12打开调试模式，会在浏览器右上角出现Lighthouse图标，如图所示，点击Generate report 按钮，即可以看到最终的性能检测报告。

二、指标详解

1.Performance（性能）
First Contentful Paint(FCP)：衡量页面开始加载到页面中第一个元素被渲染之间的时间。元素包含文本、图片、canvas等。
Speed Index：代表页面内容渲染所消耗的时间，该值越低越好。
Largest Contentful Paint(LCP)：衡量标准视口内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。
Time to Interactive(TTL)：测量页面所有资源加载成功并能够可靠地快速响应用户输入的时间，即互动时间。
Total Blocking Time(TBT)：这是 FCP 与 TTL 之间的所有时间段的总和。
Cumulative Layout Shift (CLS)：衡量视觉稳定性，为了提供良好的用户体验，页面的CLS应保持小于 0.1。

2.Accessibility（可访问性）
无障碍功能：
当我们说某个网站具有无障碍功能时，我们的意思是网站的内容可用，其功能可由任何人操作。所有用户都能看见和使用键盘、鼠标或触摸屏，并且与网页内容的交互方式也清晰明了。这会让使用者获得良好的体验。我们在探讨无障碍功能时往往是围绕身体有缺陷的用户，下面我们来看一个示例：

我们可以看到上面的图中存在的一些问题：文本对比度低，这会让弱视用户难以阅读；“Remember details?”标签未关联复选框，因此您只得点按或点击那个小方框，而不能直接点击标签；将标签置于左侧而将字段置于右侧会让许多人难以将它们关联起来，也会让需要进行放大的人几乎无法使用页面；想像一下，如果在手机上看到这个画面，并且需要来回平移才能搞明白标签与字段的关联；此外，使用屏幕阅读器的用户会难以弄清楚关联问题。

我们经过调整：
a.将文本的颜色加深；
b.修改设计，让标签靠近它们所标示的字段；
c.修正标签，使其与复选框关联起来，以便点击标签同样可以进行状态切换。

3.Best Practices（最佳实践）
检查网页总体代码运行状况。通过的审核显示了针对最佳实践还验证了其他内容：
Uses HTTPS：使用HTTPS
Avoids requesting geolocation permission on page load：避免在页面加载时请求地理位置许可
Avoids front-end JavaScript libraries with known security vulnerabilities：避免具有已知安全漏洞的前端JavaScript库
Allows users to paste into password fields：允许用户粘贴到密码字段中

4.SEO（搜索引擎优化）
搜索引擎优化计分卡，它检查页面是否针对搜索引擎结果排名进行了优化。
这些是Lighthouse使用的标准：
没有阻止页面建立索引、链接具有描述性文字、页面具有成功的HTTP状态代码、具有宽度或初始比例的标签(适合移动设备)、文档具有