16 Ways To Reduce Impact Of Third-Party Code In WordPress (AKA External Domains)

Reduce impact of third party code wordpress

Third-party code is anything on your website that pulls data from an external domain.

It can be Google Fonts, Google Analytics with Doubleclick, Tag Manager, YouTube from embedded videos, Gravatars from comments, social media domains from social sharing plugins, or even small JavaScript files added by New Relic and Cloudflare email obfuscation.

How do you optimize them?

Some third-party code can be hosted locally such as fonts, Google Analytics, and comment avatars. The rest of your third-party code can usually be delayed with your cache plugin, Perfmatters, or FlyingScripts. If third-party code can’t be hosted locally or delayed, you can establish an early connection to the domain using a prefetch or preconnect resource hint.

There are also “miscellaneous” ways to optimize third-party code in WordPress. For example, using a smaller analytics-minimal.js Google Analytics tracking code, replacing YouTube iframes with a preview image to avoid requests from the YouTube player, or simply disabling New Relic + email obfuscation if you’re not using them in Cloudflare or your hosting account. Easy peasy?

Also consider how many tracking tools you’re using: Analytics, Tag Manager, Facebook Pixel, Heatmaps, and other tracking apps add third-party JavaScript. While this guide should help, reconsider how much tracking you need. Believe it or not, the only thing I use is Search Console.

Use it or lose it!

 

1. Find Third-Party Domains Loading On Your Site

Use PageSpeed Insights or Chrome Dev Tools to see all third-party domains loading on your site. It should be self-explanatory where they’re from, otherwise a Google search will tell you.

Reduce impact of third party code wordpress

Third party code chrome dev tools
Third-party domains can also be found in Chrome Dev Tools → Sources → Page

 

2. Delay Their JavaScript

Delaying JavaScript is one of the easiest and most effective ways to reduce third-party code. This is different depending on which cache plugin you’re using. If your cache plugin doesn’t support this (SiteGround Optimizer doesn’t), you can use either Perfmatters or Flying Scripts.

WP Rocketdelay JavaScript execution automatically delays it until user interaction (scrolling down the page, moving the mouse over the page, or even touching the screen on mobile). There may be additional third-party JavaScript not automatically delayed by WP Rocket, in which case you can use Flying Scripts or Perfmatters to add additional files. Just enable it for the most part.

Wp rocket delay javascript execution

LiteSpeed Cacheload JS deferred is very similar to WP Rocket’s and is automatic as well.

FlyingPressload scripts on user interaction lets you manually add JavaScript files and the documentation shows examples of how to delay JavaScript from specific plugins and themes.

Perfmattersdelay JavaScript lets you manually add JavaScript files while setting a timeout period which is the number of seconds users will wait until the JavaScript is loaded (I suggest about 5s since scores may not improve if the timeout is too low). They also have an option to “delay all,” but manually gives you better control. Perfmatters lists several examples in their documentation including the option to delay a smaller Google Analytics tracking code (step 5).

Perfmatters delay javascript

Flying Scripts – similar to Perfmatters where you’ll manually add files and set a timeout period.

Flying scripts

List of common JavaScript files to delay – blow is a list of common JS files you can usually delay. Just make sure you check your plugin’s documentation since they usually list examples.

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name

Delaying Plugins – you should also consider delaying social sharing, comment, and other plugins that load heavy JavaScript files (including Gravatars). Check which third-party domains or plugins load JavaScript below the fold and consider delaying those.

 

3. Host Fonts + Analytics Locally

Fonts are usually some of the largest files on a WordPress site. Even when installing a fresh starter template or premade layout, their size is almost always larger than CSS/JavaScript.

Fastest wordpress themes

Instead of pulling fonts from Google Fonts (fonts.gstatic.com) or Font Awesome (use.fontawesome.com), you can host them locally on your server which looks like this:

Self hosted vs third party fonts

Many plugins have an option to host fonts locally including Perfmatters, FlyingPress (optimize Google Fonts), and LiteSpeed Cache (localize resources). You can also use dedicated tools like OMGF or Transfonter. And if you’re using Elementor, you’ll find the option to load Google Fonts locally and preload them under Theme Customizer → Performance. Depends what you’re using.

Elementor host google fonts locally preload

Once fonts are hosted locally, there are other ways to optimize them: preloading fonts, using WOFF or WOFF2 formats (not TTF), serving fonts from a CDN, and limiting the number of font families, weights, and font icons. Preconnect should only be used when fonts are loaded from third-party domains (fonts.gstatic.com) in which case the crossorigin attribute should be used. Elementor Experiments + Divi’s performance settings also have options to optimize your fonts.

Disable elementor icons css
You can disable Elementor icons in Perfmatters or manually if you don’t use them

Google Analytics can also be hosted locally using Perfmatters, CAOS Analytics, and other plugins. I suggest Perfmatters since it can also use a smaller tracking code, delay it, disable display features to prevent requests to DoubleClick, and anonymize IPs for GDPR compliance.

Perfmatters analytics settings

 

4. Use A Smaller Google Analytics Tracking Code

If you use Google Analytics but aren’t using reports like demographics or interests, a smaller tracking code can save 50KBs. View the Perfmatters documentation to learn what each tracks (or doesn’t) and select a “script type” in the screenshot above. CAOS/Flying Analytics do it too.

Google analytics script type

  • minimal: 1.5 KB
  • analytics.js: 18.4 KB
  • gtag.js: 39.3 KB
  • gtag.js v4: 51.5 KB

 

5. Disable Google Analytics Remarketing And Advertising

This prevents a 2nd request to DoubleClick.

You can disable it in your Google Analytics account or Perfmatters (Disable Display Features).

Disable google analytics remarketing

 

6. Use Local Avatars

If you get comments on your blog, Gravatars can create a lot of third-party requests.

I recommend using a local avatar plugin like Simple Local Avatars (not WP User Avatar anymore). Make sure you upload avatars with correct dimensions and optimize the image. Gravatars can also be delayed where the domain looks something like this: //0.gravatar.com.

Simple local avatars plugin

 

7. Lazy Load Iframes And Optimize Videos

Videos pull large requests from youtube.com (video player) and i.ytimg.com (thumbnail).

Reduce unused javascript youtube

Lazy loading iframes and replacing YouTube iframes with a preview image is the first thing to do. This can be done in most cache plugins (you can also use Perfmatters or WP YouTube Lyte).

Flyingpress iframe settings

To prevent requests from i.ytimg.com, host YouTube thumbnails locally. This is the self-host YouTube placeholder in the screenshot above (one of many reasons why FlyingPress beats WP Rocket). You can host thumbnails locally with Elementor, but you’ll need to do it manually for each video by saving the thumbnail, uploading it, then setting it in Elementor’s video settings.

Elementor youtube thumbnail

Maps shouldn’t be a big deal since it’s usually only loaded on contact/localized pages. Lazy loading iframes will help, or you can try using a screenshot and linking it to driving directions.

Google map

 

8. Use A Lightweight Social Sharing Plugin

Have a social sharing plugin on your blog or pages? This can create requests to Facebook, Twitter, and other social media platforms.

Step 1 is to use a lightweight social sharing plugin like Grow By Mediavine. The next step is to delay the plugin. For example, in FlyingPress you can add wp-content/plugins/plugin-name under “load scripts on user interaction.” Make sure social sharing buttons are below the fold.

Disable social sharing plugins perfmatters
Check if your social sharing plugin loads on every page using Perfmatters or Asset CleanUp

 

9. Disable Third-Party Code On Specific Pages

Take social sharing plugins for example. If it’s only needed on your blog, you can disable it everywhere but posts. This way, any third-party domains loaded from the plugin are better controlled. You’ll need an asset unloading plugin like Perfmatters or Asset CleanUp to do this.

Disable social sharing plugins perfmatters

 

10. Disable MailChimp On Specific Pages

Just like in step #9, you can also disable MailChimp and email plugins where they don’t need to load. Mailchimp has a filter to only load the MailChimp scripts on certain pages of your website.

function mailchimp_should_add_script_on_this_page() {
    return true;
}

add_filter('mailchimp_add_inline_footer_script', 'mailchimp_should_add_script_on_this_page');

Mailchimp third party code

 

11. Disable New Relic

New Relic is a great tool to monitor website performance and is built-in to most hosting accounts. But it adds a JavaScript file in which case, disable New Relic when you’re done.

Disable new relic

 

12. Disable Cloudflare Email Obfuscation

You’re probably seeing email-decode.min.js if you enabled “optimal settings” for Cloudflare in WP Rocket or it’s enabled in your Cloudflare Scrape Shield settings. Email obfuscation is only used if you list your email on your site and want to protect it from spammers. Disable otherwise.

Cloudflare email obfuscation psi

Cloudflare email address obfuscation

 

13. Avoid Overtracking In Google Tag Manager

Some people argue Google Tag Manager speeds up your website since it combines third-party JavaScript and replaces them with one single script.

But the reality is, Google Tag Manager will probably slow down your site unless you have a large, unoptimized site that uses many third-party scripts. The more scripts you add, the slower Tag Manager is. Which is probably why you’re reading this guide in the first place: overtracking.

This is your website on google tag manager

 

14. Add Prefetch Or Preconnect Resource Hints

Prefetch and preconnect won’t reduce third-party code. Instead, they establish an early connection so third-party code can be loaded faster.

Prefetch should only be used on third-party domains which aren’t already being delayed (explained in step 2). It would be counterintuitive to delay a script while also establishing an early connection. Which means there are only rare cases when you will actually use prefetch.

Here’s a list of common domains to prefetch on GitHub.

<link rel="dns-prefetch" href="https://i.ytimg.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">

Prefetch dns requests

Preconnect should generally only be used for CDN URLs and third-party fonts like fonts.gstatic.com. They should also use the crossorigin attribute. Many cache plugins add preconnect automatically like when you add a CDN URL in the settings, but check your cache plugin’s documentation to see whether preconnect is used. There’s no need to add preconnect if you host fonts locally or are using Cloudflare which proxies traffic instead of using a CDN URL.

<link rel="preconnect" href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

 

15. Offload Third-Party Tools To Cloudflare Zaraz

Cloudflare Zaraz loads third-party tools from the cloud.

You will need to view their documentation because I haven’t gotten the chance to test it out yet.

Cloudflare zaraz

 

16. Replace Embeds With Screenshots

If you find yourself embedding Tweets, Facebook posts, or similar, consider using a screenshot instead of embed code.

This takes some time but you can actually make these look really nice. They’re much faster rather than embed code since they’re only images which don’t create requests to Facebook.

I use the Zoom Chrome Extension + Awesome Screenshot to capture them. Next, I edited each image so width/height are the same. I uploaded them, then added them to a 2 column layout.

Cheers,
Tom

You Might Also Like:

10 Comments...

  1. My website FirstSportz.com is running newspaper theme. Everything is fine except LCP, which is 2.5.

    I am using kinsta webhosting perfmatters

    Reply

Leave a Comment