基于 Spartacus 的 Angular Storefront 性能优化建议

作为一款基于 Angular 的 Storefront 应用，我们可以遵循许多 Angular 开发的最佳实践，来提高 Spartacus 店面的性能，这也有助于提高您的 Google Lighthouse 分数。 通过遵循这些建议，我们还可以改进 Google Core Web Vitals 报告的结果，该报告侧重于页面加载速度、页面交互速度和网站的视觉稳定性。

获得“A 级”绩效报告的关键如下：

(1) 每个页面加载速度尽可能快，包括：

• Web 资源（CSS 和 JS 文件）
• assets 文件（字体、图像和媒体）
• 异步数据（Ajax 调用）

(2) 用户可以尽快与页面进行交互

(3) 没有布局移动，即 Layout shift（页面上的可见元素在页面加载期间移动或移动尽可能少）

强烈建议采用以下最佳实践来提高店面应用程序的性能：

• 尽可能减少同步和异步 HTTP 请求的数量。
• 尽可能使用 HTTP 压缩来提高传输速度和优化带宽。
• 加载第三方脚本时，使用 async 或 defer，这样浏览器的主线程就不会被阻塞。
• 验证您的资产大小是否适合用户屏幕的大小。
• 调用 OCC 等 API 时，请尝试仅请求您需要的数据。 fields=FULL 的 OCC 响应包含大量您可能不需要的数据。 响应越大，检索和处理它所需的时间就越长。 同样的做法适用于支持分页的 API。
• 仅在每个页面上加载您需要的 CSS 和 Javascript。
• 尽可能使用 Above-the-Fold Loading.

缓存建议

• 为所有站点资产以及可缓存的 HTTP 请求维护二级 (L2) 缓存，例如不经常更改的匿名用户的 OCC 调用。
• 确保您对页面的所有资产都有适当的浏览器缓存策略。 浏览器缓存在正确设置和调整时可以节省大量带宽并缩短页面加载时间（包括初始和后续）。
• 将您的 JavaScript 代码分成多个块（一种称为延迟加载的技术）以仅加载每个页面所需的 JavaScript 块。 Spartacus 已经为其自己的许多库实现了延迟加载，但您也可以通过在自定义模块中使用延迟加载技术来进一步提高店面的性能。 在自定义模块中实现延迟加载之前，了解延迟加载在 Spartacus 中的工作原理很重要。
• 利用 SSR 传输状态机制来避免重复的 XHR 调用。
• 使用内联字体和 CSS 而不是异步加载它们。

搜索引擎优化

• 启用服务器端呈现以确保所有页面都正确编入索引。
• 拥有一个有效且一致的 robots.txt 文件，以允许机器人抓取您的网站。
• 确保您的元属性和标签在您的页面上适当设置。

辅助功能

Spartacus 中有一些组件和元素尚未完全符合可访问性。 必要时，您可以覆盖这些组件和元素，这样您就可以添加缺少的 aria 属性。 它还允许您重命名元素以提高可访问性评分。

PWA

Spartacus 是一个开箱即用的渐进式 Web 应用程序。 因此，您可以将 Service Worker 配置为缓存不经常更改的资源（例如资源、资产和 HXR 请求），这将加快后续页面加载速度。 您还可以让您的店面应用程序脱机工作。