How to put defer attribute to AEM js libraries - to avoid render blocking issue.

Avatar

Avatar
Level 1
ajeemaw
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
ajeemaw
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
View profile
ajeemaw
Level 1

15-03-2021

ajeemaw_0-1615810270055.png

The above 2 resources are loading inside head element. but I could not find those in source code. I need to know where I can find this call & How can I put defer attribute to that?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Ignite 5
Employee
davidjgonzalezz
Employee

Likes

36 likes

Total Posts

53 posts

Correct reply

16 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Ignite 5
Employee
davidjgonzalezz
Employee

Likes

36 likes

Total Posts

53 posts

Correct reply

16 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
davidjgonzalezz
Employee

15-03-2021

Be careful about overlaying the OOTB headlibs.html and friends - there is a reason why Core Components Page has already seeded the implementation with "customheaderlibs.html" .. its because that's where you should put yours so you're not overlaying the provided one. If you overlay the provided HTML, what happens when Core Components/product changes something about them? Now you're stuck trying to manually reconcile changes down. Also, you lose the ability to use the clientlib include HTML template, which again, can evolve as new capabilities are added to the product.

 

 

Answers (7)

Answers (7)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

15-03-2021

You can implement a custom implementation like https://github.com/nateyolles/aem-clientlib-async

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

15-03-2021

Hi @ajeemaw 

You cannot put a defer/async attribute to the clientlib files as this is currently not an OOTB feature supported by AEM. If you do not need these files to be loaded on the head section, you can overlay headlibs.html and add your custom code to load the required project specific clientlibs.

Please refer the file below from where the JS files are getting loaded.
https://github.com/adobe/aem-core-wcm-components/blob/development/content/src/content/jcr_root/apps/...

Hope this helps!

Thanks!

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

18-03-2021

@ajeemaw - It seems like these are OOTB scripts. Can you verify what these scripts are doing ?

Thanks,
Nikhil Kumar

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

15-03-2021

Refer this post which is currently in progress - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/can-we-async-or-defer-refe...

 

use it for your custom libs not OOTB (until necessary)

Avatar

Avatar
Ignite 5
Employee
davidjgonzalezz
Employee

Likes

36 likes

Total Posts

53 posts

Correct reply

16 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Ignite 5
Employee
davidjgonzalezz
Employee

Likes

36 likes

Total Posts

53 posts

Correct reply

16 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
davidjgonzalezz
Employee

15-03-2021

Since these are included via the ClientLibrary Manager in AEM you can't manipulate the HTML tag used.


You could write a Sling Pipeline Transformer to add a new attribute to the tag tho, similar to [1].

 

 

[1] https://github.com/Adobe-Consulting-Services/acs-aem-commons/blob/master/bundle/src/main/java/com/ad...

Avatar

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Establish
Level 4
Rohit_Utreja
Level 4

Likes

44 likes

Total Posts

45 posts

Correct reply

15 solutions
Top badges earned
Establish
Give Back 3
Give Back
Boost 5
Boost 3
View profile
Rohit_Utreja
Level 4

15-03-2021

These files are coming on the page because of client library "cq.foundation-main".

 

It seems you have created the page component by inheriting OOTB page component.

This OOTB page component has a headlibs.html file, through which this specific clienlib has been included.

 

 

You can overwrite this headlibs.html in your page component and include your project-specific clientlib in that or just leave it empty if you don't want to use it.

Avatar

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile

Avatar
Affirm 50
Level 6
Bhuwan_B
Level 6

Likes

133 likes

Total Posts

124 posts

Correct reply

50 solutions
Top badges earned
Affirm 50
Give Back 5
Boost 100
Give Back 3
Affirm 25
View profile
Bhuwan_B
Level 6

15-03-2021

To Organize and optimize the serving of complex JavaScript and CSS code, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. 

 

Reference : https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.htm...