Skip to content

Embed jQuery

Jump to bottom
Milan Petrovic edited this page Oct 2, 2020 · 1 revision

Embed jQuery

jQuery is used on 99.99% of all WordPress websites, themes, and plugins use it all the time, and it is loaded everywhere. But, it also posses a big issue for the page loading. It has to be loaded first, and run first, before any other JavaScript code that uses it can run, and because of that, it is a render-blocking resource. There are no reliable ways to defer it's loading without breaking every other script on the page.

And while the embedding of JavaScript inside the main HTML content is not recommended, embedding jQuery is one solution to the render-blocking issue.

Pros to the embedding of jQuery in HTML

  • jQuery is no longer render-blocking
  • Faster execution of the page

Cons to the embedding of jQuery in HTML

  • jQuery can't be cached by the browser
  • It will increase the size of the main HTML by 95KB

How this plugin works

The script is run on the website frontend-only; it doesn't affect jQuery loading on the admin side. It is loading jQuery that is part of WordPress, and places it in the page HEAD, at the very start of the HEAD tag. After that, it hooks into WordPress default scripts registration code, it finds the jQuery Core there and replaces the registered script URL with an empty string. This way, jQuery Core is still registered, it will not break any code that depends on it, but WordPress will not print the jQuery script tag.

Clone this wiki locally