Loading Javascript in header for plugin, looking for a way out.

WinMore

WinMore

Joined
Apr 23, 2019
Messages
214
Likes
168
Degree
1
I have never been much of a scripting guy or just web development in general.
But I'm working on it!

Currently, on my website, I convey most of my info by images. I found out that there is a plugin that does something very similar, so I would have to create far fewer images, and if I need to update data it would go a lot faster.
For creating the articles, I expect it would save 30% of my (and my writers) time.

So I figured I would give it a shot.

Turns out it didn't work, and after fighting with the front-end shenanigans, I eventually figured out it wasn't a jQuery error (what kept popping up), but something to do with javascript itself.

After I changed the following setting in Autoptimize, the plugin worked:
d7decf62d0d63ccac64799b6cbfe70d8.png


Now, I expected some performance hit, but not to drop from 92% performance on GtMetrix to 66%.

I managed to reduce the DOM size somewhat, enabled GZIP, and managed to go up to 72-74%.

Now these are my enemies:

cP2Sc5Y.png


I tried not aggregating and deferring, and was hopeful for a second (back to 85%), but yeah, the plugin no longer did its job.

The DOM size is 100% the effect of the plugin. I currently use it on only one of my pages and it's the only one where this happens. The autoptimize scripts don't have much effect on my lighthouse scores on my other pages (still 92+), but I would like to try to stay as fast as possible for when I start running ads.
I don't think there is anything I can do apart from deferring them, but as long as I run that plugin that seems to not be an option.

*Warning: rant*
Honestly, I hate this plugin system. It's almost never transparent to me exactly what's going to happen, and worse HOW they are achieving it.
It feels great to install a plugin and it does what you want, but the second something isn't to your liking, you are fucked.

I'm glad I didn't start using this thing on day one, so I can still back out!
*End rant*

That being said I doubt I could create a similar thing in any reasonable amount of time, and the grass on the other side looks sooooo green. (30% time increase)

So here I am, looking for a workaround.
I found this:
Ryuzaki said:
No, jQuery has to load before any other plugin Javascript. It's a dependency for those files. You're talking about Wordpress, I'm pretty sure.
*snip*
The easiest is to add this in your <head>:
Code: 
<link rel="preload" href="/wp-includes/js/jquery/jquery.js" as="script">

The problem with the above method is you don't get jQuery loading any faster because the browser still has to read and parse the HTML to find that directive.
*snip*
What you want, if and only if you're on HTTP/2 (meaning you also have SSL set up), is to add the directive to your .htaccess file (assuming you're running Apache):

Code: 
<IfModule mod_headers.c>
      <FilesMatch "\.(php)$">
           Header add Link "<https://yourdomain.com/wp-includes/js/jquery/jquery.js>;rel=preload;as=script"
    </FilesMatch>
</IfModule>


Now, if you're slick you can figure out some other render blocking files to send early too.

What this .htaccess method does is tells the browser, as soon as it makes the connection with the server, to download the index.php (or index.html) like normal, but also says "hey, go ahead and download the jQuery file too since I know you need it." If it's cached it'll get skipped.

The conundrum becomes, if you push all of your jQuery and Javascript and maybe even CSS, are you really getting anywhere faster since you're clogging the pipelines and the browser still has to parse all of it?
*snip*
Also, you won't see any of the gains like you saw while deferring jQuery. That's essentially like not loading it at all, which you can't get around. You can get some decent gains, but if you run a lot of plugins it's going to be very minor.
Click to expand...
The way I understand it, jQuery is something built on top of javascript, for ease of use of the developers.
Considering that jQuery is essentially javascript, I would assume I can do something similar?

The other thing I can think of is keeping the javascript out of my header, and finding a way to trigger the plugin to "do it's thing" once everything else is loaded. This sounds great in theory but I don't even know where to start to look.

Untangle my thoughts please

I expect that people will say to just go with the route that I had been going on. Not worth the plugin.

In my head, people like @Ryuzaki and @CCarter would (if they were still using WordPress), go to their own (general) headers and footers, do some code-magic, and tell the plugin exactly how to behave. (So the javascript can be deferred, and the plugin "triggered" whenever it's wanted).

But when I go to my backend and go through the PHP files and all, I feel lost. It's sad but true. I don't even know if what I want is even possible.

So here are some more specific questions:
  • Is it possible to make the plugin "behave"? (eg - do its thing when *I* want)
  • If it is, how? and is it a reasonable amount of work?
  • Is it possible to pre-load javascript? Does it make any sense at all?
  • Am I freaking out too much?
  • Did I miss something obvious?
I'm more than happy to give more info in case I'm being unclear. To be honest, at this point I don't even know if I'm conveying the right information.

Thanks for reading my rambling.

Edit: Figured I would ad that Pingdom acts like nothing is up.
I think Pingdom is behind on the curve.
 
Last edited by a moderator:
My quick recommendation would be to ditch Autoptimize altogether if you're already on HTTP/2. It'll be faster to serve your files separately than all together in one giant payload because you get multiplexing now where you can send them all at once. That means they can be gotten and parsed faster separately. That goes for CSS and JS.

But if I'm understanding your problem, I think this explanation will help you understand what's happening:

You could say that jQuery is built on top of Javascript. It's a library that creates some new functions, and it requires Javascript to be loaded first (which is native to the browser so no problem there). The problem you might be encountering is that Autoptimize is bundling jQuery together with the rest of your .js scripts from the plugins.

The problem being that the plugins are dependent (a technical term, when enqueued they should literally list the jQuery library as a dependency) on jQuery. This means the jQuery library must load first or the plugins' scripts will load first and not have access to the library and won't be able to execute the functions.

So the order needs to be Javascript (in browser) -> jQuery Library (provided by Wordpress) -> other Javascript files (loaded by plugins). Autoptimize might be bungling this, especially once you start deferring things, etc. The "Force Javascript in Head" is likely the issue, putting it before jQuery or you've possibly deferred the loading of the jQuery library elsewhere. Both can be safely undone. If you defer anything it can be the other Javascript files from the plugins, but not jQuery, especially if the mobile menu is dependent upon it, which in a lot of cases it is.

The rest of what you're asking about, yes it's possible. To do it by hand would be nutty. There's some plugin that lets you choose when and where other plugins load. But you don't need all that. There's always a better way like dequeueing their scripts and only enqueueing them on the pages you want. Even then, that's something to deal with down the road, nothing critical at the moment.

You can pre-load jQuery though and I'd recommend it. The quote of mine from another thread shows you how. I'd also pre-load your main CSS file.
 
I tried the removal of the Autoptimize plugin, and it seems that in my case it was more cause of trouble than actual help. Great assessment!

I do wonder how you "enqueue" scripts on the pages you want, using WordPress.
The way I have been using it for now, is generic code for all pages (because changing the header and footer changes every post).
So, if I shift my thinking a bit, it's probably more of something like:
Script tries to load =>Sees it's not wanted on the page => Stops loading.
Or something that manages the scripts does something similar.
Probably more like: some form of script has a list of where the other script is wanted=>decides what scripts to load on the current page.
I'll do some googling on that later :smile:
Ryuzaki said:
The rest of what you're asking about, yes it's possible. To do it by hand would be nutty. There's some plugin that lets you choose when and where other plugins load. But you don't need all that. There's always a better way like dequeueing their scripts and only enqueueing them on the pages you want. Even then, that's something to deal with down the road, nothing critical at the moment.

You can pre-load jQuery though and I'd recommend it. The quote of mine from another thread shows you how. I'd also pre-load your main CSS file.
Click to expand...
I'll try the pre-loading of jQuery and CSS. I just wonder is there an easy way to check if it works?
 
WinMore said:
I'll try the pre-loading of jQuery and CSS. I just wonder is there an easy way to check if it works?
Click to expand...

In your browser's dev tools on the network tab there will be some indication that they were preloaded. They'll come very early in the waterfall, for one, but they'll also probably have something that says they preloaded. An icon or a "p" or something.

WinMore said:
I do wonder how you "enqueue" scripts on the pages you want, using WordPress.
Click to expand...

You enqueue and dequeue in the functions.php file. There's a lot to read and learn, so rather than me type it I'd point you here. That's the basics of doing it for CSS and JS, which is all it's meant for.

Here you can use all of the logic provided by Wordpress like is_single(), is_page(), is_category(), etc. You can provide Post ID's to those functions to choose specific pages. There's a lot of those. After our PMs and these threads, I think you'd really enjoy skimming through the Wordpress Developer Resources, if only to see what all is possible. That's half the battle, just knowing what's possible and knowing to look up the details there.

WinMore said:
Script tries to load =>Sees it's not wanted on the page => Stops loading.
Click to expand...

No, this isn't right, even though it makes sense. What happens is you use logic to enqueue scripts or stylesheets for specific pages or globally without extra logic.

It goes like this: a page is requested by a user (or your caching plugin does it ahead of time) and functions.php is read first and enqueues what it should dictated by the logic. Those scripts and stylesheets are then injected into the wp_head() hook or the wp_footer() hook.

You were right earlier. I create my own theme options panels and hook into those myself to add extra stuff like analytics code, etc. But that's also what is happening with enqueuing through the core. You can also provide a priority level using an integer which lets you control the order of the enqueued or injected scripts. Enqueued scripts are executed at priority level 20, for future reference. So you use that as a baseline to push your own scripts in before or after the others.

It's a lot to take in and learn. I don't have it all memorized nor do I feel the need to since the Dev Resources are always there to reference.
 
You must log in or register to reply here.
Back