Top 6 ways to reduce javascript execution time in Wordpress

Boost your website speed & performance.

*No spams

Learn how to reduce your javascript execution time and improve Pagespeed. Javascript exec. time is what the name already says. It’s the time js takes to do the parsing, compiling, and executing functions, calls, etc.

How to identify large Javascript execution time in Wordpress

Do a Core Web Vitals test using Webpagetest.org, click “Total Blocking Time” and identify the javascript files with large execution time.

image 3

Using Pagespeed

Do a test using Pagespeed, and identify the files containing the errors.

image 2

After identifying the errors, apply the following steps to reduce the javascript execution time on Wordpress.

Delay non-essential javascript 

Flying Scripts is a free, tested, and up-to-date plugin that lets you load javascript after user interaction. Install it on Wordpress and place the keyword you’d want to delay the javascript plugin.

Hot to remove unused javascript using a free plugin

To find the keyword you can either use the asset name or use Chrome Dev Tools; click F12 on Chrome, click the “Network” tab, and hover over “Initiator” to see which file triggered the asset loading:

How to find unused javascript using a Chrome Dev Tools
Analytics.js was initiated by www.googletagmanager.com/gtag, we can use the gtag keyword to delay analytics.js

Place the domain keyword on Flying Scripts.

Consider hosting non-essential 3rd party javascript locally on your website, and then delay it.

Delay using WP Rocket

Wp Rocket updated its logic for delaying javascript, it now delays all javascript, including inline scripts, and has a default list of exclusions(alongside the internal js exclusion list).

Delaying any 3rd party plugins will also fix the Pagespeed “Reduce the impact of third-party” warning.

The textbox now is for placing the javascript you want to be excluded from. Use it to place essential javascript that cannot be lazy-loaded:

Delay Javascript Execution Wp Rocket

The following formulas will be included by default on WP Rocket and exclude essential Javascript to avoid errors:

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

The reason behind this formula is as follows:

  • (?:wp-content|wp-includes)(.) – excludes all internal javascript files
  • /jquery-?[0-9.](.min|.slim|.slim.min)?.js – excludes jQuery
  • js-(before|after) – exclude inline scripts. Only inline scripts that are added using wp_add_inline_script() will be excluded.

Apply code-splitting

If you have a Wordpress website app and use Javascript on your stack, apply code-splitting, dividing JavaScript into smaller chunks, which allows for smarter loading of the different components.

Read here how Instagram improved their feed page load time in 50% using code size, execution optimizations and other techniques.

Switch to better plugins

Switch to plugins with the same functionality but with smaller sizes, and smaller javascript payloads.

  • Consider Novashare instead of Social Warfare.
  • Consider Crisp instead of heavy javascript chat plugins. Check this article on comparing chat plugin speed.

Remove Recaptcha and use bot fighting, or delay Recaptcha Javascript

Consider using a smaller captcha such as math challenges, instead of Recaptcha. Set up Cloudflare and enable bot/email protection if it suits your spam/bot fighting.

You also can delay ReCaptcha until user interaction to reduce js exec time, but it needs testing, as smart bots may bypass it.

Ask the developer to improve the plugin

If you need a plugin but are having javascript issues, ask the developer to enable deactivating unused functions on the frontend.

Get your WordPress Core Web Vitals optimized and your pages faster!

guest

0 Comments
Inline Feedbacks
View all comments