How to Improve jQuery Loading Time with Leap

Categorized as WordPress Tips
Wordpress Jquery Logo

What is jQuery?

If you’re reading this article right now, I’m sure you hate jQuery and want it to stop making your site load slower. jQuery in simple terms is a Javascript library that allows you to build interactive web pages with advanced functionality, animations, visual effects, and etc. The library sounds cool but it is far from ideal for site speed performance. jQuery has around 10k lines of code but you might not even be using 10% of it.

The most ideal situation would be to use pure vanilla Javascript to build our websites because vanilla Javascript is 4x faster than another library like jQuery.

However, it is way too difficult to simply remove it all or recreate your whole website with vanilla Javascript because most of the themes and plugins on WordPress is already powered by jQuery. To fix this problem, we’re excited to share some awesome news for you because we have a feature that’ll solve most of the jQuery problems on your website.

How to fix jQuery issues with Leap

The biggest common issue detected by Leap on almost all WordPress sites is jQuery or jQuery Migrate. In this guide, we’re going to show you how to fix most of the problems coming from this library.

First, go to your publisher dashboard and head over to the speed tab. Then click on Optimization Settings to view the current settings with Leap.

Under Optimization Settings, head over to Script Execution and click on Advanced Settings right below it.

After clicking on Advanced Settings, you should now see the Script Execution Settings that are currently active.

Check the settings and make sure the Core jQuery Feature Preload is on. The Core jQuery Feature Preload feature will load a tiny jQuery replacement script that will enable core functionalities until the main jQuery file is loaded. Script delay will delay all the scripts and excludes some scripts by default. If any of those excluded scripts rely on jQuery but jQuery is delayed til later, your website might have an error so we fix this by loading in the small jQuery replacement. The small jQuery replacement has the most common functionalities of jQuery but it is significantly smaller than the original size.

If you have this Core jQuery Feature Preload setting on and your site is able to function normally, most of your jQuery loading problems should now be solved about as good as they can be without completely removing it from the site (almost impossible).

To ensure the preload feature works for your site, ensure to click “change settings”, toggle the feature on, then use the “preview” function to test the site with this feature enabled (NOTE: you must be logged out of WordPress when previewing the site).

However, if your website has some problems or functions improperly in any way just turn off the Core jQuery Feature Preload setting and turn on the Load jQuery From CDN instead which is right below. Your website will have problems if the smaller replacement script that we loaded does not have the functionalities that your WordPress website is using, so the next best solution is to fully load jQuery from a popular CDN. Before toggling on the Load jQuery from CDN feature, make sure you toggle off the Core jQuery Feature Preload because you do not want to load both at the same time.

The Load jQuery from CDN setting will load jQuery from a global CDN so more users will have it cached. Loading jQuery from a CDN is still a very large file so the Core jQuery Preload feature from above is the most ideal solution, but if your website needs functionalities that aren’t included in our replacement script, loading jQuery from a CDN will fix those missing scripts and make jQuery plugins execute a lot faster.

Under recommendations, you will now see a green notification when the site minimized the impact of jQuery on load time using these features.

The older recommendation may still appear for a day or two, but Ezoic will begin showing it as “optimized” once the feature is minimizing the impact of jQuery on Core Web Vitals. While getting rid of jQuery is ideal, it’s impractical for most publishers and Leap provides one of the only solutions for mitigating this.