jQuery saves time. It's great. But if you are focused on page speed, low ad spend costs, and beating your competitors...jQuery is a bust.
When your web page loads, there a huge number requests being made. Some of those requests are render-blocking requests. Images are not render blocking requests.
The main initiator of render-blocking requests are <script> tags with src= that do not have the attributes async or defer. Simple, just add async or defer? Not so simple.
If you load jQuery asynchronously, you will likely need to code up a load watcher so you don't try to run jQuery dependent code on the DOM before the script is loaded. Or, you'll wait until all render blocking resources are finished, then load then entire DOM, then ensure jQuery loads last. Both are painfully slow strategies. We want the page to start visually loading as soon as the DOM is available.
This makes all jQuery implementations a problem. Either you have an explicit render-blocking request, or at a minimum you have a blank screen or a jumbled mess once jQuery finally loads causing very high scores for Cumulative Layout Shift (CLS).
1. Multiple Versions On The Same Page
Did you know there are something like 20 versions of jQuery across 4 major versions over 10 years? Each version has different methods available. MANY of the apps you install via the Shopify app store require jQuery. Some require a specific version. It is not uncommon to see TWO different jQuery files loaded on the same page. So imagine that, two payloads of ~ 40K before you can load parts of your page. Not good!
2. Loading jQuery via CDN
CDNs (Content Delivery Networks) are awesome. But the DNS network speed between your customer's browser and the CDN that serves jQuery is not guaranteed at all. In 2022 we've seen an unprecendented number of outages and attacks at the DNS layer. We want to remove any additional risk to our page load speed. If we're loading jQuery via CDN, it's a risk too great. We have a render-blocking resource, loading from a network location that we have no control over.
3. jQuery is really just unecessary
jQuery can save developers a lot of time because it contains 'shortcut' methods for doing more complicated tasks, specifically animations and batch selector targeting. With a few helper functions and CSS3 animations, jQuery is largely unneccessary (if not completely redundant). Rip it out!
Another reason developers like jQuery is for it's $.get() and $.post() methods in favor of XHTTP calls. They are just being lazy! Now we can also use fetch() in all modern browsers.