Need to 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
- 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
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.
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.
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.
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
//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.
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.
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
If using Disqus, try the Disqus Conditional Load plugin for lazy loading and script disabling.
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?”
“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
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
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!