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

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.

 

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 Rocket – delay 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.

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

FlyingPress – load 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.

Perfmatters – delay 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).

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

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

 

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.

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:

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.

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.

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.

 

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.

• 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).

 

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.

 

7. Lazy Load Iframes And Optimize Videos

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

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).

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.

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.

 

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.

 

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.

 

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');

 

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.

 

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.

 

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.

 

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">

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.

 

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