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

pattern 21

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 run the code in an async or defer manner. The solution may depend on whether you consider the code essential and if it can run 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.

You could use techniques such as delaying javascript until user interaction and others, but this would only fool Pagessped and the issue, as the issue will still exist, but will be postponed to load after user interaction.

The Delay javascript feature was specifically created to trick Pagespeed.

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.

Add the async or defer attribute to the javascript accordingly. Use Wp Rocket to achieve defer loading.

image 4 e1716411672176

Change iframes to JS or static

If you’re using an essential 3rd-party iframe above the fold, consider running a static or javascript version of it.

Use youtube Lyte instead of youtube iframe. Use Lite Vimeo for Vimeo. Use Google Maps static(non-interactive) or javascript(interactive) maps.

Get your Core Web Vitals optimized. Send a request

🚀Boost your website Speed & Performance

*No spams

guest

0 Comments
Inline Feedbacks
View all comments