作为基于Angular的Storefront应用程序,我们可以遵循许多Angular开发最佳实践来提高您的Spartacus店面的性能,这也将有助于提高您的GoogleLighthouse分数。通过遵循这些建议,我们还可以改进GoogleCoreWebVitals报告的结果,该报告侧重于页面加载速度、页面交互速度和网站的视觉稳定性。获得“A-Grade”性能报告的关键如下:(1)尽可能快地加载每个页面,包括:Web资源(CSS和JS文件)assets文件(字体、图像和媒体)异步数据(Ajax调用)(2))用户可以尽快与页面进行交互(3)没有layoutshift,即Layoutshift(页面可见元素移动或在页面加载过程中尽可能少移动)以下最佳实践是强烈建议提高店面应用程序的性能:尽量减少同步和异步HTTP请求的数量。尽可能使用HTTP压缩来提高传输速度和优化带宽。加载第三方脚本时,使用async或者defer,这样浏览器的主线程就不会被阻塞。验证您的资产大小是否适合用户屏幕的大小。当调用像OCC这样的API时,尽量只请求你需要的数据。fields=FULL的OCC响应包含大量您可能不需要的数据。响应越大,检索和处理它所需的时间就越长。同样的做法适用于支持分页的API。在每个页面上仅加载您需要的CSS和Javascript。尽可能使用首屏加载。缓存建议为所有站点资产以及可缓存的HTTP请求维护一个二级(L2)缓存,例如来自不经常更改的匿名用户的OCC调用。确保您为页面的所有资产制定了适当的浏览器缓存策略。如果设置和调整得当,浏览器缓存可以节省大量带宽并缩短页面加载时间(初始和后续)。将您的JavaScript代码分成块(一种称为延迟加载的技术)以仅加载每个页面需要的JavaScript块。Spartacus已经为它自己的许多库实现了延迟加载,但是您还可以通过在自定义模块中使用延迟加载技术来进一步提高店面的性能。在自定义模块中实现延迟加载之前,了解延迟加载在Spartacus中的工作原理很重要。利用SSR传输状态机制来避免重复的XHR调用。使用内联字体和CSS而不是异步加载它们。搜索引擎优化启用服务器端呈现以确保所有页面都被正确索引。拥有有效且一致的robots.txt文件以允许机器人抓取您的网站。确保您的元属性和标签在您的页面上设置正确。可访问性Spartacus中的某些组件和元素尚未完全符合可访问性。如有必要,您可以覆盖这些组件和元素,以便添加缺少的aria属性。它还允许您重命名元素以提高可访问性分数。PWASpartacus是一个开箱即用的渐进式Web应用程序。因此,您可以将您的ServiceWorker配置为缓存不经常更改的资源(例如资源、资产和HXR请求),这将加快后续页面加载。您还可以让您的店面应用程序离线工作。
