Hi,
We are working on improving site performance. We have performed an audit using Google Lighthouse. Our page performance score are low. There are various suggestions to improve the page speed. Some of them are
1. Adding media attribute to header link tag to load device specific CSS rather than loading all.
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
2. Adding preload, prefetch attribute to header link tag to load JS/CSS upfront.
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
3. Use Async and Defer for loading JS
Could anyone throw some light on how to use such above attributes to increase site performance as suggested by Google and various articles. We have tried with Async and Defer as explained in this article [1]. But I would to know whether "async" will really help us to gain performance since we load the JS already in footer as AEM best practice.
Thanks and Regards,
Ruben Fernando
I am discussing this with internal AEM ppl. In meantime - check this KB on performance -- Optimize AEM Site Performance
Hi @smacdonald2008 ,
Is there any updates on this?
I would also like to append rel="preload" and as="style" to my css client imports. Following information here from a recent audit - https://web.dev/uses-rel-preload/?utm_source=lighthouse&utm_medium=devtools
Currently I'm on aem 6.3 and I load css like:
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-unwrap/>
<link type="text/css" rel="stylesheet" data-sly-call="${clientLib.css @ categories='layout-example'}" data-sly-unwrap />
Any update on the above query on rel="preload", even for our site the google Lighthouse report has suggested to use rel="preload" instead of rel="stylesheet".
Is there any other post where answer to this has been given, can you redirect to that post by posting that link over here.
You can try using custom ClientLibsModel e.g.
https://github.com/arunpatidar02/aem63app-repo/blob/master/java/ClientLibsModel.java
@arunpatidar Thanks for the response. Will try this on my local.
But however was looking at an OOTB solution for this, like by adding a property or just some conditions in the Sightly code.
How do we combine these for java model you suggested to use? @arunpatidar
<sly data-sly-use.jsObj="com.aem.community.core.components.ClientLibsModel" data-sly-list="${jsObj.cssFiles}"> <link rel="stylesheet" href="${item}" type="text/css" async> </sly>
and
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-unwrap/> <link type="text/css" rel="stylesheet" data-sly-call="${clientLib.css @ categories='layout-example'}" data-sly-unwrap />
you need to pass clientlibs category as a request variable and read in WCMPojoclass.
e.g. of parameter with WCMUsePojo
https://aemlab.blogspot.com/2018/09/aem-content-fragment-with-component.html
Hi,
Check preload here https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
For Async and Defer
Hi,
I went through the KB on performance already. We are working on UI front to optimise the site performance.
Could you share the updates on your discussion with internal AEM folks on how to use media, preload, prefetch attribute in clientlibs.
Thanks and Regards,
Ruben Fernando
Views
Likes
Replies