Third-Party requests are the hardest thing to deal with while optimizing WordPress sites. One of the obvious solutions is to remove unnecessary scripts/plugins that make third-party requests

But, if removing plugins is not the solution you want, let’s discuss

What are third-party requests?

Third-Party requests are basically files like CSS, JS, image, fonts that are downloaded from external websites. If your website is example.com and in your site, it downloads a script from facebook.com then that’s a third-party request

Find & analyze third-party requests in WordPress

Before optimizing anything, let’s figure out what are third-party requests are our WordPress site making.

Using Pingdom

Goto https://tools.pingdom.com and analyze your site.

Here is a sample result after analyzing one of site MFY.im

third party requests

Any requests other than mfy.im and assets.mfy.im (it’s our CDN) are third-party requests or external requests. As you can see in the above site around 30% of the requests (by size) are external

Using Webpagetest.org

Goto https://www.webpagetest.org/ and test your site

Again test your site by blocking all the third party requests and see the difference

Under the Script section, paste the following code and click ‘START TEST’

blockDomainsExcept your-site.com
navigate https://your-site.com/

blockDomainsExcept is the list of domains that are only allowed, thus we eliminate 3rd party resources. navigate is the URL which needs to be tested, our site

How to Choose a Fast Loading WordPress Theme 12

It’s recommended not to have too many third-party requests. Here is why:

Why third-party requests make the website slow?

There are multiple reasons which make third-party make our WordPress sites load slow

Extra DNS Lookups & Latency

dns lookups

For every new resource from a new domain, the browser needs to make DNS lookup, SSL handshake, Connection etc. In the above example connecting to Google for loading fonts alone took about 300 milliseconds. If they don’t support CDN, it may be even worse!

Consider having 5 such third-party domains. Your browsers need 300ms x 5 = 1.5seconds

Browser Cache

Since they are external sites, we don’t have any control over the browser cache. It’s recommended to have a cache period for at least 30 days. But of these third-party requests have a cache period of fewer than 2 hours. So we’re leveraging browser cache

pagespeed insights warning

How to speed up third-party requests?

There are multiple ways to speed up. One solution won’t fit for all

Preconnect

Preconnect is the way you tell the browser that you’re going to connect to a domain soon. So start DNS lookups, SSL, TCP handshake etc

<!-- E.g.: Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

<!-- E.g.: Facebook SDK -->
<link rel="preconnect" href="https://connect.facebook.com" crossorigin>

Add this code to the <head>section in your WordPress site. You can do it via editing header.php or using plugins

Add all the domains that you’ve found while analyzing through https://tools.pingdom.com.

Prefetch

Prefetch is a similar technique to preconnect. While Preconnect is to connect to a domain, prefetch is to download the resource

For example in the case of Google Analytics, we’re sure that browser is going to download https://google-analytics.com/analytics.js. In such cases, you can enter the full URL into ‘prefetch’

<!--- Google Analytics Script -->
<link rel="prefetch" href="https://google-analytics.com/analytics.js" crossorigin>

Host Locally

Preconnect and Prefetch can save some good time. However, it’s always best to reduce the no. of HTTP requests. By hosting these third-party requests locally, we can take advantage of minifying, bundling, and browser cache

Download the corresponding file and upload it to your WordPress Media. Copy the URL and add it to the footer section or header with async/defer

<script defer src="//your-domain/xxx/xx/google-analytics.js"></script>

Here is a minified version for Google Analytics which is inlined. There are also plugins for Google Fonts that will download and host them locally

Defer or Load Asynchronously

“Hey Browser, I need this file, just download it when you become free”

If the third-party request has low priority and shouldn’t block other resources/rendering, you can load them asynchronously

Here is how you can load Google Ads asynchronously:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Instead of async, you can also use defer

Async vs Defer

No Async/Defer – HTML rendering is blocked until the script is downloaded and executed

Async – Downloading script will not block rendering HTML. But parsing script after download will block HTML rendering

Defer (recommended) – Script will be downloaded without blocking HTML rendering. Parsing will be done after HTML is completely rendered

async vs defer

Conditional Load

You can lazy load third-party scripts so that they’ll be loaded only after the user has scrolled up to a point

A good example is with Disqus comments. With Disqus Conditional Load plugin you’re loading when the user reaches the bottom of the post

Not every plugin will have such lazy load option or plugin for it. If you’re a developer implementing it yourself won’t be that difficult

Conclusion

As I said before, one solution won’t fit all. Compare each and check whether your third-party requested can be optimized

Comment below if you’ve any queries or feedback. I read and reply back to each of them within 12 hours!

You May Also Like