Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

how to add CSS Preload attributes in link tag which is added by sightly

Avatar

Level 3

Hi, 

 

Working on Optimize AEM Site Performance

I need to add CSS Preload attributes in the link tag which is added by sightly.

 

 

For ex:

<sly
  data-sly-use.resolver="${'com.myProject.use.ClientlibResolverUse' @ category='myProject.collections.head', mode='js'}">
<link rel="preload" href="${ resolver.getVersionedPath @context='uri' }" as="script">
</sly>

 In above case I have the link file on "headlibs.html" file but in below case how I can add ?

 

<sly data-sly-call="${clientLib.css @ categories='myProject.global'}"></sly>
<sly data-sly-list.libtouse="${footlibs.clientLibsToAdd}">
  <sly data-sly-call="${clientLib.css @ categories=libtouse}"></sly>
</sly>

In this case, the CSS link file will add when our page will render.

 

For above case what will be the best approach to add rel="preload" attribute. 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

I am not sure if we have an OOTB functionality inplace to achieve the same, however you can refer this thread:
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-use-media-preload-p...

which talks about custom implementation to achieve the same, hope it helps.

Thanks

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Abhishekty ,

I am not sure if we have an OOTB functionality inplace to achieve the same, however you can refer this thread:
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-use-media-preload-p...

which talks about custom implementation to achieve the same, hope it helps.

Thanks