灯塔评分低的最常见原因之一是加载速度慢。好消息是，有几种方法可以优化您的网站以加快加载时间。
建议 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 日”。
Moment.js 等库的问题在于，它们的文件大小可能 非常大 。当这些包包含在您的项目中时，它们会增加包的总体大小。较大的包需要更长的加载时间，这会降低您的网站或 Web 应用的速度。
这时，bundle analyzer 就派上用场了。它可以帮助您：
想象一下 哪些库和包使得你的包变得更大。
确定 某些包（如 Moment.js）是否不必要地大，或者是否可以用更轻量级的包替换它们。
通过减少捆绑包大小来优化 您的项目，这可以提高应用程序的性能。
建议#4：利用岛屿建筑
如果您正在开发静态营销网站，那么使用最少的 JavaScript 是关键。您不需要 JavaScript 来呈现 HTML 或 CSS，因此使用不必要的脚本加载网站只会降低网站速度。一种解决方案是采用 孤岛架构方法，可以使用Astro 等框架高效实现该方法 。
在此模型中，静态内容优先，只有特定组件（如表单或弹出窗口）使用 JavaScript。通过将 JavaScript 隔离到真正需要的地方，您可以最大限度地减少负载并提高 Lighthouse 评分。
如图所示，顶部导航栏、卡片滑块和常见问题解答折叠面板等部分都使用了 JavaScript，而英雄部分、产品列表和页脚则保持静态。
技巧 #5: 使用动态导入
当使用具有大量交互式组件（例如注册表单、模式或弹出窗口）的复杂 Web 应用程序时，可以使用 动态导入来提高性能。这种方法可确保仅在实际需要时加载必要的代码，而不是在初始页面加载时加载。
例如，假设您有一个隐藏在模态框后面的注册表单。默认情况下，当用户访问该页面时，即使用户没有点击打开模态框，也会下载表单的代码（包括其所有字段）。这意味着页面加载时间会增加，因为它正在获取用户可能不会立即与之交互的代码。
使用动态导入，只有当用户点击按钮打开模式时，才会加载该表单的代码。这可以显著减少 Web 应用的初始加载时间，因为您不会预先下载不必要的代码。
提示#6：注意布局转变
我尝试使用动态导入来优化我们的网站，这可以将 JavaScript 加载时间缩短几秒钟，但由于布局发生了重大变化，我们的新 Lighthouse 分数低于以前。当网页上的元素在页面加载时突然移动或“跳跃”时，就会发生布局偏移，从而给用户带来不愉快的体验。这被认为是一种糟糕的用户体验，正如我所描述的，它会显著降低您的 Lighthouse 分数。
布局偏移的一个常见原因是加载大型图像或其他重资产。如果图像在加载时没有预留指定空间，则当图像最终出现时，可能会迫使其他元素移动。
为了防止布局偏移，在加载图像和内容时为其预留空间至关重要。一种有效的解决方案是使用 骨架 UI — 模拟最终内容结构的占位符元素。骨架可以在获取内容时保持布局稳定，从而从页面开始加载的那一刻起提供更流畅的体验。Next.js 等工具提供内置图像优化功能，使用透明占位符来预留空间，保持一致的页面布局并避免意外跳转。
