How to Minimize Main Thread Work in Wordpress

The minimize main thread work is diagnosed by Pagespeed(Lighthouse) as bad when the main thread works process for longer than 4 seconds during the load.

The thread work can be done either by HTML, CSS, or JS, to turn code into your page.

The main difference between this diagnostic and “reduce javascript execution time”, is that the latter only applies to Javascript.

To solve this diagnostic, it depends on what asset is causing the issues. If it’s 3rd-party, it means your need to optimize it or delay until-user interaction if the plugin is non-essential.

If the code is from your website, it’s probably essential and you need to optimize it. If it’s non-essential, defer or delay it until user interaction.

Due to how Wordpress works, with plugins, there still might be a chance that the code from your website is non-essential. Test your website with delayed Javascript to find out.

Use Wp Meteor or Wp Rocket to solve this issue by delaying or deferring. 

If you want to optimize code, find better ways to load including many popular scripts such as analytics, loading a leaner version of it.

Identify what causes larger main thread work

Webpagetest allows having a clear vision of what javascript execution happens in the main thread work of your website page. Do a test and visualize the pink line:

After finding what causes the issues, let’s move on to how to fix them.

Remove iframes for script

Iframe elements cannot be changed in the way they load. Consider using a script instead of an iframe. Iframes are also considered bad practice because of security concerns.

Google Maps offers static(non-interactive) and javascript(interactive) maps besides iframes. Both require API keys, and the Javascript interactive maps may require advanced HTML/CSS/JS knowledge. These two may be delayed or deferred to improve the main thread work.

Use Youtube Lite embed(needs an API) to lazy load youtube videos. Youtube Lite loads 224× faster than the iframe element. Use the YT Lyte plugin for Wordpress. Use Lite Vimeo for Vimeo videos.

Delay non-essential javascript plugin with large main thread work

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 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 the 3rd party heavy javascript locally on your website, and then delay it if delaying inst supported.

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). Wp Rocket also has more Core Web Vitals & Pagespeed features for large websites.

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.

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.