如何使用lightHouse进行前端性能分析

一. 用途

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。只要为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面的性能报告。

二. 安装步骤

三种安装方式

2.1 Chrome扩展程序

image

2.2 Chrome Dev Tools

image

2.3 命令行node

1. 安装命令：# 注意：Lighthouse需要 Node 10 LTS (10.13) 或更高的版本.

npm install -g lighthouse

2. 运行Lighthouse：

lighthouse 

3. 以百度为例，输入下面的命令即可：

lighthouse https://www.baidu.com/

完成后，可以查看HTML报告

image.png

Performance 性能,性能检测，如网页的加载速度、响应时间等
accessibility 无障碍使用
Best Practice 用户体验
SEO 优化

0 to 49 (red): Poor
50 to 89 (orange): Needs Improvement
90 to 100 (green): Good

三. 报告分析

1. **Performance 性能检测，如网页的加载速度、响应时间等

• First Contentful Paint：首次内容绘制时间。
• Speed Index：速度指数，是一个页面加载性能指标，明显的页面填充的速度，此指标的分数越低越好。
• Largest Contentful Paint:（最大内容渲染时间）LCP是一个页面加载时长的技术指标，用于表示当前页面中最重要/占比最大的内容显示出来的时间点。不同于First Contentful Paint，FCP代表的是第一次页面内容渲染的时间点，LCP是FCP的一个重要的补充，它可以代表当前页面主要内容展示的时间。LCP低于2.5s则表示页面加载速度优良。
• Time to Interactive：可互动时间，页面中的大多数网络资源完成加载并且
  CPU在很长一段时间都很空闲的所需的时间。此时可以预期cpu非常空闲，可以及时的处理用户的交互操作。
• Total Blocking Time:（累积阻塞时长）TBT是一个衡量用户事件响应的指标。TBT会统计在FCP和TTI时间之间，主线程被阻塞的时间总和。当主线程被阻塞超过50ms导致用户事件无法响应，这样的阻塞时长就会被统计到TBT中。TBT越小说明页面能够更好的快速响应用户事件。
• Cumulative Layout Shift:（累积布局变化量）CLS是一个衡量页面内容是否稳定的指标，CLS会将页面加载过程中非预期的页面布局的累积变动。CLS的分数越低，表明页面的布局稳定性越高，通常低于0.1表示页面稳定性良好。

2. Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是指所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

Background and foreground colors do not have a sufficient contrast ratio.

这个意思就是某处文字背景色和文字颜色对比度不够，对于视障用户可能不好区分。

3. Best Practices 最佳实践 : 实践性检测，如网页安全性，如是否开启HTTPS、网页存在的漏洞等

html element does not have a [lang] attribute

搜索引擎在索引网站内容时也需要知道网站适用的语言,从而更好地为用户返回搜索结果
改为：

当页面链接至使用 target="_blank" 的另一个页面时，两个页面将在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，当前页面性能可能会受影响。
另外，target="_blank" 也有一个安全漏洞。新的页面可以通过 window.opener 访问旧的窗口对象，甚至可以使用 window.opener.location = newURL 将旧页面导航至不同的网址。

当设置rel="noopener"时chrome会在独立的进程中打开新页面,同时会阻止window.opener，因此不存在跨窗口访问。

4. SEO 搜索优化

SEO（Search Engine Optimization）：搜索引擎优化检测，如网页title是否符合搜索引擎的优化标准等

Document does not have a meta description

四.实战

http://119.45.149.173/lighthouse/lighthouse.html

优化后

http://119.45.149.173/lighthouse/lighthouseOk.html

这是 Lighthouse 目的：它能识别和修复，影响我们网站的性能、可访问性和用户体验的常见问题。