在前端开发中，网站的加载速度对用户体验至关重要。Google 的 Lighthouse 是一个集成在Chrome开发者工具中的自动化工具，它可以帮助开发者发现提高网站加载速度的方法。本文将带你深入了解如何使用Lighthouse来优化你的网站。
Lighthouse 提供了一个详细的性能报告，其中包括了一系列的性能指标和优化建议。通过这些信息，你可以了解到哪些方面影响了网站的加载速度，并找到具体的解决方案。
首先，你需要对网站进行审核，以建立性能基准。Lighthouse 面板提供了多种配置选项，例如模拟节流、设备类型选择等，以模拟不同的用户环境。
在完成配置后，你可以点击“分析网页加载情况”按钮运行性能测试，并得到一个包含多个指标的报告，例如首次内容绘制（FCP）和可交互时间（TTI）。
报告中的性能提升机会部分将列出具体的优化建议，比如启用文本压缩、调整图片大小和消除阻塞渲染的资源。每项建议都会详细说明潜在的节省量，并提供了实施建议的具体步骤。
例如，启用文本压缩可以减少通过网络发送的文本文件大小，从而加快加载速度。Lighthouse 会指出哪些资源可以通过压缩来优化，并且你可以通过修改服务器配置来实现这一点。
调整图片大小也是一个重要的优化方向。如果网站上的图片尺寸超过了用户设备的显示需求，那么调整图片大小可以显著减少传输的数据量，加快页面加载。
此外，移除阻塞渲染的资源也是提高加载速度的关键。外部的JavaScript和CSS文件可能会阻止页面渲染，通过识别和移除这些阻塞资源，或者通过异步加载非关键资源，可以提升页面的加载性能。
最后，减少主线程工作量也是优化性能的一个方向，请参考上一节《Chrome开发者工具 第二十三章（运行时性能分析）》。通过性能面板，你可以分析主线程在页面加载时的活动，并找到减少JavaScript执行时间的方法。例如，切换到框架的生产模式，或者移除不必要的JavaScript调用，都可以减轻主线程的负担。
原文链接：https://juejin.cn/post/7332852200937160755 作者：辰火流光
