Optimize AEM Site Performance

Description

Environment
Adobe Experience Manager

Issue/Symptoms
This article focuses on ways you can improve the performance of your site. We highlighted the various aspects of Adobe Experience Manager (AEM) applications and architectures that have caused the most performance issues. By implementing the optimizations listed here, you can avoid those common issues.

Resolution

Site Performance

  1. Perform regular maintenance.
  2. Make back-end service calls fault tolerant - see this article for details.
  3. Be careful when using 3rd party UI frameworks - We have seen a number of customers using or building libraries that build a whole layer on top of the AEM / Sling web framework. Note that we are not referring to utilities that target specific functionality in the UI (for example ACS Commons) but frameworks that fundamentally change how you implement your application on AEM. While these frameworks may slightly reduce development time, many times we have seen that they can introduce a negative impact on performance.
    Third party frameworks aren’t supported or tested by Adobe. When using or implementing such frameworks, make sure to thoroughly load and stress test your application with realistic traffic.

Client-side performance

  • Use and optimize AEM client libraries - client libraries are an easy way to centralize the management and optimization of CSS and JavaScript code in your site.

    • Embed client libraries to consolidate them into fewer files.
    • Minify the libraries.

  • Put CSS includes in HTML head tag – this helps avoid flickering and repainting of the page after load.

  • Put JavaScript script includes in end of body tag or add the async script attribute - this allows the browser to load JavaScript files in parallel while the page is being rendered.

  • Implement Domain Sharding - By default, web browsers limit the maximum number of parallel requests per domain during page load. This can cause delays in loading the page if you have many resources such as CSS, JavaScript, etc. that need to load before your page is rendered. Domain sharding is a solution that helps work around this problem. Domain sharding is where you include files such as CSS and JavaScript on your site via multiple subdomains.

    • For example:

      script src="//includes1.yoursite.com/etc/clientlibs/test.js"/script

      script src="//includes2.yoursite.com/etc/clientlibs/test2.js"/script

    • Use ACS Commons - Static Reference Rewriter to implement domain sharding.

  • Cache JavaScript and CSS for long periods of time - To allow caching javascript and css for long periods of time, leverage ACS Commons - Versioned Clientlibs.

  • See the Google PageSpeed rules documentation for more pointers on how to optimize your site.

  • See this AEM Gems session for further information on site optimizations.

Author Instance Editing Performance

  1. Perform regular maintenance.
  2. Reduce the total components on the page - When there are hundreds individual editable components loaded on an AEM page in an author instance, this greatly affects the performance of the editor UI. When designing your application, favor components that are more specific to the site and easy for editors to use versus generic components that have a lot of sub-components.
  3. Avoid nesting many levels of container components (paragraph system, responsive grid, experience fragments) - Avoid nesting many levels of container components. Nesting paragraph systems or responsive grids causes the /editor.html page to load slower. This is especially the case where the paragraph system or responsive grid includes a long list of content. Instead of nesting paragraph systems, design the application to reference content from other pages. If you opt for using experience fragments, then avoid nesting them as well, or leverage building blocks. Nested experience fragments are affected by the same performance limitations.

Cache Optimization

In a common AEM site architecture, the HTTP request passes through multiple caches before it finally reaches the AEM publish instances. One of the easiest ways to improve site performance is to optimize your site’s cacheability.

See this article for detailed steps on how to optimize caching in your site.

Optimize Indexes for Custom JCR Queries

Another optimization that can be done which improves performance is to configure and optimize Oak Indexes for your custom JCR queries. If you are using JCR queries within your application this is generally a mandatory task.

See the official documentation (1 and 2) for how to implement Oak indexes for your custom application queries.:

  1. Best Practices for Queries and Indexing
  2. Troubleshooting Slow Queries

QueryBuilder guessTotal

If you are using the AEM QueryBuilder and expect the query to return a lot of results, then always make sure to set the guessTotal property on the root PredicateGroup as it will reduce memory usage. See the official documentation on this for details: Query Builder API

On this page