How to Reduce the Impact of Third-party Code in Wordpress

December 26, 2023

Boost your website speed & performance.

Lighthouse flags pages that have third-party code that blocks the main thread for 250 ms or longer.

To reduce the impact of third-party code in Wordpress, you can delay, run async or defer. The solution may depend on whether you consider the code essential and if it can run delayed/deferred.

You may also change 3rd-party iframes to javascript or static solutions for a better loading experience unless the iframe is below-the-fold, in this case, you should lazyload it.

One of the modern solutions is running your third-party code in a web worker to offload the main thread, but this approach isn’t fully compatible with Wordpress yet.

Use async or defer attribute

defer and asyc — render-blocking, async, and defer

What defines the order of a javascript loading is its importance.

If it’s a marketing plugin that needs to have its metrics right and is critical, run it async, such as running a valuable Facebook ad campaign, in this case, run Facebook JS async.

Run with the defer attribute when it needs to load after the initial load such as Google Analytics. Delay it when it’s used for collecting non-essential metrics.

Add the async or defer attribute to the javascript accordingly. Use Wp Rocket to achieve both defer or delay js automatically.

Delay JS

Delaying Javascript until user interaction is done to make sure the entire website interactive part loads without any obstruction for non-essential javascript or plugins.

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