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 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.
Caveats & Alternative Solutions
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.
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.
Defer & Async
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.
-The jQuery-related scripts bundled into a single file
-Some other script1
-Some other script2
Handling all remaining scripts
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.
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.