Asynchronous JavaScript

[mperry8304]

Hello,

I’m running Weaver Xtreme on 3 sites.  I’m trying to make them load faster and pass Google’s Core Web Vitals.  As a part of that, I’ve found a tool that looks for synchronous JS files.  It’s identified the below two files.  Is there way to make them into asynchronous JS files?

/themes/weaver-xtreme/assets/js/weaverxjslib.min.js?ver=4.4.8

/themes/weaver-xtreme/assets/js/weaverxjslib-end.min.js?ver=4.4.8

 

Thanks!

[scrambler]

Anything that messes with the theme JavaScript  execution (optimization and all) will likely break things, they need to be executed in a very specific order to work properly.

[Weaver]

It is my understanding that the main performance issue is if scripts are loaded at the beginning of page load (commonly called above the fold) or at the end, after all the other HTML has been loaded.

weaverxjslib.min.js must be loaded at the top for optimal performance, while weaverxjslib-end.min.js does load at the end.

I don’t really understand exactly what a synchronous JS file is. Not a term I’ve heard before.

Follow up: Asynchronous Javascript seems to be needed to allow JavaScript to continue to run while waiting on some sort of data (like from an external site.) Some of Weaver Xtreme’s JS may need to wait for parts of the HTML to load because it can’t work properly until that information is available. This is necessary and unavoidable and typical best practice.

[mperry8304]

The term is new to me too.  I’m learning a lot as I try to work through the Google Core Web Vitals issue.

Synchronous code: When a function is called, the program execution waits until the function is returned before executing the next line of code.

Asynchronous code: Scripts are loaded and executed in parallel. They do not wait for other functions or statements to be executed.

Some JavaScripts have an “async” attribute that enables them to act in an asynchronous manner.  Here’s more about that: https://www.w3schools.com/tags/att_script_async.asp

 

[Author]

Posts