Lighthouse 是一种用于提高网站质量的自动化工具。您只需为其提供一个网址，即可提供一系列建议，了解如何提高网页性能、使网页更易于访问、遵循最佳实践等。您可以从 Chrome 开发者工具中以 Chrome 扩展程序的形式运行，甚至将它作为节点模块运行，这对实现持续集成非常有用。
一段时间以来，Lighthouse 提供了许多提高网页加载性能的提示，例如启用文本压缩或减少阻塞渲染的脚本。Lighthouse 团队会继续发布新的审核报告，以便为您提供更多实用建议，帮助您加快网站速度。本博文汇总了您可能不知道的实用性能审核，例如：
- 主线程工作明细
- 预加载密钥请求
- JavaScript 启动时间较长
- 避免网页重定向
- 未使用的 JavaScript
- 对静态资产使用低效缓存政策
- 避免费用高昂的往返任何来源
- 采用视频格式制作动画内容
- 在网页字体加载期间，所有文字仍然可见
- 未缩减的 CSS 和 JavaScript
- 未使用的 CSS 规则
主线程工作明细
如果您使用过开发者工具中的性能面板，就会知道要细分出加载页面时 CPU 时间所花的位置，可能是一件繁琐的工作。我们很高兴地宣布，您现在可以通过新的主线程工作细分审核轻松便捷地获取这些信息。
这项新的诊断功能可评估网页加载期间发生的活动数量和类型，方便您处理与布局、脚本评估、解析和其他活动相关的加载性能问题。
预加载密钥请求
浏览器在检索资源时，会在文档及其子资源中找到对这些资源的引用。这有时可能并不理想，因为某些关键资源是在网页加载过程的后期才发现的。幸运的是，借助 rel=preload，开发者能够提示合规浏览器应尽快提取哪些资源。通过新的预加载密钥请求审核，开发者可了解通过 rel=preload 更快地加载哪些资源可以带来诸多好处。
测试和比较使用和不使用 rel=preload 时的性能变化时非常重要，因为这可能会以您意想不到的方式影响加载性能。例如，预加载大型图片可能会延迟首次呈现，但代价是预加载的图片会在布局中更快地显示。始终确保对结果感到满意！
JavaScript 启动时间较长
如果加载的 JavaScript 过多，则页面可能会因为浏览器解析、编译和执行而无响应。第三方脚本和广告是过多脚本活动的一种特定来源，甚至可能导致功能强大的设备陷入停滞状态。新的 JavaScript 启动时间高评估会显示网页上每个脚本消耗的 CPU 时间及其网址：
运行此审核时，您还可以在“网络”面板中启用第三方标志，并过滤列表以识别第三方脚本资源。根据通过此评估得出的数据，您将能够更好地找到导致网页过快而迟缓的 JavaScript 活动过多的来源。对于特定于您的应用的脚本，您可以采用代码拆分和摇树优化等技术来限制网站每个网页上的 JavaScript 数量。
避免网页重定向
有时，当浏览器请求网址时，服务器可能会以 300 级别的状态代码响应。这会导致浏览器重定向到另一个网址。虽然重定向是实现搜索引擎优化 (SEO) 和便捷的必要条件，但它们会增加请求的延迟时间。尤其是在此类源重定向到其他源时，这可能会产生额外的 DNS 查找和连接/TLS 协商时间。
您网站上的着陆页不适合进行重定向。为了帮助您缩短延迟时间并提高加载性能，Lighthouse 现在提供避免页面重定向审核，让您知道导航何时触发任何重定向。
请注意，此项审核在开发者工具版本的 Lighthouse 中很难触发，因为它会分析页面地址栏中的当前网址，该网址反映所有重定向的解析情况。此审核很可能会显示在 Node CLI 中。
未使用的 JavaScript
在大量 JavaScript 应用中，死代码可能会是一个严重问题。由于它从未调用，因此不会造成执行开销，但确实会带来其他不良影响。浏览器仍会下载、解析和编译死代码。这会影响加载性能和 JavaScript 启动时间。与开发者工具中的覆盖率面板类似，未使用的 JavaScript 评估会显示当前页面下载但从未使用过的 JavaScript。
通过此项审核，您可以识别应用中的无效代码并将其移除，从而提高加载性能并减少系统资源用量。专业提示：您也可以使用 Chrome 开发者工具中的代码覆盖率面板来查找此信息！
对静态资产使用低效缓存政策
虽然许多性能建议都侧重于提高首次访问的用户的网站速度，但使用缓存来提高回访用户的加载性能也很重要。对静态资源使用了低效缓存政策审核会检查网络资源的缓存标头，并通知您静态资源的缓存政策是否不达标。
借助此项审核，您可以轻松地找出并解决当前缓存政策存在的问题。这可以极大地提高回访用户的性能，而用户也喜欢这样的速度！
避免针对任何来源的多次往返
当浏览器从服务器检索资源时，可能需要很长时间来执行 DNS 查找并与服务器建立连接。借助 rel=preconnect，开发者可以在浏览器适当连接之前与其他服务器建立连接，以掩盖这种延迟。避免费用高昂的针对任何来源的多次往返审核将帮助您发现使用 rel=preconnect 的机会！
rel=preconnect 的来源列表。当跨源资源的延迟时间缩短后，用户会感觉到进展速度略快。在这项新的 Lighthouse 评估中，您将了解使用 rel=preconnect 做到这一点的新机会。
为动画内容使用视频格式
GIF 动画体量很大，通常至少会消耗几百 KB 的流量，即使不是几兆字节的数据。如果您关心加载性能，可以将这些 GIF 转换为视频。幸运的是，使用动画内容的视频格式评估是您的后盾。
如果您的网站有任何超过 100 KB 的 GIF，此项审核将自动进行标记，并引导您找到有关如何将其转换为视频并嵌入这些 GIF 的一些指导。通过将 GIF 转换为视频，Imgur 等网站显著提高了加载性能。此外，如果您的网站采用的是按流量计费的带宽托管方案，那么单就潜在的费用应该就足以说服您了！
加载网页字体期间所有文字仍然可见
在为网页加载网页字体时，浏览器通常会渲染不可见的文本，直到字体加载为止。这种现象称为“不可见文字闪烁 (FOIT)”，从设计角度来看可能对您更可取，但实际上这是一个问题。被阻塞的文本在渲染并变得可见之前无法读取。对于高延迟和/或高带宽连接，这意味着用户体验的核心部分缺失。这也可能是一种感知性能问题，即网页呈现有意义的内容的速度没有达到其他速度。幸运的是，网页字体加载期间所有文字仍然可见审核可帮助您找到在网站上修正此问题的机会！
如果 Lighthouse 在您的应用中发现网络字体延迟文本渲染，您可以采取一些可能的补救措施。您可以使用 font-display CSS 属性和/或字体加载 API 控制文本渲染。如果您想更深入地研究，不妨考虑阅读 字体加载策略的全面指南，这是一份由 Zach Leatherman 撰写的优秀指南，是优化字体加载方式的绝佳资源。
非精简版 CSS 和 JavaScript
之所以推荐使用缩减大小技术，是因为 Web 性能已经成为一种重要的事情，而且这是有充分理由的。它可以显著减小基于文本的资源的大小，进而有利于提高加载性能。不过，这种优化很容易被忽略，尤其是在构建流程未为您处理时。缩减 CSS 大小和 Minify JavaScript 审核将汇总它在当前网页上发现的未缩减资源列表。然后，您可以采取行动，手动缩减这些文件的大小，或增强构建系统以为您代劳。
未使用的 CSS 规则
随着网站显示时间过长，重构过程中遗留下来的重复内容必然会开始积累。例如，未使用的 CSS 规则就不再是网站正常运行所必需的，但仍会消耗带宽。为方便起见，未使用的 CSS 规则审核会显示页面上哪些 CSS 资源包含未使用的 CSS。
如果 Lighthouse 在该页面上发现了未使用的 CSS，有的方法可将其清除。UnCSS 就是这样的实用程序，它可以自动为您执行此操作（但务必谨慎使用）。一种更手动的方法是使用开发者工具中的代码覆盖率面板。但需要注意的是，一个网页上可能没有未使用的 CSS，而在另一个网页上也可能需要用到。另一种方法是将 CSS 拆分为仅在必要时加载的模板专用文件。无论您决定做什么，Lighthouse 都会随时通知您，您的 CSS 是否有任何变化。
欢迎试用 Lighthouse！
如果您对这些新的审核感到兴奋，请更新 Lighthouse 并试用！
- Lighthouse Chrome 扩展程序应该会自动更新，但您可以通过
chrome://extensions手动更新。 - 在开发者工具中，您可以在审核面板中运行 Lighthouse。Chrome 大约每 6 周更新一次，因此可能无法进行某些较新的审核。如果您迫不及待想要使用最新提供的审核，可以下载 Chrome Canary 来运行最新的 Chrome 代码。
- 对于节点用户：运行
npm update lighthouse；如果是全局安装 Lighthouse，请运行npm update lighthouse -g。
特别感谢 Kayce Basques、Patrick Hulce、Addy Osmani 和 Vinamrata Singal 提供的宝贵反馈，这些反馈显著提高了本文的质量。