Combining external javascript is one of the solutions for slow loading WordPress sites. This easy tutorial will show you how and should help your web pages load more quickly.
The need to combine external Javascript files
Some of the plugins/themes added into your site come with a bunch of javascript files. Javascript adds interactive behavior and functionality to your web pages. When you request a web page, all javascript and other file types are fetched from the server and loaded into the browser. You may have experienced clicking a link to a webpage and may be instantly directed but find that not all contents are visible yet. Some sections might not appear completely unless their corresponding .js libraries are fully loaded.
As you add more plugins or functionality to your website, resources that need to be loaded increase over time causing the page to load quite slowly, putting the website at risk of high bounce rate. You can conduct a speed test on your site to confirm whether or not you need to do some optimization.
We use GTMetrix to do site speed testing.
Here’s a sample speed test result:
Solution to slow page load in WordPress: Use a Plugin
This slow page loading problem causes some site owners to either subscribe to a faster, more expensive hosting or remove those embedded videos, high-resolution images, or large typography that causes the slow-down. Fast servers sure make a difference, but as you add more dynamic elements into your site, speed may at some point be jeopardized. One way to resolve this issue is to combine all external javascript files into one single file. Doing so will significantly reduce the fetch-and-load time. You can do it manually by copying and pasting scripts into a single file and then removing all the other files. Sounds tedious, but the good news is, in WordPress, there are plugins that help make this task easier. Some of the most popular ones are the following:
Autoptimize
WP Super Cache
Use one of these plugins to optimize your site by speeding up loading time. Through minification, they both combine all your external javascript files, thus loading up as one single .js file, completing the process more quickly. The minification also works with html and css files.
How to use AUTOPTIMIZE
Let’s have a look at Autoptimize.
Upon activation of this plugin in your WordPress site, you can go to Dashboard >> Settings >> Autoptimize. Go to the JS, CSS & HTML tab, then tick the box next to Optimize JavaScript Code to enable this function.
Click the Save Changes button at the bottom of the page.
Autoptimize also has CSS, HTML, CDN options, among others, found on the same settings page.
When you are done with your preferred settings, you may go back to GTMetrix to run another speed test and see if there is any change in your site stats.
Here’s a screenshot of the speed testing result after enabling the optimization of javascript code in Autoptimize.
Widget Options solution to slow page load in WordPress: Enable Widget Cache
If you are a Widget Options user, you can speed up your site loading time by caching WordPress widget output! Cache them all for better performance or exclude any widget you want. This widget option feature will Improve your site loading speed by caching widget output via Transient API. You can easily cache all widgets or exclude whichever you want via a check box provided on each widget option.
I hope this quick tutorial helps! Visit our blog for more interesting WordPress articles and more.