How To Reduce Impact Of Third-Party Code In WordPress (Google Fonts, Analytics, Maps, YouTube Videos, Gravatars, Facebook Pixel)

Need to optimize third-party code?

To reduce impact of third-party code in WordPress, try hosting things locally (Google Fonts, Analytics, Gravatars, and Facebook Pixel). For all third-party code that can’t be hosted locally, you can optimize them with lazy loading, delaying their JavaScript, and browser resources hints like prefetch and preconnect which will establish early connections to the third-party domains.

Many cache plugins like WP Rocket have options to optimize third-party code with add-ons, delaying JavaScript execution, prefetch, and automatic preconnecting to Google Fonts and CDNs URLs. Otherwise, you can use plugins like OMGF, Perfmatters, CAOS Analytics, local avatar plugins, and Pre* Party Resource Hints which can all help you optimize third-party code.

What Is Third-Party Code?
Third-party code is anything on your website that creates a request from an external website. These requests usually take much longer than self-hosted files and can slow down your website.

 

1. Find Slow Third-Party Code

Run your WordPress site through Google PageSpeed Insights and view your report. The main items you want to look for are: reduce the impact of third-party code, preconnect to required origins, and efficiently load third-party JavaScript. All have an impact on your third-party code.

Luke from Bluehost also created a great list of common third-party codes on GitHub.

 

2. Lazy Load YouTube Videos

Embedded videos pull large requests from YouTube.

//youtube.com

To fix this, lazy load videos and iframes, then replace the YouTube iframe with a preview image. This makes it so the video is only loaded once someone scrolls down and clicks the play button. These optimizations be done in WP Rocket, WP YouTube Lyte, Perfmatters, and other plugins.

If you’re using Elementor, Adam from WPCrafter posted a YouTube video where he found a clever way to embed YouTube videos without creating any third-party requests to YouTube.

 

3. Host Google Fonts Locally

Google Fonts and Font Awesome are third-party services that slow down WordPress.

//fonts.googleapis.com
//fonts.gstatic.com

Besides being minimal with the number of fonts and weights, you should also try hosting fonts locally. You can do this using Self-Hosted Google Fonts, OMGF, or Perfmatters/Asset CleanUp.

But the best way to host Google Fonts locally is to download them directly from the Google Fonts website, convert them to web font files using Transfonter, then add them to your CSS.

Step 1: Download only necessary fonts/weights from the Google Fonts website.

Step 2: Convert them to web font files using Transfonter.

Step 3: Upload web font files to wp-content/uploads.

Example:

• https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
• https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
• https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
• https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Step 4: Add custom fonts to your CSS.

Default URLs in stylesheet.css:

src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');

Change these to:

src: url('https://yourwebsite.com/wp-content/uploads/fonts/Roboto-
Regular.woff2') format('woff2'),
url('https://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular
.woff') format('woff');

Step 5: Test your fonts in the WordPress text editor.

<h2>Testing</h2>
<h2 class="roboto_font"> Custom Font Test </h2>
<h2 class="roboto_bold_font"> Custom Font Test </h2>

Elementor has an option to host fonts locally and preload them in the Theme Customizer.

 

4. Host Google Analytics Locally

If you see the leverage browser caching issue, hosting your Google Analytics tracking code locally will fix this. You can use WP Rocket’s Google Tracking, CAOS Analytics, or Perfmatters.

//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com

 

5. Host Facebook Pixel Locally

WP Rocket’s Facebook Pixel add-on lets you host Facebook Pixel locally with 1-click.

This is the only way to optimize Facebook Pixel to my knowledge, which lets you track who is coming to your website and follow up with them using Facebook Ads, among other features.

//pixel.wp.com

 

6. Host Gravatars Locally

If you have lots of blog comments, Gravatars create third-party requests.

//s.gravatar.com
//0.gravatar.com
//2.gravatar.com
//1.gravatar.com

The best way to prevent Gravatar requests is by hosting them locally using a local avatar plugin. You can upload custom images to be used for avatars in your blog comments. Depending on the plugin, you will usually upload a custom, optimized image in the WordPress discussion settings.

 

7. Delay Third-Party JavaScript

Comments, Google Ads, and other third-party code can be delayed especially if it appears below the fold and doesn’t need to load immediately. Delaying them can significantly improve initial load times. I did this with comments (wpDiscuz and Gravatars) which shaved multiple seconds off my blog. Between delaying comments and local Gravatars, your comments will fly.

addtoany
cookie-law-info
apps.elfsight.com/p/platform.js
xfbml.customerchat.js
fbevents.js 
fbq(
/busting/facebook-tracking/
/sdk.js#xfbml
feedbackcompany.com/includes/widgets/feedback-company-widget.min.js
ft.sdk.min.js
getbutton.io
adsbygoogle.js
google-analytics.com/analytics.js
ga( ' 
ga('
/gtag/js 
gtag(
/gtm.js
/gtm-
translate.google.com/translate_a/element.js
static.hotjar.com/c/hotjar-
static.leadpages.net/leadbars/current/embed.js
snap.licdn.com/li.lms-analytics/insight.min.js
livechatinc.com/tracking.js
LiveChatWidget
widget.manychat.com
olark
//a.omappapi.com/app/js/api.min.js
pinit.js
pixel-caffeine/build/frontend.js
shareaholic
ShopifyBuy
sharethis
simple-share-buttons-adder
smartsuppchat.com/loader.js
Tawk_API
widget.trustpilot.com/bootstrap
static.ads-twitter.com/uwt.js
twq(
platform.twitter.com/widgets.js
wpdiscuz

WP Rocket, Flying Scripts, and Perfmatters all have the option to delay JavaScript.

If using Disqus, try the Disqus Conditional Load plugin for lazy loading and script disabling.

 

8. Defer Parsing Of JavaScript

Defer parsing of JavaScript tells browsers to wait to download JavaScript until after everything else is downloaded.

If you’re using WP Rocket, enable Load JavaScript Deferred in the File Optimization tab:

If your cache plugin doesn’t support this, you can use the Async JavaScript plugin:

 

9. Prefetch Or Preconnect Third-Party Scripts

Prefetch and preconnect can both be used to load third-party code faster.

Prefetching tells browser to establish an early connection to an external resource, while preconnecting tells browsers to download anticipated files the user may request. The Perfmatters and Pre* Party plugins support both, while WP Rocket only supports prefetch.

Step 1: Copy all external hostnames you use on your website (find them in your Lighthouse or Chrome Dev Tools report, otherwise here’s a list of common domains to prefetch from Github.

Step 2: Add them to a plugin that does prefetching (WP Rocket, Perfmatters, Pre* Party).

Step 3: Add your CDN URL and external font source (e.g. https://fonts.gstatic.com or //fonts.googleapis.com) to a plugin that does preconnecting, like Perfmatters or Pre* Party.

 

10. Avoid Google AdSense And Google Maps

Google AdSense is one of the most difficult external resources to optimize, and I recommend affiliate marketing instead since it doesn’t slow down your site, plus it’s more profitable and more personal. I usually hit 130k+/year with affiliate marketing so be sure to read that guide.

A gold product expert says:

Kinsta says:

Cloudflare Railgun is another option to optimize AdSense since it speeds up dynamic content.

Google Maps – the image below looks good, right?

Instead of embedding a Map, use an image with a link to driving directions.

If you do embeds, only use the Google Map on pages where you need them (contact page and those targeting a physical location). Never in your footer, widgets, or areas appearing sitewide.

 

11. Don’t Overtrack In Google Tag Manager

Some will argue that Google Tag Manager can actually speed up your website, since it takes all the Javascript on your site and replaces it with one single script, which is triggered from GTM.

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, in which case GTM may speed it up.

Avoiding common pitfalls and not using too many tags can help, but I don’t use GTM. In fact, I’ve honestly never tried  it. But I do know that I’ve seen it in a lot of poor GTmetrix reports.

I also recommend the Google Tag Manager For WordPress plugin which only launches the required tags for each page (speeding up load times of GTM) and makes the code easy to add.

 

12. Replace Embeds With Screenshots

Embedded posts (Tweets, FB posts, etc) can be replaced by screenshots.

This takes some time, but you can actually make these look really nice. Since these are images and don’t have to pull information from Twitter, they load much faster rather than embedding.

 
How I Did It
On my blog, I used a 2 column layout and measured each column to be 340 pixels (width). Next, I used the Zoom Chrome Extension combined with Awesome Screenshot to learn what zoom % I needed to get a good screenshot of the Tweet. I took screenshots of each Tweet, then cropped them to be exactly 340 pixels. Next, I compared all the screenshots to see which ones had a similar height, then cropped or manipulated them so two screenshots had the same height. When you have 2 Tweets with the same width/height, they look great side-by-side in columns.

And yes, I recommend Cloudways for hosting.

 

13. Use A Lightweight Social Sharing Plugin

Social sharing buttons have to pull share counts from Facebook, Twitter, etc.

I recommend the Grow By Mediavine plugin which was rated the #1 fastest social sharing plugin by WP Rocket. I also tested it on my own site and it only added 1 small request (I’m a speed freak, so that was still too much). But the plugin is definitely lightweight and looks nice.

//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com

 

14. Use Cloudflare Workers

Workers is a JavaScript execution environment that allows developers to augment existing applications or create new ones without configuring or maintaining infrastructure. Pricing is $5/month + usage (first 10 million Worker-powered requests are free, then $.50 per million requests). Workers can be configured to run specific pages, subdomains, etc. Test it out here.

 

How Is Your GTmetrix Report Now?

Originally, the third-party code slowing down my WordPress site were Google Fonts, Google Analytics, embedded YouTube videos, embedded Tweets, and I had some problems configuring StackPath’s CDN. But once I implemented the steps in this post (and sacrificed a plugin or two), my WordPress site usually loads ridiculously fast. Click through my site to see for yourself!

Cheers,
Tom