Website optimisation tips

[theo_nicolaou]

Hello,

I am investigating different options for optimising our website. Having spent a morning of searching online, I have found the vast majority of articles refer to optimising the repositories, the OAK side, the workflows and indexing. While I am certainly not dismissing these factors, they're not quite what I am looking for - I was hoping to find more examples of how to optimise on the front-facing site. So for example:

• reducing the number of HTTP requests - there appear to be quite a few extra JS files loaded on our site, some of which may not necessarily be needed but they are all dependencies of each other. Does anyone have experience of this with their website and do you have any tips on how to reduce the number of requests without breaking the site?
• similarly, are there any JS/CSS files that AEM loads by default which don't need to be on the front-facing site?
• I've read that it might be a good idea to use a CDN for JS/CSS assets - but how does this work in conjunction with using ClientLibraries?

Any help or advice will be a good starting point and hopefully the discussion will go on from there

Thanks very much in advance

Theo

[Daniel_Gordon]

Hi Theo,

Reducing the number of HTTP requests: Clientlibs or ClientLibraries are an excellent feature for this use case. At a high level the recommendation would be to set up an "all" clientlibrary and use the embed property to concatenate separate JS or CSS files into a single browser request. Embedding dependencies in the "all" clientlib will ensure these are not served separately. *Note for both CSS and JS the files are concatenated so the order in which you embed matters and throughout testing should be done. A more detailed example can be found here: http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Minify/Gzip Clientlibs - AEM also has configurations to minify and gzip clientlibs which will reduce the file size sent to the browser, the above link has more detail

Optimize Dispatcher Cache - The most bang for your buck really comes with well though out cacheing rules with a dispatcher running in front of your publish instance. The dispatcher is a module that can run on Apache or IIS and can cache AEM rendered content (JS, CSS, HTML) and serve it directly from the webserver. This greatly minimizes the number of requests that hit AEM directly and greatly improve performance (also is a must from a security standpoint). Docs link: https://docs.adobe.com/docs/en/dispatcher.html and I recommend watching this Gems session by Andrew Khoury: https://docs.adobe.com/ddc/en/gems/dispatcher-caching---new-features-and-optimizations.html

CDN cacheing - a CDN like Akamai can sit in front of the dispatcher and be used to serve files like JS/CSS even faster. Because you have less control over cache invalidation and want a long TTL so that the files are cached in the client browser you can look into ACS Commons Versioned Clientlibs: https://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs.html

[Gdubz-57m2mu]

Along with the link that Scott gave you, take a look at the Adobe Granite HTML Library Manager[1] configuration if you haven't already. Should help make the OOTB clientlibs a little lighter in PROD.

[1] https://docs.adobe.com/docs/en/aem/6-2/deploy/configuring/osgi-configuration-settings.html#Adobe Granite HTML Library Manager

[smacdonald2008]

Here is more input from Adobe ppl: 

Might be worth sharing: https://docs.adobe.com/ddc/en/gems/aem-web-performance.html.  I’d also recommend looking at image sizes.  I’ve seen otherwise speedy sites get dragged down by authors who haven’t optimized hero images.

[Jörg_Hoh · Accepted solution]

Hi,

I think that you first need to split the complete area of website performance optimization into 3 distinct areas:

* Server side optimization: Here you optimize the time the requests required to be responded on the server. That's something which can be found in AEM in the request.log, but also in the access.log of webservers etc (let's ignore the fact, that the dispatcher can sit on a different machine and there is network between dispatcher and AEM).

* The network aspect: everything between server and the end-user. The internet, so to call. CDNs and proxies, fiber or modem. Optimizing here is rarely possible (besides maybe CDN).

* The browser: Here you should look at your Javascript.

Jörg