Adobe Experience Manager holds the distinction of being the most advanced content management system in the world, but it comes at a price — many opportunities to optimize and exploit AEM performance are often missed due to its complex architecture and lack of awareness.
Given the high cost of an AEM license, such a scenario is likely to be more than frustrating. And while there is no magic soothing pill for every case, we can offer a set of practices that can be used to get measurable results quickly without weeks of digging through documentation.
AEM Architecture Overview
Without diving into technical specifics, we’ll briefly outline the AEM architecture. This overview is essential, as it highlights the core principles that directly impact the primary metric for evaluating your site’s performance: the response time to a visitor’s request.
In a nutshell, AEM architecture is organized into four main instances: Author, Publisher, Dispatcher and Load balancer. Think of them like a well-coordinated dance troupe: the Author writes the moves, the Publisher performs them, the Dispatcher directs, and the Load Balancer ensures everyone stays in step. They ensure new content launches seamlessly and loads quickly for users.
The Author instance is a kind of sandbox for producing and modifying content. It’s where web pages are built, categorized and modified, and where any media used on your site is stored.
The Publisher instance is a live version of your content available for users to view. Once the content is approved for publication in the author environment, it is sent out to the publisher tier.
The Dispatcher instance is responsible for caching and load balancing, that is, directing traffic down routes that provide the shortest possible load times.
Finally, the Load balancer. Yes, the task of load balancing is already performed by Dispatcher, but this environment exists to distribute traffic from content creators and users between the author, publisher, and dispatcher environments, if there is more than one.
In perfect conditions, it’s a perfectly choreographed performance where nobody misses a beat. The AEM CCMS concept emphasizes AEM scalability and agility, enabling the system to grow with your business. Yet, in large projects, as content volumes increase, the risk of disruptions across various components also rises. Understanding how to monitor, prevent, and, ideally, anticipate these issues is crucial. The following practices will help you achieve that.
Content Optimization
Adobe Experience Manager includes several different types of assets categorized as content. For each type, there are ongoing optimization opportunities that are worth pursuing to maintain a strong level of AEM performance.
Improving Image Loading Time
The quality of images is vital to your website’s perception. It greatly affects how visitors see it. Yet, high-quality images can slow load times and site performance. Using the methods below, you can balance your work with visual assets so as to achieve a fast response and not lose the visual appeal of the site in the eyes of the visitor.
- Lazy load approach. Yeah, it’s a rare “go slow, go far” case. The lazy loading technique means that the loading of certain page components, often images, is delayed until they become necessary, that is, until the user begins to interact with them. Adobe Experience Manager supports lazy loading by default. It’s via the Image Component of the AEM Core components. All you have to do is select this option in the Design Dialog (under Policies).
- Format optimization. Of the many image formats today, some suit certain conditions better. For example, you can resize SVG files without losing quality.
- Adaptive techniques. Mobile users don’t need the same quality images that your website visitors see on the desktop. AEM supports Dynamic Media method, which saves more resources compared to the old rendition method.
- Image caching. Categorize the images on your site in terms of how often they rotate. This will help you understand which visual assets you can keep cached for a longer period.
Code Minification
This method refers to eliminating unnecessary or outdated data without affecting browser processing of the website. During the minification process, code and formatting comments are eliminated, unused code is removed, shorter variable and function names are used, and so on.
This reduces the size of resources (JavaScript) and, the benefit we are most interested in, improves page load time. AEM supports minification of JavaScript files by generating minified code for semantic changes.
Experience and Content Fragments
By design, Content Fragments and Experience Fragments (CF and XF) features were introduced to simplify content management and reuse, but they can be used to develop useful caching strategies.
Caching and Rendering
We touched down on the topic of caching in AEM performance optimization. Now, we’ll explore it in more detail. The right caching and rendering strategy will help you get the most from your AEM implementation. It should consider your resources and the required performance level.
AEM Rendering Optimisation
First, let’s tackle the concepts of client-side rendering (CSR) and server-side rendering (SSR). The key difference between CSR and SSR is where the rendering takes place. In CSR, the client does the rendering. The server only serves a blank HTML file. From there, the browser handles the rest of the rendering process. In Server-Side Rendering (SSR), the server renders the page before sending it to the client.
In the case of content-rich single page applications, you might consider server side rendering for some of the content to speed up the initial page load. Although AEM fully supports the SSR feature in such cases, it is recommended to carefully evaluate whether the effort is worth the value, especially considering long-term maintenance.
SSR becomes particularly useful if your site needs a boost in either of these areas:
- SEO: Is SSR necessary for ensuring your site gets indexed properly by search engines? Despite advances, search engines can be finicky with JavaScript. So, SSR might still be your site’s best friend (and don’t forget to follow the best practices of AEM SEO).
- Page Speed: How does SSR impact speed in real-life environments and user experience? If your users are impatient and demanding (and who isn’t these days?), this is a valid point to consider.
AEM Caching Optimisation
Dispatcher Cache’s role takes center stage here. One of the AEM performance best practices is to cache AEM pages or fragments in the AEM dispatcher. In this case, the Dispatcher Cache serves as a reverse proxy cache that sits between the AEM and the end user’s browser. The cache stores subsequent copies of content that can be requested directly from the cache rather than from the AEM itself.
What makes this feature even more appealing is the fact that users can configure Dispatcher Case to cache specific types of content, such as images or JavaScript files, or to cache in tiers, from pages to sections of the site.
Testing and Optimization
You’re almost done. Only a small jigsaw puzzle piece remains — let’s verify that all the methods you’ve implemented work as they should. Various methods and tools exist for AEM performance testing and fine-tuning, available independently or commercially.
AEM Performance Testing
Testing can be performed on Publisher instances, Author instances, or both depending on your requirements. Many strategies and methodologies exist, but use those that mimic real conditions as closely as possible.
- Simulation of reality. This is an obvious condition for successful testing, but it is not always easy to follow. Use production-like amounts of content. Test the code, hardware, and network config being prepared for production.
- Testing goals. Before testing, we must set the loads and acceptable response times. If there is a migration, the response time must match the current production environment at most. As for the load level, it is a good practice to set the load level to twice the actual peak load.
- Tools. There are many commercial testing tools available. For example, Adobe’s Tough Day can load-test different AEM instances and collect performance data. To test mobile or responsive sites, use tools that simulate slow connections, like 3G or Edge.
AEM Performance Tuning
A good start for fine-tuning your website is to benchmark it against industry standards and top competitors. This ensures you stay aligned with current industry standards and gives you a clear view of the technologies you’ll need to adopt in the near future to stay ahead of the competition.
Some paid services let you compare your site’s performance and ranking to your competitors’. SimilarWeb, Ahrefs, and Semrush are good examples of such services. Alternatively, you could manually analyze competitor site performance by comparing their metrics to industry standards and your own site’s performance.
Among the internal resources and tools useful for final performance tuning are Monitoring Performance and Developer Mode. Monitoring Performance is a set of documentation that aids problem diagnosis and identifies tuning opportunities. Switching to Developer Mode in Author UI will let you check render times for each page component and error stack traces.
Final Thoughts
AEM performance optimization is a complex issue. It needs a multi-faceted approach and a lot of resources, as shown above. The structured information in this article should prepare you to tackle this task step-by-step.
Yet, if you have an understandable desire to delegate this task to professionals, that option is also available. Experienced AEM consultants have the expertise and resources to get the most out of your AEM implementation and provide you with fine-tuning methods that are tailored to your business objectives.
