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.
Using Pagespeed
Do a test using Pagespeed, and identify the files containing the errors.
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.
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:
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:
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 Unused CSS Core Web Vitals Optimized!