15 Ways To Reduce JavaScript Execution Time In WordPress (Hint: It’s Often From Third-Party Code Or Your Theme/Plugins)

The best way to reduce JavaScript execution time in WordPress is to view your largest JavaScript files in Chrome Dev Tools’ coverage report so you know what is loading them.

In WordPress, large JavaScript files are usually loaded from bloated themes/page builders, jQuery dependent plugins, and third-party code like analytics and social sharing buttons. Perfmatters is great for reducing JavaScript as it can unload JS files on specific pages, host Google Analytics locally, reduce the analytics tracking code size, delay JavaScript, lazy load iframes/videos to prevent external JS requests by YouTube, and find jQuery dependent plugins.

Cache plugins also do (some) of these. WP Rocket is OK, but I recommend FlyingPress. Flying Scripts and Flying Analytics are also solid plugins to optimize third-party code. Otherwise, basic optimizations like minification, Brotli, and enabling certain “performance settings” in your page builder can reduce JavaScript. If you can’t host third-party JavaScript locally, consider delaying it or at least adding resource hints such as prefetch/preconnect to establish early connections.

My guide walks you through all this but if you have questions, drop me a comment. Good luck!

 

1. Find Large JavaScript Files

First, let’s find your largest JavaScript files.

PageSpeed Insights shows them under “reducing JavaScript execution time.” Otherwise, you can use the Chrome Dev Tools coverage report to find your largest JS/CSS files. Check the columns on the right side to filter by type (JS per function), total bytes, or usage visualization.

Where are they loaded from?

• jQuery?
• Third-party code?
• Your page builder?

Also look at your “third-party code” report which we’ll get into in steps 5-10.

 

2. Avoid Bloated Themes/Plugins

Sounds obvious, but tons of people still use Elementor/Divi/Avada and slow plugins.

If you’re open to switching, I suggest GeneratePress (what I use), Blocksy, Kadence, or StudioPress. If you must use Elementor or Divi, at least take advantage of their performance settings, code your header/footer in CSS (instead of using their bloated code), and avoid using page builder plugins because you want a fancy design with robust functionality. Keep it simple!

You can also use Query Monitor to find your slowest plugins, WP Hive’s extension to browse slow plugins in the WordPress repo, and check which plugins add database bloat using WP-Optimize. If plugins load below the viewport (i.e. third-party comments), try delaying them.

 

3. Replace jQuery Dependent Plugins

If you see jQuery in your reports, use Perfmatters to show jQuery dependent plugins. This is found in the Script Manager Settings. Removing jQuery is an ongoing process that usually involves finding more lightweight plugin alternatives and coding things manually (or using Gutenberg for tables, galleries, etc). The only jQuery dependent plugin I use now is Rank Math.

 

4. Unload JavaScript On Specific Pages

Again, use the Perfmatters script manager for this (or Asset CleanUp if you’re on a budget). These let you disable JavaScript/CSS files (or plugins) on pages where they don’t need to load.

Step 1: Enable Test Mode to prevent your site from breaking.

Step 2: Head to the script manager to see all JS files loading on the page. Disable files that aren’t loading on the page while checking your site for broken elements. Here are examples:

• Disable slider plugins everywhere but pages that use sliders.
• Disable contact form plugin everywhere but pages with forms.
• Disable social sharing plugins everywhere but posts (see below).

Step 3: Deactivate Test Mode to publish changes.

 

5. Reduce Third-Party JavaScript

Third-party code is a common reason for a long JavaScript execution time.

Open your “third-party code” report in PSI and view each domain’s transfer size and blocking time. Steps 6-10 show you how to optimize common third-party code (however, overtracking using too many analytics tools is usually a big reason for this). The basic process is: host files locally when possible (Analytics, comment avatars, etc). Then delay any third-party JavaScript that can’t be hosted locally. For other third-party code, use prefetch/preconnect resource hints.

 

6. Host Third-Party JavaScript Locally

Hosting files locally on your server is always faster.

Google Analytics can be hosted locally in Perfmatters or Flying Analytics. Several plugins can host comment avatars locally if you have lots of blog comments. The only plugin I know that can host YouTube thumbnails locally is FlyingPress (preventing requests from i.ytimg.com). And of course, you should host fonts locally to prevent requests from fonts.gstatic.com which can be done in most cache plugins (except WP Rocket) or in Elementor’s Performance settings. And if you’re using LiteSpeed Cache, they have an awesome setting to localize JavaScript files.

 

7. Delay JavaScript

Most optimization plugins do this (FlyingPress, WP Rocket, LSC, Perfmatters) or Flying Scripts. However, each one does it differently, so check the documentation on how to add files (by file name, keyword, or if it’s automatic like WP Rocket). Below are common JavaScript files you can delay, but make sure you view your third-party code report to see which ones load on your site.

Google Analytics

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js

Google Tag Manager

/gtm.js
/gtag/js
gtag(
/gtm-

Google AdSense
*Delaying this too long can impact revenue/data. Test carefully. You will also need to delay the plugin you used to add AdSense (if applicable).

adsbygoogle.js

Google reCAPTCHA

grecaptcha.execute

Google Optimize

optimize.js

Facebook Pixel

fbevents.js
fbq(
/busting/facebook-tracking/

Specific Plugins (Only Use When They Load Below The Fold)

wp-content/plugins/plugin-name

 

8. Lazy Load Videos/Iframes

Lazy loading videos/iframes and replacing iframes with a preview image prevents third-party requests from YouTube and Google Maps. Most cache plugins do this (same with Perfmatters).

 

9. Use A Smaller Google Analytics Tracking Code

I recommend Perfmatters or Flying Analytics since they host Google Analytics locally while reducing the size of the tracking code through various settings. For example, analytics.js and analytics-minimal.js are smaller than the gtag.js versions. You can disable Display Features to prevent a second request to DoubleClick if you’re not using certain Google Analytics features.

 

10. Disable New Relic, Email Obfuscation, Rocket Loader

All these add a small JavaScript file, but you really shouldn’t need to use them permanently. New Relic is a diagnostic tool (so disable it when you’re done), you usually don’t need Cloudflare’s email obfuscation unless you list your email all over your site, and Cloudflare’s Rocket Loader usually does more harm than good with compatibility issues (just disable it).

 

11. Minify JavaScript

Minifying JavaScript/CSS files is typically done through cache plugins, Cloudflare, or other CDNs. It strips unnecessary characters in your code. If minifying files breaks your site, you’ll need to find the problematic files (in your source code) and exclude them from minification.

 

12. Defer JavaScript

This can eliminate render-blocking resources and can also help reduce JavaScript execution time (and yes, you can defer and delay at the same time). If this PageSpeed recommendation is giving you trouble, try using the Autoptimize + Async JavaScript plugins. I have an Autoptimize tutorial then for Async JavaScript, just install the plugin then click “Apply defer” in the settings.

 

13. Compress Pages With GZIP Or Brotli

Compressing pages with GZIP or Brotli reduces JavaScript execution time. Brotli compresses pages to smaller files than GZIP, but your host must support it (another reason I use Rocket.net).

 

14. Enable “Improved Asset Loading” In Elementor

When using Elementor, Improved Asset Loading only loads elements where they’re actually used (JS files in Elementor Core widget handlers, and Swiper in Elementor + Elementor Pro). You can enable this in Elementor’s settings. I have a tutorial specifically to speed up Elementor.

 

15. Enable Divi’s Performance Settings

Divi also has several performance settings to reduce JavaScript sizes such as dynamic JavaScript libraries. But as I mentioned earlier, page builders aren’t good for core web vitals.

 

Retest JavaScript Execution Time

PageSpeed Insights can take 28 days to update, so you can try Lighthouse or SpeedVitals for retesting your website. Hopefully this tutorial helped you get closer to passing core web vitals!

 

Frequently Asked Questions

How do I reduce JavaScript execution time in WordPress?

View your largest JavaScript files in the Chrome Dev Tools coverage report, then optimize them by hosting JS files locally, delaying them, and avoiding jQuery-dependent plugins.

How do I reduce JavaScript execution time using WP Rocket?

WP Rocket can reduce JavaScript execution time by minifying, deferring, and delaying JavaScript while lazy loading videos/iframes to prevent external requests from YouTube.

Does removing jQuery reduce JavaScript execution time?

Yes, you can use Perfmatters to see jQuery dependent plugins in the script manager settings then replace them with lightweight plugins, code, or simply removing the plugin.

Cheers,
Tom