最近发现一个特别好用的工具，名叫Lighthouse。如果你也是一个web开发者或者对网站性能优化有兴趣，那么这个工具你一定不能错过。Lighthouse 是一个开源的自动化工具，主要用于提升你网站的性能、质量和正确性。你可以想象一下，当你的网站被一堆测试轰炸之后，Lighthouse 会生成一份详细的报告，告诉你哪些地方做得好，哪些地方还需要改进。这种感觉就像是请了一位专业的网站医生，帮你诊断所有的毛病，然后告诉你如何对症下药。废话不多说，咱们直接进入正题，看看Lighthouse是如何工作的，以及我们如何使用它来提升网站质量。一、Lighthouse 介绍
Lighthouse 是由 Google 开发的一款开源工具，旨在帮助开发者优化他们的网页应用。它可以在 Chrome 浏览器中运行，也可以作为命令行工具使用。Lighthouse 能够进行一系列的测试，包括性能、可访问性、最佳实践、SEO以及PWA（渐进式网页应用）等方面的检测。在进行页面审核时，Lighthouse 会对页面执行一系列的测试，然后生成一份报告。这份报告会详细列出页面在各个测试中的表现，并提供具体的改进建议。这对于开发者来说，无疑是一个宝贵的资源，因为它不仅指出了问题所在，还提供了明确的改进方向。二、如何下载和安装 Lighthouse
1.获取安装包:考虑到网络原因，部分同学无法实现在线安装，这种情况下可以直接通过离线安装的方法来解决。点击下方公众号，回复关键字：2016 获取Lighthouse插件安装包。2.安装包下载好后，打开chrome浏览器的扩展程序界面：
对于Chrome浏览器: 在地址栏中输入 chrome://extensions/ 并按Enter。对于Microsoft Edge（基于Chromium的新版本）: 输入 edge://extensions/ 并按Enter。在扩展程序页面的右上角，你会看到一个“开发者模式”的切换按钮。确保它是打开（或启用）的。将先前下载的文件如下图，直接拖放到扩展程序页面中。
三、Lighthouse 的使用方法
1. 使用 Chrome DevTools 运行 Lighthouse
在 Chrome 浏览器中打开你要测试的页面，然后按下 Ctrl+Shift+I 打开开发者工具。选择 "Lighthouse" 选项卡，点击 "Generate report" 按钮，Lighthouse 就会开始对页面进行测试，并生成一份详细的报告。2. 使用命令行工具运行 Lighthouse
这里的 <url> 是你要测试的网页地址。Lighthouse 会对页面进行测试，并在终端中输出报告的路径。
3. 使用 Node 模块运行 Lighthouse
你可以在你的 Node.js 应用中使用 Lighthouse：const lighthouse = require('lighthouse');const chromeLauncher = require('chrome-launcher');
(async () => { const chrome = await chromeLauncher.launch(); const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance']}; const runnerResult = await lighthouse('https://example.com', options);
console.log(`Report is done for ${runnerResult.lhr.finalUrl}`); console.log(`Performance score was ${runnerResult.lhr.categories.performance.score * 100}`);})();
这种方式适合需要进行自动化测试或者集成到CI/CD流程中的场景。四、Lighthouse 带来的好处
使用 Lighthouse 可以为你的网站带来以下好处：提升性能: Lighthouse 会指出影响页面加载速度的因素，并提供优化建议。
提高可访问性: Lighthouse 可以帮助你识别和修复影响网站可访问性的问题，确保更多用户能够顺利使用你的网站。
遵循最佳实践: Lighthouse 会检测你的网站是否遵循了Web开发的最佳实践，从而提升代码质量和安全性。
改进 SEO: Lighthouse 会检查你的网站是否符合搜索引擎优化（SEO）的要求，帮助你提升网站在搜索引擎中的排名。
- 支持 PWA: 如果你正在开发渐进式网页应用，Lighthouse 可以帮助你检测和实现PWA的最佳实践。
五、能解决的问题
Lighthouse 可以帮助你解决以下几个常见问题：页面加载慢: 通过分析资源加载时间和渲染性能，Lighthouse 可以帮助你找出影响页面速度的瓶颈。
可访问性差: Lighthouse 可以检测页面的可访问性问题，确保残障用户也能顺利使用你的网站。
SEO效果差: 通过优化网站结构和内容，Lighthouse 可以提升你的网站在搜索引擎中的表现。
- PWA支持不足: 如果你希望将网站打造成PWA，Lighthouse 可以提供详细的指导和检测，帮助你实现这一目标。
六、鬼哥的总结
使用 Lighthouse 之后，鬼哥深深体会到这个工具的强大和便捷。首先，它能够自动化地检测出网站的各种问题，省去了我们手动排查的麻烦。其次，报告中提供的改进建议非常具体和实用，能够帮助我们快速提升网站的质量。此外，Lighthouse 的开源和免费属性更是让它成为每个开发者必备的工具。对于刚入门的新手来说，Lighthouse 提供的详细报告和改进建议就像是一位导师，帮助你一步步提升网站质量。而对于有经验的开发者，Lighthouse 则是一个得力的助手，帮助你更高效地进行性能优化和质量检测。如果你还没有用过 Lighthouse，那赶紧试试吧。相信你会像鬼哥一样，对它爱不释手。
Chrome教程约 4 分钟