如果您想知道为什么您的 Lighthouse 分数低

[ferene322]

那么您并不孤单。许多 Web 开发人员和内容专业人员都面临这一挑战，尤其是在处理营销网站时，页面速度、用户体验和 SEO 起着至关重要的作用。让我们深入探讨影响您的 Lighthouse 分数的几个关键因素，并探索可行的解决方案来提高它。

灯塔评分低的最常见原因之一是加载速度慢。好消息是，有几种方法可以优化您的网站以加快加载时间。

建议 1：优化您的资产
未优化的资源会严重降低网站速度，影响用户体验和搜索排名。这时，WebP等高效文件格式就变得无价。与 JPEG 或 PNG 等传统格式相比，WebP 具有强大的压缩功能，可以大幅减小文件大小，而且不会牺牲图像质量。

WebP 还具有其他优势，包括支持轻量级动画图像——这是 PNG 所缺乏的，因为它仅限于静态图像。这两种格式都与主流浏览器广泛兼容，但 WebP 在 Chrome、Firefox、Edge 和 Opera 中获得了越来越多的支持，而 PNG 继续在所有平台上提供通用兼容性。

除了选择正确的格式外，优化和适当调整资源大小也很重要。TinyPNG 等服务 可以 帮助进行基本的图像压缩。此外，避免使用过大的图像，例如卡片标题的 4K 图像，因为这会不必要地增加加载时间。通过高效压缩，WebP 可以显著减少加载时间，同时保持视觉保真度（例如，下面的 WebP 图像只有 17 kB）。

内容审核——清晰了解内容状态
使用 WebP 格式优化和正确调整资产大小非常重要——此图像只有 17 kB。
提示 #2：查看网站上的第三方服务和脚本
第三方服务和脚本对于为您的网站添加功能、见解和交互功能非常有用 喀麦隆电话营销数据 但它们也有代价。许多此类脚本通常通过 Google Tag Manager (GTM) 等工具实现，允许营销人员插入 Intercom 或 Hotjar 等有用工具，而无需开发人员参与。这种灵活性很方便，但它很快就会累积到数百千字节甚至兆字节的额外数据，从而拖慢您网站的加载时间并影响您的 Lighthouse 分数。

每个立即加载的第三方脚本都会争夺资源，从而减慢主要内容在屏幕上显示的速度。为了解决这个问题，请尽可能优先使用 Defer 和 Async 属性。在非关键脚本上设置时， Defer 将在 HTML 完全解析后加载脚本，并将 Async 在 HTML 解析的同时下载脚本，仅在脚本准备就绪后执行。这两个参数都确保您的核心内容首先加载，从而增强用户体验并保持更清晰、更快的性能配置文件。

为了实现更精细的控制，请评估哪些脚本是真正必要的，并考虑替代方案或组合解决方案以减少冗余。如果您使用 GTM，请创建规则以仅在需要脚本的特定页面上加载脚本，从而限制对整个网站的性能影响。

技巧 3：使用包分析器
软件包 分析器 是一种工具，可帮助您直观地了解最终软件包的内容（我指的是最终用户加载网页或应用时交付的完整文件包）。它对于确定代码的哪些部分对软件包的文件大小影响最大尤其有用。


Webpack Bundle Analyzer 是最流行的工具之一，用于分析和可视化包的大小和组成。
我将提供一个具体示例：开发网站时，通常使用 npm（Node 包管理器） 来包含各种库和包，以帮助实现不同的功能。例如，您可能需要 Moment.js，这是一个用于解析、操作和格式化日期和时间的流行库。您可以使用它将 UTC 时间戳（如您从 Kontent.ai 获得的时间戳）格式化为更用户友好的格式，例如将其显示为“2025 年 2 月 24 日”。