共计 1190 个字符，预计需要花费 3 分钟才能阅读完成。
作为一款基于 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 申请），这将放慢后续页面加载速度。您还能够让您的店面应用程序脱机工作。
正文完