If you want to reduce JavaScript execution time in WordPress, you’ll need to find heavy JavaScript files in PageSpeed Insights (or Lighthouse) and optimize them.
You can reduce JavaScript execution time by removing unused JavaScript using an asset unloading plugin as well as minifying, combining, deferring, and delaying JavaScript files. Many of these optimizations can be done using caching plugins, Autoptimize, and Async JavaScript.
Long JavaScript execution times can also come from third-party code. Google Fonts, Google Analytics, and Tag Manager can all be hosted locally while other third-party JavaScript can be delayed using plugins like WP Rocket or Flying Scripts.
1. Find Problematic JavaScript Files
The first step to reducing JavaScript execution time is to open your PageSpeed Insights report and learn which files take a long time to execute.
- Is it jQuery?
- Is it from third-party code?
- Is it from your page builder?
Your report should help narrow down where your heaviest JavaScript files are coming from.
You should also look at your third-party code report which we’ll get into in the 3rd tip.
2. Removed Unused JavaScript And CSS
Page builders, plugins, and other things might be loading JavaScript files across your entire WordPress site when they’re only being used in a few places. By removing unused JavaScript and CSS, you will essentially be trimming their files sizes which reduces their execution time.
This is typically done using asset unloading plugins like Asset CleanUp or Perfmatters (I wrote a comparison of the two, but I personally use Perfmatters).
Depending on which plugin you choose, enable test mode in Asset CleanUp or the script manager in Perfmatters.
Next, edit a page or post, view the JavaScript and CSS files loaded on the page, and disable all the files that are not being used. For example, if your social sharing plugin is loading on pages but it’s only being used on your blog, disable your social sharing plugin “everywhere but posts.”
Examples:
- Disable slider plugins everywhere but pages that use sliders.
- Disable contact form plugin everywhere but pages with forms.
- Disable plugins that are only on the blog “everywhere but posts.”
- Disable page builder features if you’re not using it (see image below).
3. Optimize Third-Party JavaScript
Third-party code can also cause long JavaScript execution times in WordPress.
Open your “third-party code” report in PageSpeed Insights and look at each third-party domain’s transfer size and blocking time.
Host Third-Party Code Locally On Your Server – Google Fonts, Google Analytics, and Google Tag Manager can all be hosted locally using plugins like OMGF or Flying Analytics. Once Google Fonts are hosted locally, you can further optimize your fonts by preloading them, using font-display:swap, combining fonts files, and setting a longer cache expiration (e.g. 180 days or 6 months) so you can the serve static assets with an efficient cache policy item. Once Google Analytics is hosted locally, you also set a longer cache expiration, use a smaller tracking code size, and disable remarketing/advertising features to prevent a second request to DoubleClick.
Prefetch And Preconnect Third-Party Domains – for third-party code you’re not able to host locally, consider using prefetch and preconnect to establish an early connection to their domains. See this list of common domains to prefetch. You can add prefetching by adding the prefetch code manually in your header or by using plugins like WP Rocket and Perfmatters.
Lazy Load Videos And Replace Iframe With A Preview Image – lazy loading videos, iframes, and replacing the iframe with a preview image can help optimize embedded videos, maps, and other iframes. WP Rocket, WP YouTube Lyte, and other lazy loading plugins will let you do this.
Limit Third-Party JavaScript – don’t go crazy with third-party code. Each one requires more JavaScript that is added to your WordPress site and will slow down JavaScript execution time.
4. Minify JavaScript And CSS
Minifying JavaScript and CSS files is typically done through your cache plugin, Cloudflare, or another CDN. It strips unnecessary characters in your code.
If minifying files breaks your site, you’ll need to find the problematic JavaScript or CSS files (in your source code) and exclude them from minification.
5. Defer JavaScript
Deferring JavaScript eliminates render-blocking resources while reducing JavaScript execution time.
Autoptimize and Async JavaScript usually do a better job at deferring JavaScript than cache plugins, since these were specifically designed to handle JavaScript and CSS. The Autoptimize default settings are usually fine. In Async JavaScript, you will simply tick “enable async JavaScript” then click “apply defer.” Since Autoptimize handles CSS and JavaScript minification when you click “optimize CSS and JavaScript,” these should be disabled in your cache plugin.
6. Delay JavaScript
Delaying JavaScript is typically done with third-party domains. WP Rocket and Flying Scripts let you delay non-critical JavaScript which can reduce JavaScript execution time. WP Rocket has a list of common JavaScript files to delay. You should also consider delaying your comments (I delayed wpDiscuz and Gravatars) as well as //cdnjs.cloudflare.com if you’re using Cloudflare.
7. Use GZIP Or Brotli
Compressing your data with GZIP or Brotli can also reduce JavaScript execution time. Brotli offers better compression than GZIP and is supported by Cloudflare, some WordPress hosts.
8. Enable Improved Asset Loading In Elementor
If using Elementor, Improved Asset Loading only loads elements where they are 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 written to speed up Elementor.
Retest Your JavaScript Execution Time
Run your site through Lighthouse or PageSpeed Insights and check your JavaScript execution time. Hopefully the tips in this tutorial helped you get it to 100%. If you want to see how I did it, I have a tutorial on nearly every recommendation in PageSpeed Insights including things like cumulative layout shift, first contentful paint, and of course, my main WordPress speed guide.
Frequently Asked Questions
How do I reduce JavaScript execution time in WordPress?
View your heaviest JavaScript files and learn where they’re coming from. If hosted on your server, you can defer, delay, minify, and remove unused JavaScript. Some third-party JavaScript can be hosted locally which lets you optimize it better.
How do I reduce JavaScript execution time using WP Rocket?
Enable load JavaScript deferred, minify JavaScript, and combine it. Try delaying non-critical JavaScript and prefetching third-party domains to reduce JavaScript execution time using WP Rocket.
How do I reduce JavaScript execution time using .htaccess?
Adding GZIP compression in your .htaccess file can reduce JavaScript execution time by compressing assets.
Hope this helped! Drop me a comment if you have any questions.
Cheers,
Tom
Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-31 03:40:34.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.