Performance & Authoring Challenges on AEM Page

[sparwaiz]

We have an AEM page (product.html) that is quite heavy due to a large number of authored components. As a result, only part of the components load during authoring, which affects usability.

To work around this, we increased the request size in the main Sling servlet from the default value of 1000 to 2000. This resolved the component loading issue during authoring but its not performance oriented . This page also takes significantly longer to load via the dispatcher URL. we to make it better .

I’m looking for best practices or architectural approaches to make the authoring experience smoother and more user-friendly, while also ensuring optimal performance on the dispatcher. Any suggestions to address both concerns would be greatly appreciated.

[Vijendra1]

Hi, 

Not sure if this is relevant for AEM Guides.

In general, you can try following this.

Authoring Experience Improvements

1. Split Large Pages into Multiple Subpages
• Break product.html into logical subpages or tabs using Experience Fragments or Content Fragments.
• Use Dynamic Component Loading (e.g., via AJAX) to load only visible components during authoring.
2. Use Lazy Loading in Author Mode
• Implement lazy loading for components that are not immediately visible.
• This can be done using client-side JS or conditional server-side rendering based on viewport.
3. Limit Component Depth and Nesting
• Deeply nested containers and components increase rendering time.
• Flatten the structure where possible and avoid unnecessary containers.
4. Enable Authoring Mode Optimizations
• Use WCMMode checks to avoid rendering heavy logic in author mode.
• Example:
  if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
  // Skip rendering or load lightweight placeholder
  }

Dispatcher Performance Enhancements

1. Enable Dispatcher Caching
• Ensure the page is cacheable and not blocked by query parameters or headers.
• Use .statfileslevel and .ignoreUrlParams wisely.
2. Use SSI (Server Side Includes)
• Break the page into cacheable fragments using SSI.
• Frequently changing components (e.g., stock info, pricing) can be loaded separately.
3. Optimize Component Rendering
• Avoid expensive operations (e.g., JCR queries, external API calls) during rendering.
• Use Sling Models and caching at the model level.
4. Use CDN for Static Assets
• Offload images, JS, and CSS to a CDN to reduce load on the dispatcher.
5. Analyze and Optimize Dispatcher Logs
• Use tools like Dispatcher Flush Agent and AEM Dispatcher Tooling to monitor and optimize cache behavior.

[DivrajSingh]

@sparwaiz : are you generating these Sites pages from AEM Guides?

If so, AEM Guides provide ability to flatten the nodes/components to reduce the number of components or depth - hence the need to change request size in sling main servlet can be avoided. You can read more about flattening of nodes in pages generated from AEM Guides on this ExL page

But if the pages are not generated from AEM Guides (from ditamap/topics) then what @Vijendra1 mentioned is applicable as well

[DivrajSingh]

@sparwaiz : does this help? If this addresses your query please share your input/acceptance.