Optimizing Third Party Scripts - Ways You Can Enhance Their Performance
Many budding web developers loathe third party scripts because of the security and performance issues that they can create. Some people prefer to avoid them altogether. After all, developers don't have any control over the third party scripts they use, right?
In fact, there are a few ways to keep third party scripts from slowing you down. Considering that third party scripts often play a pivotal role in analytics and monetization, all working developers need to know some tricks to help speed them up.
What are third party resources?
Any tool or service on your website that requires communication with an outside server is a third party resource. Common examples include:
- Social media widgets
- Advertising services like Google Adsense
- Analytic tools like Google Analytics
- A/B testing tools
- User comment systems
- Backup and security tools like VaultPress
Common problems with third party scripts
Embedding third party resources requires relinquishing some control over your web app. Aside from the performance costs, connecting to a third party server opens the door for potential security vulnerabilities. Some third parties have a bad habit of downloading additional third party resources that you don't want or need. Certain scripts can create a single point of failure, which means that they are capable of crippling your entire website. Thus, you should be selective over which third parties you trust.
So long as you stick with scripts that have a solid reputation, then you needn't worry much about the host server. That said, there is plenty of things you can do to ensure that those scripts are delivered as promptly as possible.
Identifying your third party resources
Before you begin tinkering with scripts, take stock of all of your external resources. An easy way to do this is to run your website through a website speed test tool.
That should give you a list of all your resources; the ones that don't include your domain name are from third parties. If you're unsure what a specific external service is for, the domain name should give you a clue. Throw out any third party scripts that look suspicious.
Tracking the performance of your third party resources
Lots of things can cause your websites to run slow, and intermittent issues are tougher to spot than continuous ones. An easy way to evaluate the performance of your third party services is to set up a test website on your server. Load all of your third party scripts including ads, social media widgets and analytic services. Then, run the website through a web speed test tool.
You can remove scripts one by one to determine how each resource affects your overall site load. If you use Pingdom's speed test tool, look under the columns "content size by domain" and "requests by domain" to get a sense of which external assets are draining the most resources. That information can help direct your optimization efforts.
Keep in mind that variable third party services, such as Google AdSense, may load a different number of requests and assets every time your website loads.
How to speed up your third party scripts
Now that you know what to look for, here are some techniques you can employ to get your third party scripts up to optimal speed:
1. Asynchronous loading
One tried and true solution to the problems discussed above is to load your third party scripts asynchronously. In some cases, you can delay their loading until after the onload event. Of course, that means some users could leave before all of the third party scripts execute. If those scripts are related to ad revenue or traffic monitoring, then that could obviously present problems.
Read more about why you should prefer async loading.
2. Defer loading third party scripts
Since JavaScript obviously takes longer to load on slower devices, in some cases asynchronous loading can cause additional problems by altering the critical rendering path. The defer attribute can help you get around this issue by telling the browser to wait until the rest of the page is finished loading before executing a script. Of course, you'll have to decide which resources should be prioritized.
Choosing between defer and async will depend upon which assets you're prioritizing. Read more about the differences between defer and async.
3. Preconnect, preload, and prefetch
The preconnect, preload, and prefetch directives give browsers a heads-up about third party resources so that connections to outside servers can be established more quickly. Which one you should choose for each resource depends on how critical your third party scripts are to rendering the page. Learn more about how to take advantage of preload, prefetch, and preconnect.
These directives are presently supported in current versions of Chrome, Opera and Firefox. Experiment with them under various network conditions to find the optimal set up.
4. Enforce timeouts
Setting up service workers can prevent SPOF, or single points of failure, by forcing timeouts if a resource is taking too long to load. See Dean Hume's article on how service workers can mitigate the risks of relying on third party scripts.
5. Host third party files locally
If possible, host third party files locally. This minimizes the number of DNS lookups required as the script isn't loaded from an external resource and you have greater control over the infrastructure used to deliver said script. Of course, this won't be possible in all scenarios however as an example, check out how to achieve this for Google fonts as well as Google Analytics.
6. Use a CDN
If you're still serving third party scripts from your origin server, consider investing in a content delivery network, or CDN. A CDN can drastically cut down round trip time by delivering content closer to users. Choose a premium CDN with a good network of edge servers to ensure content is delivered faster to users around the world.
7. Optimize your comments
User comments are critical to any blog, but they can take up a sizeable chunk of a webpage. Fortunately, you can save a lot of time and space by disabling avatars and limiting the number of comments that load at one time.
Alternatives to using third party scripts
If your third party resources are giving you more hassle than they are worth, consider some alternative ways to achieve the same goals. For example, instead of including a Facebook like box, you could create an image banner that links directly to your Facebook page. Rather than using AdSense, give affiliate marketing a try. Affiliate ads can often be loaded directly from your CDN with just one request.
Think outside the box to find more ways to reduce your dependence on third parties.
Security concerns with third party scripts
While speed may be your top priority, don't ignore the security issues that third parties can present. A couple of measures you can employ to help reduce the risk of third party security concerns is to create a content security policy, or CSP, and/or to use subresource integrity. For more security-focussed recommendations, check out our HTTP security headers post.
The safest strategy is to rely on third party scripts as little as possible. They certainly can make websites more dynamic and engaging, but the security and performance costs aren't always worth the effort.
Summary
Advertising scripts sometimes cost mobile users more in data fees than websites actually make from ad revenue. In other words, mobile carriers are often the largest benefactors of mobile ads. In a study of the top 50 major news websites, The New York Times found that "more than half of all data came from ads and other content filtered by ad blockers." Advertising revenue is important, but if your ads are turning customers away, or if your customers are just turning off the ads, then are they really helping your bottom line?
Although third party scripts come with downsides, they are often unavoidable in enterprise operations. That said, third party scripts should enhance, not hinder, the user experience. This statement should go without saying, but it sometimes bears repeating considering that the proliferation of third party scripts has driven more users to install content-blocking software such as ad blockers. In any case, consider implementing the suggestions outlined above to help improve the performance of your third party scripts which in turn should improve the overall user experience of your website.