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

Need to optimize third-party code in WordPress?

To reduce the impact of third-party code, try hosting fonts and Google Analytics locally while utilizing lazy load, prefetch, preconnect, and delaying loading JavaScript (such as comments).

If using WP Rocket, take advantage of the Google Analytics and Facebook Pixel add-on as well as DNS prefetching, and delay JavaScript execution option. OMGF can help serve fonts locally.

Reduce Impact Of Third Party Code WordPress

What Is Third-Party Code?
Third-party code is anything on your WordPress site that creates a request from an external website. Common examples include Google Fonts, Analytics, Tag Manager, Maps, AdSense, embedded YouTube videos, Gravatars, comment or heatmap plugins, and WooCommerce. These may cause errors in Google PageSpeed Insights and in GTmetrix’s reduce DNS lookups.

 

1. Find Third-Party Code In WordPress

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.

Third Party Usage

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.

Lazy-Load-YouTube-Videos

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.

Elementor Video

 

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.

Transfonter-Google-Font-Conversion

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>

Once your fonts are hosted locally from your domain or CDN, preload them for even faster load times. Copy your font files from GTmetrix Waterfall and paste them into a plugin that does preloading (WP Rocket, Perfmatters, or Pre* Party Resource Hints).

GTmetrix Font Files

Preload Fonts

 

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

Leverage-Brower-Caching-Google-Analytics

 

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

Facebook Pixel Browser Caching

 

6. Host Gravatars Locally

If you have lots of blog comments, Gravatars can create many 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 with the WP User Avatar plugin. This lets you upload a custom local image to be used for every Gravatar (instead of loading every commenter’s individual Gravatar). So instead of loading 1 third-party request per Gravatar, you’re loading 1 local request for all Gravatars. Simply upload a custom, optimized image in your WordPress discussion settings. You can see an example in my comments section.

WP User Avatar

 

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.

//disqus.com
//sitename.disqus.com

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

Delay-JavaScript-Execution

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:

Load JavaScript Deferred

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

Async JavaScript

 

9. Prefetch And 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 GTmetrix under “Reduce DNS Lookups”), otherwise here’s a list of common domains to prefetch from Github:

Prefetch-DNS-Requests-WP-Rocket

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

Prefetch-DNS-Requests

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.

Preconnect-Third-Party-Services

 

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:

“There are usually things that can be improved which is under your control, but ultimately, it’s a decision on a trade-off: does monetization make up for loss in speed?”

Kinsta says:

“This is why unless your income model revolves around 3rd-party advertisements, don’t put them on your WordPress site.”

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

Cloudflare Railgun

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.

Google Map

 

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.

Google Tag Manager Speed

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. Disable WooCommerce Scripts, Styles, Cart Fragments

All WooCommerce sites come with extra scripts, styles, and cart fragments.

These load across your entire website – even on non-WooCommerce pages. Cart fragments alone can take up to 10 seconds to load. On top of the 3 WooCommerce stylesheets and multiple scripts generated by WooCommerce (and the fact that WooCommerce sites usually requires more plugins), it’s no wonder most of these sites typically have slow page load times.

WooCommerce Cart Fragments

Option 1: Perfmatters
Kinsta’s Perfmatters plugin lets you disable all these in 1-click, plus has many other features to optimize your site like disabling unnecessary WordPress functions. I use it on my own website.

perfmatters woocommerce optimization

Option 2: Asset CleanUp
Selectively disable WooCommerce functions on pages where they don’t need to be loaded.

Asset CleanUp WooCommerce

Option 3: Use Code From Github
Disable WooCommerce Scripts: add this code functions.php:

Disable WooCommerce Styles: see WooCommerce’s tutorial.

Disable WooCommerce Cart Fragments: add this code to funtions.php:

 

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

Cloudways Response Times

Cloudways Google PageSpeed

Hosting-Recommendation

Moving-From-WPX

Untitled

Godaddy DigitalOcean Migration

Elementor-Hosting

Web-Hosting-France

 
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.

 

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

Social Sharing Plugin Requests

 

15. Leverage 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.


These will usually appear in the Reduce DNS Lookups section in the GTmetrix YSlow tab. Some of the most common third party scripts are Google Fonts, Analytics, Maps, AdSense, Google Tag Manager, social media requests, embedded YouTube videos, and Gravatars.

 

Frequently Asked Questions

What is third-party code?

Third-party code is anything on your website that pulls a resource from an external website. Common examples are external fonts, YouTube embeds, AdSense, and tracking codes.

How do I find which third party scripts slow down my site?

Check your PageSpeed Insights report or the Reduce DNS Lookups section of GTmetrix YSlow.

How do you minimize third-party code?

Lazy loading videos and comments, hosting font and analytics locally, and using browser resource hints will also help minimize third-party code.

Will serving assets locally improve scores?

Yes, hosting external fonts, analytics, and Facebook Pixel locally will prevent third-party requests.

Can you lazy load third-party code?

Yes, you can lazy loading YouTube videos and comments which should prevent third-party requests from YouTube, Gravatars, and requests from your comment plugin.

 

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!

GTmetrix Report - OMM
For how long this post is with tons of images/comments, it still loads in .8s

The main thing holding this specific post back from 100% scores are those embedded Github codes. But hey, you can’t always be perfect, and at least I have Github as a domain to prefetch.

Need help?

Leave me a comment :)

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
7 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments