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

[Abhishekty]

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. 

[milind_bachani · Accepted solution]

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