前端性能优化工具-LightHouse

Performance可以给我们提供非常多的信息，但Performance不够直观，需要开发者透过表面的这些参数去分析背后的性能问题。有了这个诉求之后，另一个性能优化工具就出现了，它就是LightHouse。

简介

LightHouse 是 Google 开源的一个自动化工具，用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。可以参考失败的测试，看看可以采取哪些措施来改进应用。

三种使用方式

可以到谷歌应用商店安装LightHouse，点击添加至Chrome即可。

如果浏览器版本较新的话，可以直接打开 Chrome 开发者工具 (F12)，然后打开 Audits 面板即可。Audits面板集成了 LightHouse 功能，我们可以根据自己的需要，选择对应的限制条件，运行 Run audits，如下图：

作为命令行工具运行，命令行工具允许您将 Lighthouse 集成到持续集成系统。

// 全局安装 lighthouse
npm install -g lighthouse

// 然后输入你的页面

// 命令行支持导出HTML格式和JSON格式，我们使用如下命令分别导出：
//导出JSON格式
lighthouse https://www.imooc.com/  --output json  
//导出HTML格式
lighthouse https://www.imooc.com/  --output html

自动化部分

可以利用 TravisCI 来自动分析修改后的代码的页面性能。

你只需要在 .travis.yml 里面加入以下代码：

language: node_js
script:
  - npm run lint
  - npm run build
after_success:
  - ."./travis/deploy_pr_gae.sh"
  - export LH_MIN_PASS_SCORE=96
  - export LH_TEST_URL=https://your.staging.server.com/
  - node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE

更多详情: ebidel/lighthouse-ci

案例分析

以本站为例，使用 chrome lighthouse生成性能优化测试的报告，直接点击Generate report，然后LightHouse就会自动帮我们生成性能优化报告，如下图：

性能优化测试的报告主要包括，Performance(页面性能)、Accessibility(可访性)、Best Practise(最佳实践)、SEO(搜索引擎优化)、Progressive Web App(渐进式应用)。我们点击其中的每一项都可以看到给出的具体优化建议，这里我们以Performance为例，如下图：

以第一项为例，点击展开可看到更加详细的信息，如下图：

这里推荐我们使用下一代图片格式化的技术，原因是JPEG 2000、JPEG XR和WebP等图像格式通常比PNG或JPEG提供更好的压缩，这意味着更快的下载速度和更少的数据消耗。下面还展示了需要替换的图片资源。点击 Learn more，可以跳转到指定的帮助文档。

简介

三种使用方式

自动化部分

案例分析

相关的性能优化工具

参考