jQuery supports many types of lazy loading for images, plugins, etc. But I want to load jQuery itself lazily, i.e. only if it is actually used on the page.
90% of my website does not use jQuery. I would rather add jQuery lazy-loading on all the pages then tediously include jQuery explicitly only in those pages that use it. I do not want 90% of the pages to suffer the performance hit of loading jQuery.
It could be a small wrapper that defines '$', 'jQuery', etc. and dynamically loads jQuery on the first usage of one of those functions.
According to PageSpeed Insights, inserting jquery into a bare-bones page adds 1 full second of render-blocking time on Mobile.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.somacon.com%2Fwithjquery.html
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.somacon.com%2Fwithoutjquery.html