JQuery in HTML body, leading to increased page load time

[wapfalls]

I have a Sticky header built using Header Builder. This adds JQuery code on top of the HTML body to dynamically change the CSS class selectors and to hide/unhide the sticky header based on user scroll and other such configurations defined in the builder.

Now the problem is, since this JQuery code gets added to the top of the HTML body by default, now am forced to include the core JQuery script (jquery.min.js) file to the HEAD section of HTML. And this shows warnings on 'Core web vitals' & 'Google page speed insights' for the "Eliminate render-blocking resources" check, since the entire jquery.min.js is loaded in HEAD.

Is there any way or do we have options to move this auto-generated sticky header JQuery code to the footer section of HTML ? so I will be able to move jquery.min.js also to the footer.

[kevin-pauls]

you can write a script that will defer the jquery and other js but that may break your sticky header. My personal preference is to build the header out manually not using the header builder and then write any functional parts in vanilla js to avoid needing the js loaded at the beginning.

You can test this script to see if it will work for you. If you want to defer the jQuery just remove the if statement that prevents the jQuery from being deferred.