Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
Can we include defer=true to clientlibs without any custom implementation? | AEM 6.5.16
1 Accepted Solution
Correct answer by
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
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
Correct answer by
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
Related Conversations
