A fast loading website is a necessity. There are many ways to optimize the site for speed.
Combining external JavaScript is one of the many.
Having combined external JavaScript is a small but neat method that can escalate the loading speed of the site.
In this tutorial, I will show you how to combine external JavaScript files in WordPress, and how it will affect the speed.
Why should you combine external JavaScript files?
A visitor puts an URL into the browser and hit enter. The browser sends a request to the server requesting the necessary resources to load that URL. The server reads the requests and sends the requested file.
The file contains HTML, Javascript, CSS, images, and other elements. Internet browser downloads the page from the server for each page.
JS files of a page are downloaded together, but the browser parsed it in order of the appearance in the HTML. Parsing Javascript files takes time, and it holds the other page element from loading further.
It means, CSS files, and other elements will not load unless the Javascript load first. JS is typically located in the header, which means the JS parsing will stop the browser from loading anything else.
You can verify whether your site has this problem by running a website speed test. There are plenty of website speed testing services.
- Pingdom Speed Test
- GTMetrix Speed Test
- Google PageSpeed Insights.
Just paste your page link, and hit enter. These tools will give you a detailed report on how the page is loading.
I am using Google PageSpeed Insight as an example.
As soon clearly, the speed performance of the site is not good. If we scroll down, we will find the suggestion proposed by the tool.
Enabling HTTP/2
The request-response between browser and server runs on HTTP protocol. It is a standard protocol of online communication.
HTTP/2 (released in 2015) is the latest upgrade to the HTTP protocol. Most of the hosting support HTTP/2, then you do not need to combine any files, as it supports parallel downloads.
It means it allows sending and downloading of multiple elements at the same time.
The new protocol has upgraded features:
- Improve the loading speed of the pages
- Enable parallel downloads of data
- Enable multiplexing
- Compress request headers
Overall, the latest version of HTTP/2 improves the performance of web browsing.
In this tutorial, we are combining Javascript in WordPress running on HTTP. You can ask your hosting provider to switch your hosting to HTTP/2.
How to Combine External JavaScript Files in WordPress?
Combining external Javascript files literally means combining. You can combine all the Javascript files into one and delete other files.
Manually copy paste will work too if you do it properly. It is simple, but not efficient. Copy pasting the code could be challenging too. Also, JavaScript is not that easy to learn, and you cannot do it without understanding some of the Javascript, else you will break the site.
That’s why I suggest using a WordPress plugin. Though there are many plugins to perform the task, the best one is Autoptimize.
Autoptimize has plenty of functions to optimize the speed of the WordPress site. You can minify HTML, CSS and Java with this plugin.
The plugin has a pro version, but to combine external Javascript, the free version is more than enough. Install and activate the plugin from the WordPress directory.
Combine external JavaScript files in WordPress with Autoptimize:
- Log in to WordPress Admin Dashboard
- Go to Setting >> Autoptimize from the sidebar
- Find the ‘JS, CSS & HTML’ tab from the top bar
- Tick on the Optimize JavaScript code
- Save changes
That’s it. Go and purge the WordPress cache one time.
Run a page load test to check the performance. Check whether the test is still displaying the JS warning.
Scroll down, and you can optimize CSS files to from this plugin. It will also help you to speed up the WordPress site.
If using a CDN, put your CDN URL to enable CDN for the newly made JS files.
Take Away
A slow site hurt the visitor’s experience, SEO, and eventually, conversion. You should not take it lightly and should do anything and everything to improve the speed of the site.
Combining JavaScript is only one method, but it can speed up WordPress and is a common optimization. You can either do this manually or use the plugin.
In this quick tutorial, we learned combing external Javascript in WordPress with Autoptimize.
I hope this article helped you, and if there is any question or queries, you can leave them in comments.
