您需要了解的有关 Web 性能的一切（5 分钟内）

我听到很多人说 Web 性能很难。说实话，我不这么认为。乍一看，它可能感觉很复杂，令人望而生畏，因为有很多特定于领域的命名、指标等等，但要构建一个快速的网站，你不需要了解它们。你只需要对哪些因素对网站速度影响最大，并确保它处于可控范围内，就足够了。信不信由你，你大约 5 分钟就能学会。让我们看看我是否正确！

什么影响了您的应用程序性能？

首先，让我们来识别影响应用性能的所有因素。我发现，在考虑 Web 性能时，以下这个思维模型最有用：

基本上有三个“步骤”可以概括应用程序的整体加载性能

1. 服务器端执行- 首先，必须在服务器上生成 HTML 文档。在某些情况下，此步骤无需任何成本，因为文档已经生成（例如静态网站）。
2. 网络——生成的 HTML 文档必须通过线路和路由器才能到达用户的浏览器。
3. 客户端执行- 需要解析文档，下载并执行依赖项（CSS、JavaScript）。所有操作完成后，页面就完全加载了。

优化服务器端执行

如果您正在构建 SPA（单页应用程序），则很有可能您也采用了 SSR（服务器端渲染）。在这种情况下，相同的代码将在服务器端和客户端运行。

最好的代码是永远不需要运行的代码，所以你应该首先考虑 SSG（静态站点生成）。如果这不可行，而你坚持使用 SSR，那么请大量使用全页缓存，并通过 CDN 分发缓存内容。

有些页面必须在运行时在服务器上生成，无法缓存。对于这些页面，请确保只在服务器上获取快速且必要的数据，并在客户端执行不太重要且速度较慢的 API 调用。这样可以显著缩短首次字节响应时间 (TTP)。

优化网络

优化网络部分可以归结为 4 条主要规则：

1. 尽量减少资源的体积。资源越大，下载所需的时间就越长。
2. 避免链接网络请求（使一个请求依赖于另一个请求），并尝试并行下载。避免在关键路径中使用多个外部域。与所有外部域建立连接比从一个源下载所有内容花费更多时间。
3. 通过服务工作者缓存静态资产（HTML、CSS JS）。

如果您解决了这个问题，那么遇到网络性能瓶颈的可能性就会小得多。

优化客户端执行

这正是我们前端开发者最有力量的地方，也是我们最容易犯错的地方！根据我的经验，90% 的前端性能瓶颈都与渲染时间（可以通过缓存的 SSR 和 SSG 输出轻松解决）和交互性（可以通过代码拆分、延迟加载以及谨慎向客户端添加新库来减少所谓关键渲染路径中的 JavaScript 数量来解决）有关。

通常导致最大性能瓶颈的是 JavaScript。在 SPA 中，JS 包大小很容易失控。以下是一些可以防止其变得像雷龙一样庞大的方法：

1. 如果您使用 SSR/SSG，则意味着您的许多组件已在服务器上渲染，并且它们不需要在前端进行交互。您可以通过仅对需要交互的组件进行 hydration，并且仅在它们需要交互时才进行 hydration，从而显著提高 hydration 的速度。如果您使用 Nuxt 来控制 hydration 过程并排除不需要的组件，则可以使用 Astro.build 或 vue-lazy-hydration 插件。
2. 将你的应用拆分成多个惰性加载的块（从路由开始！）。每个侧边栏、模态框或耗时操作的小部件都可以在交互时惰性加载。
3. 您的网站在构建时可能看起来很快，但一旦营销团队将所有分析数据都放到上面，我保证它的速度就会变慢。您可以使用 Web Worker 异步运行非关键代码。我强烈推荐Partytown——它与 Vue 生态系统的所有主流框架集成。

   

优化图像

令人惊讶的是，很多开发者都会犯一个新手常犯的错误，那就是不优化图片。为了确保图片不会成为瓶颈，只需根据屏幕调整尺寸，并使用像 WebP 这样的新一代格式即可。您可以使用以下方法自动调整图片大小并进行优化：和/或Cloudinary。此外，请最后加载非首屏图片。您可以使用 native<img loading="lazy" />属性来实现这一点。

衡量绩效

如果无法衡量，就无法判断是否有任何改进。持续衡量绩效与定期优化同样重要。

对用户体验影响最大的性能指标称为核心网络生命力（CVV）：

• 最大内容绘制（LCP）：测量加载性能。
• 首次输入延迟（FID）：测量交互性。
• 累积布局偏移 (CLS)：测量视觉稳定性。

如果您想快速检查网站的运行情况，请尝试Page Speed Insights。它将使用最近的 Google 数据中心对您的网站运行 Lighthouse 审核。

您还应该将性能检查纳入您的 CI/CD 流水线中。使用Lighthouse CI对每个 PR 运行综合 Lighthouse 测试（附注：了解为什么不应仅相信 Lighthouse 分数），并使用bundlesize包在包大小超过特定阈值时发出警报。如需更细致的数据，您可以使用WebPageTest。

不管你相不相信，但这就是你需要知道的，以便控制你的表现！

如果您喜欢这篇文章，并希望通过文章和技巧了解有关 Web 性能的更多信息，您可以在这里关注 Vue Storefront 的个人资料，或者在 Twitter 上关注我