优化 AEM 站点性能

概述

本文将着重介绍提高站点性能的各种方法。我们将重点说明在 AEM 应用方式和体系结构上引发最多性能问题的各方面因素。通过实施此处列出的优化方案,您可以避免这些常见问题。

站点性能

1. 执行定期维护
2. 让后端服务调用具备容错性 - 有关详细信息,请参阅此文
3.谨慎使用第三方 UI 框架 - 我们看到有许多客户通过使用或构建多个库,在 AEM/Sling Web 框架上生成了一个完整的层。请注意,我们这里说的框架是指可以从根本上改变您在 AEM 中实施应用程序的方式,而不是用于在 UI 中实现特定功能的实用程序(例如 ACS Commons)。根据我们的观察,虽然这些框架可能会略微缩短开发时间,但它们通常会对性能产生负面影响。

Adobe 不支持第三方框架,也不会对第三方框架进行测试。因此,在使用或实施此类框架时,请确保用真实的流量让您的应用程序处于满负荷状态并对其进行压力测试。  
4. 客户端性能

  • 使用并优化 AEM 客户端库 - 通过客户端库,可以轻松地集中管理并优化站点中的 CSS 和 JavaScript 代码。
    • 嵌入客户端库,以将其整合到较少的文件中。
    • 精简客户端库。
  • 将 CSS 包含的内容放在 HTML <head> 标记中 - 这有助于避免页面在加载后出现闪烁和重绘问题。
  • 将 JavaScript <script> 包含的内容放在 <body> 标记的末尾处,或者添加异步脚本属性 - 这允许浏览器在渲染页面时并行加载多个 JavaScript 文件。
  • 实施域名分片 - 默认情况下,Web 浏览器会限制页面加载期间每个域的最大并行请求数量。如果您拥有许多需要在页面完成渲染之前加载的资源(如 CSS、JavaScript 等),这可能会导致加载页面时出现延迟。域名分片则是解决此问题的一种方案。域名分片是指通过多个子域将 CSS 和 JavaScript 等文件包含到您的站点中。
  • 长时间缓存 JavaScript 和 CSS - 为了允许长时间缓存 Javascript 和 CSS,请使用 ACS Commons - 受版本控制的 Clientlibs
  • 有关如何优化站点的更多建议,请参阅 Google PageSpeed 规则文档
  • 有关站点优化的更多信息,请观看这个 AEM Gems 会议

创作实例编辑性能

1. 执行定期维护
2. 减少页面上的组件总数 - 在一个创作实例中,当 AEM 页面上加载了数百个可编辑的组件时,会极大地影响编辑器 UI 的性能。因此,在设计应用程序时,请优先选用更加特定于站点且便于编辑人员使用的组件,而非含有大量子组件的通用型组件。
3.避免嵌套多级容器组件(段落系统、响应式网格、体验片段)- 避免嵌套多级容器组件。嵌套多个段落系统或响应式网格会减慢 /editor.html 页面的加载速度。当段落系统或响应式网格包含一长串内容时,这种情况会更加明显。因此,应将应用程序设计为从其他页面引用内容,而不是嵌套多个段落系统。如果您选择使用体验片段,那么也应当避免嵌套,或者利用构建基块。嵌套式体验片段同样存在上述性能限制。

优化缓存

在常见的 AEM 站点体系结构中,HTTP 请求在最终到达 AEM 发布实例之前会经历多次缓存。因此,提高站点性能的一种最简便的方法就是优化网站的缓存能力。

有关如何优化站点中的缓存的详细步骤,请参阅此篇文章

优化用于自定义 JCR 查询的索引

另一种可以改善性能的优化方案是为自定义 JCR 查询配置并优化 Oak 索引。一般情况下,如果您是在应用程序中使用 JCR 查询,则必须要执行这项优化任务。

有关如何为自定义应用程序查询实施 Oak 索引的信息,请参阅官方文档([1] 和 [2])。

[1] https://helpx.adobe.com/cn/experience-manager/6-5/sites/deploying/using/queries-and-indexing.html

[2] https://helpx.adobe.com/cn/experience-manager/6-5/sites/developing/using/troubleshooting-slow-queries.html

 

QueryBuilder guessTotal

如果您使用 AEM QueryBuilder 并且希望查询能返回大量结果,请始终确保在 root PredicateGroup 上设置 guessTotal 属性,因为这样可以减少内存使用。有关详细信息,请参阅关于该主题的官方文档:

https://docs.adobe.com/content/help/zh-Hans/experience-manager-65/developing/platform/query-builder/querybuilder-api.html#using-p-guesstotal-to-return-the-results

Adobe 徽标

登录到您的帐户