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 and preconnet, 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.
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.
Reducing The Impact Of Third-Party Code
- Find Third-Party-Code In WordPress
- Lazy Load YouTube Videos
- Host Google Fonts Locally
- Host Google Analytics Locally
- Host Facebook Pixel Locally
- Host Gravatars Locally
- Delay Third-Party JavaScript
- Defer Parsing Of JavaScript
- Prefetch And Preconnect Third-Party Scripts
- Avoid Google AdSense And Maps
- Don’t Overtrack In Google Tag Manager
- Disable WooCommerce Scripts, Styles, Cart Fragments
- Replace Embeds With Screenshots
- Use A Lightweight Social Sharing Plugin
- Leverage Cloudflare Workers
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.
You can also find these in the Reduce DNS Lookups section of GTmetrix YSlow:
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>
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).
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 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.
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.
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 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:
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:
“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.
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. 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.
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.
Option 2: Asset CleanUp
Selectively disable WooCommerce functions on pages where they don’t need to be loaded.
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.
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
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?
I’ll take a 1.7s load time on a 6.28MB page with 196 requests any day.
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!
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
