Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Can we include defer=true to clientlibs without any custom implementation? | AEM 6.5.16

Avatar

Level 1

I would like to know if it is ok to use defer=true parameter to clientlibs without any custom implementation? Using AEM 6.5.16

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

hello @quangdphn 

 

Improving page load times in Adobe Experience Manager (AEM) involves a combination of techniques.

1. Using Defer in Client Libraries:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base', defer=true}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

This approach involves deferring the loading of JavaScript and CSS resources until after the initial page content has loaded. This can potentially improve perceived page load times by allowing the main content to render more quickly.

 

As mentioned in official documentation:

 

If you don’t have time to investigate what’s best in your situation, then include your client libraries by placing the following HTL lines inside your page head element

 

2. Segregating CSS and JS in Header and Footer (Preferred)
This approach involves placing critical CSS in the page header and non-critical JavaScript in the page footer. By doing this, you prioritize rendering the necessary styles first and allow the page to become interactive before loading non-essential scripts.

 

Here are some considerations:

- Critical Rendering Path: Prioritizing critical CSS and ensuring it loads as early as possible can significantly improve initial render times. You can achieve this by including critical CSS directly in the `<head>` section of the page.

 

- Defer and Asynchronous Loading: Defer and asynchronous loading techniques (such as using the `async` attribute for scripts) can improve perceived load times by allowing the page to become interactive before all resources are fully loaded.

 

- Client Libraries and Caching: AEM's client libraries provide benefits like resource aggregation, minification, and caching. Properly configured client libraries can help reduce the number of requests and deliver optimized resources to users.

 

- Lazy Loading: For non-essential elements like images, you can implement lazy loading to delay their loading until they come into the user's viewport.

 

- Content Delivery Network (CDN): Consider using a CDN to deliver static assets, which can improve load times by distributing resources across multiple servers closer to the user.

 

In conclusion, the best approach often involves a combination of techniques. Prioritizing critical CSS, using defer or asynchronous loading for non-critical scripts, and taking advantage of AEM's client libraries for resource optimization can collectively contribute to improved page load times and a better user experience.


Aanchal Sikka

View solution in original post

6 Replies

Avatar

Level 1

Yes @gururajkoni69, I checked this document already. That's the reason I wanted to confirm.

I found a couple of articles pointing the custom implementation for this like https://github.com/nateyolles/aem-clientlib-async.
This is being mentioned here in this post as well:
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-put-defer-attribute...

Avatar

Community Advisor

Its just about adding clientlib like what is mentioned in the doc in your custom script rather than OOTB headlibs but the flag to use defer is OOTB. You just need to add it in your script where you are loading clientlibs

Avatar

Level 5

Yes. Recently one of my team mates used this to conditionally include a clientlib using defer and doesn't require any customization.

Avatar

Correct answer by
Community Advisor

hello @quangdphn 

 

Improving page load times in Adobe Experience Manager (AEM) involves a combination of techniques.

1. Using Defer in Client Libraries:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base', defer=true}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

This approach involves deferring the loading of JavaScript and CSS resources until after the initial page content has loaded. This can potentially improve perceived page load times by allowing the main content to render more quickly.

 

As mentioned in official documentation:

 

If you don’t have time to investigate what’s best in your situation, then include your client libraries by placing the following HTL lines inside your page head element

 

2. Segregating CSS and JS in Header and Footer (Preferred)
This approach involves placing critical CSS in the page header and non-critical JavaScript in the page footer. By doing this, you prioritize rendering the necessary styles first and allow the page to become interactive before loading non-essential scripts.

 

Here are some considerations:

- Critical Rendering Path: Prioritizing critical CSS and ensuring it loads as early as possible can significantly improve initial render times. You can achieve this by including critical CSS directly in the `<head>` section of the page.

 

- Defer and Asynchronous Loading: Defer and asynchronous loading techniques (such as using the `async` attribute for scripts) can improve perceived load times by allowing the page to become interactive before all resources are fully loaded.

 

- Client Libraries and Caching: AEM's client libraries provide benefits like resource aggregation, minification, and caching. Properly configured client libraries can help reduce the number of requests and deliver optimized resources to users.

 

- Lazy Loading: For non-essential elements like images, you can implement lazy loading to delay their loading until they come into the user's viewport.

 

- Content Delivery Network (CDN): Consider using a CDN to deliver static assets, which can improve load times by distributing resources across multiple servers closer to the user.

 

In conclusion, the best approach often involves a combination of techniques. Prioritizing critical CSS, using defer or asynchronous loading for non-critical scripts, and taking advantage of AEM's client libraries for resource optimization can collectively contribute to improved page load times and a better user experience.


Aanchal Sikka