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
BedrockMission!

Learn More

View all

Sign in to view all badges

How to use media, preload, prefetch attribute in clientlibs

Avatar

Avatar
Validate 1
Level 2
rubenf42159101
Level 2

Likes

2 likes

Total Posts

28 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 2
rubenf42159101
Level 2

Likes

2 likes

Total Posts

28 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
rubenf42159101
Level 2

20-09-2018

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

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

20-09-2018

I am discussing this with internal AEM ppl. In meantime - check this KB on performance -- Optimize AEM Site Performance

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

20-09-2018

Hi,

Check preload here https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

For Async and Defer

  • If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  • If async is not present and defer is present: The script is executed when the page has finished parsing
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

Avatar

Avatar
Validate 1
Level 2
rubenf42159101
Level 2

Likes

2 likes

Total Posts

28 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 2
rubenf42159101
Level 2

Likes

2 likes

Total Posts

28 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
rubenf42159101
Level 2

25-09-2018

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

Avatar

Avatar
Give Back
Level 1
jimmy231
Level 1

Like

1 like

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 1
View profile

Avatar
Give Back
Level 1
jimmy231
Level 1

Like

1 like

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 1
View profile
jimmy231
Level 1

05-07-2020

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 />


I can't seem to find any answers on how to do this. Is there a way to load clientlibs without doing data-sly-unwrap and my template setting what attributes I want?

Avatar

Avatar
Give Back
Level 2
BharanN
Level 2

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 3
Boost 1
View profile

Avatar
Give Back
Level 2
BharanN
Level 2

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 3
Boost 1
View profile
BharanN
Level 2

20-07-2020

@Arun_Patidar @smacdonald2008 

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.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

20-07-2020

Avatar

Avatar
Give Back
Level 2
BharanN
Level 2

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 3
Boost 1
View profile

Avatar
Give Back
Level 2
BharanN
Level 2

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Give Back
Boost 3
Boost 1
View profile
BharanN
Level 2

22-07-2020

@Arun_Patidar 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.

Avatar

Avatar
Give Back 3
Level 1
skyisaakash
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Give Back 3
Give Back
Boost 1
View profile

Avatar
Give Back 3
Level 1
skyisaakash
Level 1

Like

1 like

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Give Back 3
Give Back
Boost 1
View profile
skyisaakash
Level 1

18-03-2021

How do we combine these for java model you suggested to use? @Arun_Patidar 

<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 />

 

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,155 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

18-03-2021

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