Can we include defer=true to clientlibs without any custom implementation? | AEM 6.5.16 | Community
Skip to main content
Q
QuangDa1
New Member
August 8, 2023
Solved

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

  • August 8, 2023
  • 5 replies
  • 2701 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aanchal-sikka

hello @quangda1 

 

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.

5 replies

G
GururajKo
Level 2
August 8, 2023

hi @quangda1 

Have you given a try to the method described in the documentation provided below?

    Q
    QuangDa1Author
    New Member
    August 8, 2023

    Yes @gururajko, 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-to-aem-js-libraries-to-avoid-render/m-p/400109

      viveksachdeva
      Community Advisor
      viveksachdevaCommunity Advisor
      Community Advisor
      August 8, 2023

      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

        mahi1729
        mahi1729
        Level 4
        August 8, 2023

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

          aanchal-sikka
          Community Advisor
          aanchal-sikkaCommunity AdvisorAccepted solution
          Community Advisor
          August 8, 2023

          hello @quangda1 

           

          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
            Q
            QuangDa1Author
            New Member
            August 8, 2023

            Thanks everyone!

              Terms & ConditionsAccessibility statement

              Loading footer...