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.
Reducing The Impact Of Third-Party Code
- Find Slow Third-Party-Code
- 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 Or Preconnect Third-Party Scripts
- Avoid Google AdSense And Maps
- Don’t Overtrack In Google Tag Manager
- Replace Embeds With Screenshots
- Use A Lightweight Social Sharing Plugin
- Use Cloudflare Workers
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>
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).
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:
“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. 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
Not sure why my response time is insanely long…
https://gtmetrix.com/reports/studywsimon.com/UhamJdRA/
Probably related to how LiteSpeed/Cloudflare are setup, but that’s all I can say without more detail.
My website FirstSportz.com is running newspaper theme. Everything is fine except LCP, which is 2.5.
I am using kinsta webhosting + perfmatters
so useful, thank you
I followed all the steps and implemented but it didn’t work
Send your GTmetrix report URL and I’ll have a look.
I also implemented the steps. Still got an F in GTmetrix
Look at your Waterfall chart. Admin-ajax and cart fragments definitely have some issues going on.
Thank you. would have a look