search

wcm-io / io.wcm.wcm.ui.clientlibs

Extensions for AEM HTML client libraries.
Apache License 2.0
2 stars 0 forks source link

CSS ClientLibs doesn't have default support for attributes like rel, as, crossorigin attributes. #3

Closed gouravmakhija18 closed 11 months ago

gouravmakhija18 commented 1 year ago

Hi Team,

We have noticed that same like sightly JS custom attributes, css clientlibs should also need support for custom attribures.

e.g.

<sly data-sly-use.clientlib="/apps/wcm-io/wcm/ui/clientlibs/sightly/templates/clientlib.html"
    data-sly-call="${clientlib.css @ categories=['my-clientlib-category'], rel='prefetch', as='style'}"/>

E.g. There are some example's for reference as given below

Different "rel" attribute variations

<link rel="prefetch" href="/style.css" />
<link rel="preload" href="/style.css" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />

Different "as" attribute variations

<link rel="prefetch" href="/articles/" as="document">
<link rel="prefetch" href="/public/app.js" as="script">
<link rel="prefetch" href="/style.css" as="style" />

<link rel="preload" href="/assets/Adobe-Clean.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="dummy.png" as="image" />
<link rel="preload" href="https://cdn.com/small-file.mp4" as="video" />
<link rel="preload" href="https://cdn.com/file_1.webm" as="fetch" />

Reference link: 1) https://www.debugbear.com/blog/resource-hints-rel-preload-prefetch-preconnect 2) https://web.dev/preload-critical-assets/ 3) https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

stefanseifert commented 1 year ago

i've looked a bit into this:

the examples and links above are good pointers - however, they are not strictly related to CSS files. moreover there are additional instructions to optimize loading/prefetch behavior in the browser related to all sorts of files (or even only domain names) to optimize web performance

so, i'm not sure if it makes sense to enhance the "css" HTL template for this. keep in mind that the HTL templates provides are merely a facade to AEM's HtmlLibraryManager which allows to generate js/css from clientlibs. the benefit of the wcm.io HTL scripts compared to the AEM built-in ones is to provide more attributes on the generated markup. but the centerpiece is still the actual code generated by HtmlLibraryManager. we could improve the "css" templates by supporting the attributes which only apply to the css use case, and exclude stuff like dns-prefetch, modulepreload etc. this clearly does not relate to CSS - but that does not seem to be the optimal solution.

btw., i'm not a web performance expert, but are you sure it's still best practices to apply all these hints? the articles you are references are all a couple of years old. and if you look at the new AEM Edge Delivery Service (Franklin) stuff, they achieve 100% pagespeed conformance without all those tricks by a clever CDN-based architecture.

gouravmakhija18 commented 1 year ago

I completely agree with you point @stefanseifert but If we are able to provide only below two options to css file, It will really be very helpful to enhance css files performance.

Only preload/prefetch to css file rest can be taken care by HtmlLibraryManager.

stefanseifert commented 11 months ago

i've implemented a PR with preload/prefetch capability for CSS includes in #4 - can you give it a try?