{"id":17929,"date":"2019-05-10T12:49:33","date_gmt":"2019-05-10T12:49:33","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=17929"},"modified":"2025-04-28T08:10:00","modified_gmt":"2025-04-28T08:10:00","slug":"external-javascript-wordpress","status":"publish","type":"post","link":"\/uk\/tutorials\/external-javascript-wordpress","title":{"rendered":"How to Combine External JavaScript in WordPress to Boost Site Speed"},"content":{"rendered":"<p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\" target=\"_blank\" rel=\"noopener\">Download all in one WordPress cheat sheet<\/a><\/p><p>A slow loading website is a huge problem, however, there are plenty of ways to overcome it. Among many solutions, you can try to properly combine external JavaScript in WordPress.<\/p><p>While the solution might be simple, it would work like charm. In this article, we will show you why you have to combine external JavaScript files in WordPress and how to do it using a few simple steps.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-do-you-have-to-combine-external-javascript-files\">Why Do You Have to Combine External JavaScript Files?<\/h2><p>As you might know, when you request an HTML page, the browser will send an inquiry for all the needed resources. All files, including <a href=\"\/uk\/tutorials\/wordpress\/how-to-defer-parsing-of-javascript-in-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript<\/a> ones, will be fetched from the server and loaded in the browser again.<\/p><p>In every request, JavaScript files are downloaded together but executed in the order of their appearance in the <a href=\"\/uk\/tutorials\/what-is-html\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a>. While the separate download itself might slow down the website, the sequence processes might keep you waiting even more.<\/p><p>JavaScript files, along with CSS files, are <a href=\"\/uk\/tutorials\/how-to-fix-eliminate-render-blocking-javascript-and-css-in-above-the-fold-content-on-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\">render blocking<\/a> resources &mdash; won&rsquo;t load other components unless all the files are completely loaded. As these files are commonly located in the head of a web page, it might cause issues.<\/p><p>To make sure if you&rsquo;re running into these problems, you need to check your website&rsquo;s performance by conducting a speed test.<\/p><p>There are many websites like<a href=\"https:\/\/tools.pingdom.com\" target=\"_blank\" rel=\"noreferrer noopener\"> Pingdom<\/a>, <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GTMetrix<\/a> and <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a> that will help you to do that. All you have to do it put your website link, and click Analyse.<\/p><p>Here are the examples of our testing site results:<\/p><figure data-wp-context='{\"imageId\":\"69f05e02370d4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" width=\"1200\" height=\"560\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/05\/gtmetrix.png\" alt=\"GTMetrix\" class=\"wp-image-17930\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix.png 1200w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix-150x70.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix-300x140.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix-768x359.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix-1024x478.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/gtmetrix-990x462.png 990w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Ideally, the result should be within the green categories (fast). Or at least, ensure that your site is not in the red category. If that happens, take immediate action. <\/p><p>Most of the time you would get a warning if there are more than five JavaScript files found. By locating the issues, you are ready to fix the problems.<\/p><h3 class=\"wp-block-heading\" id=\"h-http-2\">HTTP\/2<\/h3><p>Implementing the latest technology like HTTP\/2 is always beneficial. If your hosting provider supports it &mdash; as Hostinger does &mdash; you might not need to combine files because it supports parallel downloads.<\/p><p>Released in 2015, HTTP\/2 &mdash; Hypertext Transfer Protocol version 2 &mdash; was developed as an enhanced version of HTTP\/1.1 which has been the standard of online communication since 1989. The enhancement of the new protocol is intended to:<\/p><ul class=\"wp-block-list\">\n<li>Improve page load speed<\/li>\n\n\n\n<li>Enable parallel downloads<\/li>\n\n\n\n<li>Enable multiplexing<\/li>\n\n\n\n<li>Make compression of request headers<\/li>\n\n\n\n<li>Head-of-line or package blocking<\/li>\n<\/ul><p>This new version has several methods to <a href=\"\/uk\/tutorials\/how-to-fix-admin-ajax-file\" target=\"_blank\" rel=\"noreferrer noopener\">reduce latency<\/a> which will impact the overall website performance.<\/p><p>Keep in mind, that this tutorial of combining external JavaScript files is meant for those who use HTTP\/1.1.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-combine-external-javascript-files-in-wordpress\">How to Combine External JavaScript Files in WordPress?<\/h2><p>As mentioned earlier, multiple JavaScript files will add to the total render time and trigger a warning when conducting page load speed test.<\/p><p>As a solution, you can combine external Javascript files in WordPress, turning all of them into a single file and deleting the rest. If you copy and paste the right script, the JavaScript combined file will work as normally as the separate ones.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p>Check out our article to learn about different methods to <a href=\"\/uk\/tutorials\/wordpress-javascript\">add JavaScript to WordPress<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><p>While the idea of copying and pasting might seem simple, doing the hand-coded work is challenging. Since there is a steep learning curve when it comes to JavaScript, doing these tasks carelessly will cause more harm than good.<\/p><p>So, you can use a plugin to combine external JavaScript in WordPress, to make your life easier.<\/p><p>One of the best plugins to do so is <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noreferrer noopener\">Autoptimize<\/a>.<\/p><p>This plugin can help you handle minification tasks for HTML, <a href=\"\/uk\/tutorials\/what-is-css\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> or JavaScript files. Regularly updated, with than 900,000 active installations, this plugin is highly recommended.<\/p><p>While you can use it for free, you can get its premium versions for more features: <strong>Autoptimize Pro Configuration<\/strong> (<strong>$167<\/strong>) and <strong>Complete Speed Optimisation<\/strong> (<strong>$671.74<\/strong>).<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"790\" height=\"652\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2019\/05\/javascript-autoptimize-settings.png\" alt=\"Autoptimize Settings\" class=\"wp-image-17931\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/javascript-autoptimize-settings.png 790w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/javascript-autoptimize-settings-150x124.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/javascript-autoptimize-settings-300x248.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2019\/05\/javascript-autoptimize-settings-768x634.png 768w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/figure><\/div><p>Once installed and activated, you can go to the <strong>WordPress dashboard -&gt; Settings -&gt; Autoptimize<\/strong>. Under the <strong>JS, CSS &amp; HTML<\/strong> menu, you can enable the <strong>Optimise JavaScript Code<\/strong>. After that, click <strong>Save Changes<\/strong>.The optimization is automatic, so you can immediately test your web page load speed again to see the improvements.<\/p><p>In addition to that, if you want to combine CSS files, you can also enable the <strong>Optimise CSS Code<\/strong> option. If you&rsquo;re using CDN, you can put all the options enabled including the <a href=\"\/uk\/tutorials\/what-is-cdn\" target=\"_blank\" rel=\"noreferrer noopener\">CDN<\/a> options.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusions\">Conclusions<\/h2><p>Loading speed is very important for any website. If you face any problems in this department, try and fix it as soon as possible.<\/p><p>You can combine external JavaScript files in WordPress to make your site load faster. But, it may require you to handle the code manually.<\/p><p>If you want to avoid unexpected errors, using a plugin is recommended for the task. Autoptimze is one of the great WordPress plugins for that. Once installed, it will optimize your website automatically.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Learn Other Advanced WordPress Techniques<\/h4>\n                    <p><a href=\"\/uk\/tutorials\/wordpress-database\">All You Need to Know Guide About WordPress Database<\/a><br>\n<a href=\"\/uk\/tutorials\/complete-wordpress-gdpr-guide\/\">WordPress GDPR Guide<\/a><br>\n<a href=\"\/uk\/tutorials\/wordpress-custom-fields\">How to Add WordPress Custom Fields<\/a><br>\n<a href=\"\/uk\/tutorials\/wordpress-pagination\">How to Setup WordPres Pagination<\/a><br>\n<a href=\"\/uk\/tutorials\/create-a-shortcode-in-wordpress\">How to Create a Shortcode in WordPress<\/a><br>\n<a href=\"\/uk\/tutorials\/optimize-images-wordpress\/\">How to Optimize Images in WordPress<\/a><br>\n<a href=\"\/uk\/tutorials\/speed-up-wordpress\">How to Speed Up a WordPress Site<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A slow loading website is a huge problem, however, there are plenty of ways to overcome it. Among many solutions, you can try to properly combine external JavaScript in WordPress. While the solution might be simple, it would work like charm. In this article, we will show you why you have to combine external JavaScript [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/uk\/tutorials\/external-javascript-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Combine External Javascript in WordPress","rank_math_description":"Slow loading speed is a problem for any site. This article show you how to combine external JavaScript files in WordPress to fix that issue.","rank_math_focus_keyword":"combine external javascript wordpress","footnotes":""},"categories":[],"tags":[],"class_list":["post-17929","post","type-post","status-publish","format-standard","hentry"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/17929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/comments?post=17929"}],"version-history":[{"count":21,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/17929\/revisions"}],"predecessor-version":[{"id":127564,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/17929\/revisions\/127564"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media?parent=17929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/categories?post=17929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/tags?post=17929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}