In this article, we're going to introduce a method that we use to speed up Third Party JavaScript on our WordPress websites.
You can usually identify the impact that third party scripts are having on your website loading times by using a tool such as Google PageSpeed or GT metrics.
If a script is severely impacting the page speed loading time, Google PageSpeed will identify the opportunity “Reduce The Impact Of 3rd Party JS” and tell you how much quicker your website would load if you addressed these issues. it will also tell you the actual scripts in question. Taking a look at the waterfall report on GTMetrix and identifying JavaScript files that are being loaded from third party locations would help you isolate third party scripts that could be optimized.
The usage of 3rd party JavaScript is highly dependent on your website, but there are some typical scripts that impact the loading time.
There are many other third party JavaScript libraries that will impact the loading time of your website. In most instances, if you're calling third party, PageSpeed will tell you that reducing the impact of it loading on your website will speed up your time and improve your score. Additional third party scripts that impact your websites loading time could come from ad networks, or further integrations.
Once you've identified the third party JavaScript that is impacting the loading time of your website, it's time to resolve this. There are two tools that we're going to use to help reduce the impact of 3rd party JavaScript loading on our WordPress website.
The first major tool is is a plugin called flying scripts. This is a simple plugin that downloads and runs JavaScript on user interaction.
In English, this means that a third party script will not impact the loading time of your website because it isn't downloaded automatically. Instead, the script will be downloaded on the website when a user scrolls or clicks.
You should only do this for noncritical JavaScript. By not initially loading all JavaScript, and only focusing on the critical scripts necessary to loading the initial viewport of the page, you reduce the load on the server (less HTTP requests), And you give more resources to the loading of critical JavaScript resulting in a faster page speed time, better speed index, and lower time to interactive.
This is different than defer because (noncritical) scripts simply are not loaded unless a user interacts with the page.
The back end of this plugin is extremely simple and easy to use. Once you've installed the script on your website (you can use the free code snippets plugin to do this), simply identify the third party script with a keyword in the Flying Scripts interface, and it will only be loaded on user interaction.
You can add as many keywords as you want. For example, this is the keyword for the Facebook Messenger live chat that can be installed in any website. “fbevents.js” Refers to the Facebook Pixel and “analytics.js” refers to Google Analytics.
It's really as simple as that.
Next up is a plugin called Perfmatters. This is a “Jack of all trades” speed optimization tool, but we're going to specifically use the feature that allows you to host Google Analytics scripts locally.
Hosting this script locally allows you to make less DNS requests. This reduces the impact of it on your website's loading time, and resolves the issue “leverage browser caching”.
All you need to do is toggle local analytics on, and then enter your tracking ID. There are a couple of other features regarding GA that you can ignore or use depending on your website requirements.
For example you can:
A combination of these two plugins will seriously reduce the impact of 3rd party JavaScript code on your WordPress website. Not only will this result in a higher performance score, but your website will load faster all around resulting in higher ranking placement and a better user experience.
If you have any questions on how to optimize your WordPress website for speed, feel free to reach out in the comment section below.
How do you prevent flying scripts producing the error in oxygen builder UI?