Google开源的自动化工具LightHouse的使用

LightHouse

LightHouse 是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。

目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。

使用入门

LightHouse 有三种工作流程

• Chrome 开发者工具
• 命令行 (Node.js)
• Chrome 扩展程序

Chrome 开发者工具

按F12打开开发者工具，选择Audits选项卡

点击Run audits即可。

命令行(Node.js)

需求：Node.js >= 5

1. 全局安装 lighthouse

npm install -g lighthouse

1. 然后输入你的页面

lighthouse https://example.comlighthouse 会自动生成 HTML 报告，你也可以使用 JSON 格式。

Chrome扩展程序

安装地址：安装地址

在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。

 

测试结果示例

性能优化机会

在Performance的Opportunities Lighthouse会给出可以加快页面加载速度的优化建议。

在Performance的Diagnostics Lighthouse会给出有关应用程序性能的更多信息。

一些常见的优化：

1.删除不必要的资源

例如注释，空白等等。

2.使用有效的缓存策略

Lighthouse 中的低效缓存策略审查使我们注意到，我们可以通过优化缓存策略实现这一目标。通过在我们的服务器中设置 max-age 过期头，我们可以确保在重复访问情况下，用户可以重用他们之前下载的资源。

理想情况下，你应该在尽可能长的时间内尽可能安全地缓存尽可能多的资源，并提供验证令牌，以便高效地重新验证已更新的资源。

3.使用被动事件监听器以提升滚动性能

被动事件是新兴的Web标准，可以显著提高滚动性能，尤其在移动设备上。当使用touch事件监听器（scroll事件不存在这个问题）进行滚动时，因为浏览器不知道你是否会取消滚动，它们总是等待监听器执行完毕后才开始滚动，这样就造成了明显的延迟。事件监听器options中使用passive：true表明监听器永远不会取消滚动，这样浏览器就可以立即滚动。 在支持被动事件侦听器的浏览器中，将侦听器标记为passive即可：

document.addEventListener('touchstart', onTouchStart, {passive: true});

4.懒加载屏幕外的图片

结果

通过在网站上应用这些优化措施，网站的Lighthouse 表现得分从 30 上升到 91。在速度方面取得了相当不错的进步。

 

参考资料：

https://juejin.im/post/5bf8ef7d51882517165daf99#heading-11

https://juejin.im/post/5a7ec3eaf265da4e9449af03#heading-30