For a while, I was wrestling with how to optimize jQuery on a certain WordPress site. I was using jQuery for a few things, so I couldn’t remove it. But I didn’t need it for anything above the fold. I wanted to delay jQuery and all scripts that depend on it until user interaction. Every solution I tried had a problem, until the solution I found to actually work for me.
My Solution
My solution was to use the Autoptimize plugin to combine the scripts which depend on jQuery (including jQuery itself) into one file, and then delay this combined script until user interaction using the Flying Scripts plugin.
Note: Do not confuse “delay” with “defer.” Here I am referring to delaying until user interaction, which is different than applying the defer="defer" attribute on a script.
Why was I having trouble? Why couldn’t I just delay each of the scripts with Flying Scripts and not bother with Autoptimize?
Your site’s scripts may work by simply using Flying Scripts to delay jQuery and each script depending on it, without needing Autoptimize to combine anything. But for me, I was getting console errors.
Perhaps the errors were due to the way the plugins using jQuery enqueued the scripts and their dependencies. Or, perhaps it is related to the way Flying Scripts was firing the selected scripts on user interaction, although I doubt the latter. I believe Gijo of WP Speed Matters who is the developer of the Flying Scripts plugin confirmed that Flying Scripts should honor the dependencies.
By the way: If your site only uses a little jQuery from something like a scroll to top button, or an accordion or table of contents, etc, and you would like to replace it with something that doesn’t need jQuery so that you can more easily delay or defer jQuery and speed up your site, here are some ideas below. Many of these can be done with CSS only and don’t need any JavaScript at all!
Caveats & Alternative Solutions
Exclusions
Keep in mind that scripts are not recommended to be delayed if they would cause any noticeable delay in response to an interaction, such as a tap on a menu icon or any other functionality or interactivity. In that case, use defer instead.
Also keep in mind that if you go this route, you will likely have scripts that you CANNOT combine and delay, as that may break things. (But do test things out and delay as many as you can.)
By default, Autoptimize will combine everything that is not excluded. So you will probably need to add exclusions in the Autoptimize settings. You can exclude by filename but also by folder path, so you don’t have to type out the name of each script you want to exclude, though you can if you want to.
I would recommend combining only the scripts depending on jQuery and jQuery itself. The rest you can still delay separately or apply defer/async as mentioned below.
If you need help to find which scripts to exclude, you can put your URL into GTMetrix or WebPageTest and look at the waterfall diagram of your files loading.
You can also check your browser console for errors to see which scripts are breaking when you try optimizing jQuery. These scripts you may want to include in the single jQuery-dependent file combined by Autoptimize.
Inline JavaScript
Also keep in mind that if your theme or plugins include inline JavaScript that references jQuery, it becomes more complicated and you may be out of luck. You can try your luck with Autoptimize’s setting to “also aggregate inline JS”.
Test this carefully, as inline JavaScript may be inlined for a reason, so you may want to try to exclude the inline scripts that are not related to jQuery.
Defer & Async
If it is not working for you to delay jQuery, you could also try to defer jQuery and the scripts depending on it. The Async Javascript plugin makes it easy for you to play around with this.
Deferring is not as performant as delaying, but it would still be better than leaving it as render-blocking. If your site needs jQuery for something above the fold, then this may throw console errors and you may not be able to optimize jQuery unless you move the components using it to somewhere below the initial viewport farther down the page.
What about my other scripts?
What you do with your remaining non-jQuery-dependent scripts is entirely up to what you have on your site and what can be done without errors. Delaying as many as you can until user interaction is generally the most performant, and then defer/async.
Handling all my delayed scripts
I excluded from Autoptimize all scripts except for the jQuery-related scripts that I wanted to combine and delay. I had a few other scripts I was delaying with Flying Scripts that had nothing to do with jQuery.
I could theoretically have combined all the scripts I wanted to delay into a single JavaScript file to delay, but I chose to keep them delayed individually alongside the bundled file which was also delayed. In other words, I ended up having the following scripts delayed using Flying Scripts:
-The jQuery-related scripts bundled into a single file
-Some other script1
-Some other script2
Handling all remaining scripts
The above scripts are what I am delaying until user interaction with Flying Scripts. I have other JavaScript that I cannot delay, and I am using the Async JavaScript plugin to defer them. This plugin also lets you apply async. You can also mix and match async and defer to whichever scripts you want. You can also exclude scripts.
Of course just as not all JavaScript can be delayed, not all JavaScript can be deferred/asynced, so it takes some testing.
Non-jQuery Alternatives
You may have only a thing or two on your site using jQuery such as a Table of Contents plugin, a Scroll to Top plugin, etc. You could replace these with plugins or even CSS that doesn’t require JavaScript at all.
Table of Contents
One of my favorite ways to incorporate a table of contents on a WordPress site is to use the LuckyWP Table Of Contents plugin which does not require jQuery. As of this writing, it has not been updated for a while, but it is still recommended by people on Facebook speed groups and works well.
For a minimalist route, you could simply create a list element and use anchor/jump links to the headings on your page. You could add CSS smooth scrolling too.
Scroll to Top
One way to do this is to insert an anchor element around the opening of the <body> tag, using an HTML entity for an arrow or whatever you want to users to see and click to scroll to the top.
<a href='#top' class='scroll scroll-top'>⇧</a>Code language: HTML, XML (xml)You could add id=”top” to an HTML element somewhere on your page, but it seems that modern browsers don’t need it and are smart enough to just jump to the top of the page when they encounter a link to #top.
Of course, you need to style this anchor element and position it where you like, probably using position:fixed and something like left:25px, with some padding and a background, etc.
Tabs
As with many of these, you can get creative with how to implement tabs functionality. If you are comfortable with CSS and HTML, you can search for some some starter tabs code on CodePen and tweak it to fit your needs.
CSS-only solutions typically include the use of radio buttons. Content can be revealed and hidden with the use of CSS transitions/translations/transforms or simply display:none/block as in this example and this example. They don’t even require absolute positioning, so the containers can flex with dynamic content such as WordPress shortcodes.
I realize this list is rather vague, but my aim is to show you the possibilities that are there with just a little more effort for a potentially substantial benefit in performance. If you are less comfortable with editing code, you still can probably find some other plugins to get the job done without jQuery.