To avoid render-blocking resources (JS) how to add defer or async attribute?

Need to add aync or defer attribute for embedded java scripts for system components (web blocks) Example: slikUI, Rich widgets ..etc 

Embeded Javascript 

This Javascript loaded without defer or async attribute in script tag?. 

Hi prabhu prabhu,

If you defer loading of those scripts, any JavaScript embedded in the page will potentially not work as expected (for instance SilkUI Web Blocks may call functions from SilkUICommon.js or SilkUI.js that may not have been loaded yet), most developer's JavaScript on Traditional Web also tends to assume jQuery will be loaded by the time their code runs (so most Traditional Web Forge components that make use of JavaScript).

Why do you need to load those fundamental JavaScript libraries asynchronously?

Jorge Martins wrote:

Hi prabhu prabhu,

If you defer loading of those scripts, any JavaScript embedded in the page will potentially not work as expected (for instance SilkUI Web Blocks may call functions from SilkUICommon.js or SilkUI.js that may not have been loaded yet), most developer's JavaScript on Traditional Web also tends to assume jQuery will be loaded by the time their code runs (so most Traditional Web Forge components that make use of JavaScript).

Why do you need to load those fundamental JavaScript libraries asynchronously?

 

 Hi Jorge Martins,

Thanks for you prompt reply. 

Yes need to load those fundamental or embedded JS files as asynchronously or defer to prevent the "render-blocking". 

Thanks.



Jorge Martins wrote:

Hi prabhu prabhu,

If you defer loading of those scripts, any JavaScript embedded in the page will potentially not work as expected (for instance SilkUI Web Blocks may call functions from SilkUICommon.js or SilkUI.js that may not have been loaded yet), most developer's JavaScript on Traditional Web also tends to assume jQuery will be loaded by the time their code runs (so most Traditional Web Forge components that make use of JavaScript).

Why do you need to load those fundamental JavaScript libraries asynchronously?

 Hi Jorge Martins, 

The reason is I have two UI flows (Login and Logout). This silkUI which used in Logout. 

When application loads this silkUI JS and CSS has been loaded in Login page also because all are under one module. 

If you use defer or async this JS or CSS will not load as long no resource reference from silkUI.js or silkUI .css.

Hope this clarifies. 


 

prabhu prabhu,

As far as I know, this is incorrect:

If you use defer or async this JS or CSS will not load as long no resource reference from silkUI.js or silkUI .css.

According to MDN documentation on <script> neither defer nor async will be dependent on there being a resource reference from SilkUI.js, those attributes just change when the scripts are downloaded and when they are executed (nice visual explanation here). CSS is not relevant here, as those attributes do not even exist for <link> (as per MDN documentation).

If you are using one of the SilkUI themes (and you have to, if you want to use any SilkUI Patterns on those UI Flows), then all your screens are already using at least the SilkUI CSS, and most likely some JavaScript from that SilkUI.js simply due to their Layout Web Block's definition.

I don't think you can avoid loading those scripts on all screens (after the first download, the browsers do cache them locally), I doubt you would be able to load and run them async as at least some JS libraries loaded need to be loaded first, and it's unlikely you can defer them until after your screen's HTML is rendered as several patterns will embed JavaScript directly on the HTML that makes use of those libraries (even if it's just the patterns you are implicitly using because you rely on the default SilkUI Layout web block).

The same would apply to RichWidgets (simply using a Feedback Message on the Preparation or raising an Exception would require the library pre-loaded) and to jQuery.

The reason is I have two UI flows (Login and Logout). This silkUI which used in Logout. 

When application loads this silkUI JS and CSS has been loaded in Login page also because all are under one module. 

Different UI Flows can have different themes, which means that if the UI Flow for the Login screen doesn't rely on the SilkUI theme in any way, the Login screen will not load the SilkUI CSS.

That being said, Async/Defer loading of screens seems like a potentially interesting idea, that would need to be well incorporated in the product, so I suggest you create an Idea for this. If you do, please explain the impact it currently has in your applications.

Meanwhile I'll reach out to the team to see if there's any way this load time can be improved and point them to this topic.