Site Performance
Make back-end service calls fault tolerant - see this article for details.
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.
- Put CSS includes in HTML <head> tag – avoids 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.
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.
Avoid nesting many levels of paragraph system components - Avoid nesting many levels of paragraph system components. Nesting paragraph systems causes the /editor.html page to load slower. This is especially the case where the paragraph system includes a long list of content. Instead of nesting paragraph systems, design the application to reference content from other pages or use experience fragments.
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 below official documentation on how to implement Oak indexes for your custom application queries.