Defer jQuery in Wordpress

DarkRed

DarkRed

Joined
Aug 2, 2017
Messages
156
Likes
96
Degree
0
Defer jQuery gives you a pretty significant speed boost. Mostly in terms of First Contentful Paint

I'm talking about 1s (a lot)
UmeXjhz.png


The problem is that a lot of plugins insert jQuery code inline and it can't run properly if jQuery is defer.

I wonder if there is a way to tell inline code in wordpress to "wait" until the jQuery file is loaded.

I use google hosted jQuery because I think that a lot of people would have that version (the most popular, I checked) cached in their browsers. So that 1s should be lower in the real word

Thanks
 
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.

The best thing you can do is preload it, and that's only if you're on HTTP/2 and SSL. The idea is to make it load as fast and early as possible so it doesn't block rendering for as long as it would. You won't always see a gain, but you will for many users closer to your server or CDN locations. This is called Server Pushing.

There's a few ways of doing it.

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.

Your next best method is to send the request with the PHP as the page is generated. I'm not going to type about that because you set that in the header and, while it does send an HTTP header directive, it's still not fast enough.

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?

The other problem is, since the real render blocking stuff either depends on jQuery or requires jQuery to get through the pipe and parsed first, then is pushing jQuery itself enough?

The answer is that there's a combination of files that need to get pushed, and it's different for each site. Pushing all you "should" will often be slower than pushing half of it, as an example.

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.

Anyways, this is a huge can of worms. It's fun, but it's not going to make or break your rankings. This is the final 1% of stuff that brings even less results. But if you're into speed optimization, definitely learn about it.
 
Thanks a lot Ryuzaki!

Yes I know I should't worry too much about this. This is the only thing that keeps me from getting <1s in mobile but it's too much trouble and the site can break if any plugin inserts necessary jquery code inline.

It's really a shame that plugin developers don't use vanilla JS for the inline code. If not for this, then we could defer jquery and improve speed.

I tried server push but I was not convinced by the results.

Thanks again!
 
You must log in or register to reply here.
Back