Seven Quick Wins for Better Adobe Experience Manager Website Performance | AEM Community Blog Seeding

[kautuk_sahni]

Seven Quick Wins for Better Adobe Experience Manager Website Performance by Bounteous

Abstract

Performance is often an afterthought for websites developed on Adobe Experience Manager (AEM). We inherit AEM code bases all the time, and it pains me to see that the basic features to improve a website’s load speed are either incorrectly implemented or not implemented at all. These are some of the quick wins you can work on without having to overhaul your entire site.

Please note that the recommended changes here apply to plain old AEM, and not AEM as a Cloud Service (AEMaaCS). Where applicable, I will call out how certain things are handled with AEMaaCS because some performance improvements are actually baked into the new offering.

1. Use ACS Commons Versioned ClientLibs
The ACS Commons Versioned Clientlibs feature is a must-have for anyone who cares about the performance of their website. You can read more about it in the docs, but the general idea is to automatically add a version string to the typical clientlib inclusion. For example:

This:

/etc.clientlibs/brandname/clientlibs/clientlib-dependencies.min.css
Becomes:

/etc.clientlibs/brandname/clientlibs/clientlib-dependencies.min.9617f52d00575753ffd45532da6c58f7.css
This allows you to cache the resulting CSS and JS files for a really long time on your Dispatcher, the CDN (if applicable), and the visitor’s browser. The version string is automatically updated when something changes, so as soon as the HTML page which references the clientlib is requested again from Publish, it will include the new version hash.

Note that for AEMaaCS, versioned clientlibs are built into the product and enabled by default for dev/stage/prod environments. The ACS Commons plugin is no longer needed.

2. Leverage Sling Dynamic Includes for Uncacheable Content
In a perfect world, your entire site would be 100 percent cacheable on the Dispatcher. That way, your Publish servers only have to do work when the page actually gets published again with some changes.

However, sometimes you may have use cases where a component has to dynamically render and cannot be cached on the Dispatcher. That’s where Sling Dynamic Includes (SDI) come in because they allow you to poke holes in your cache for specific components.

For example, we recently had a scenario where we needed to dynamically create a time-sensitive signature for an S3 upload tool. Rather than not caching the entire page, we opted to just not cache the upload component.

Read Full Blog

Seven Quick Wins for Better Adobe Experience Manager Website Performance

Q&A

Please use this thread to ask the related questions.