How to use media, preload, prefetch attribute in clientlibs | Community
Skip to main content
rubenf42159101
rubenf42159101
Level 2
September 20, 2018

How to use media, preload, prefetch attribute in clientlibs

  • September 20, 2018
  • 3 replies
  • 11518 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    3 replies

    smacdonald2008
    smacdonald2008
    Level 10
    September 20, 2018

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

      J
      jimmy231
      July 6, 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?
        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        July 20, 2020

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


        You can try using custom ClientLibsModel e.g.

        https://github.com/arunpatidar02/aem63app-repo/blob/master/java/ClientLibsModel.java

        Arun Patidar
          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          September 20, 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
          Arun Patidar
            rubenf42159101
            rubenf42159101Author
            Level 2
            September 25, 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

              Terms & ConditionsAccessibility statement

              Loading footer...