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
Table of Contents
- What are third-party requests?
- Find & analyze third-party requests in WordPress
- Why third-party requests make the website slow?
- How to speed up third-party requests?
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.
Goto https://tools.pingdom.com and analyze your site.
Here is a sample result after analyzing one of site MFY.im
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
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
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
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
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
How to speed up third-party requests?
There are multiple ways to speed up. One solution won’t fit for all
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 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>
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>
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
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
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!