Get Our Latest Posts Sent Directly to Your Email Inbox!

Step by Step – How to Combine JavaScripts Into 1 File in WordPress

by | 14 Comments
Last Updated on March 4th, 2017

Level of Difficulty – [Challenging]

IMPORTANT! Editing the Source Code of a WordPress theme could break your site if it’s not done correctly. If you are NOT comfortable doing this, please check with a developer before continuing.

A quick reminder before I show you how to combine external JavaScript’s into one file for your WordPress website.

If you don’t already know this or just don’t remember, let me remind you about the “Performance Golden Rule” – Rule #1Reducing HTTP Requests.

Step by Step - How to Combine JavaScripts Into 1 File in WordPress

This performance rule is pretty basic… if you want to improve the site speed of your WordPress-based web site, you will need to remove each and every plugin and widget that is not absolutely crucial for your website, whether it’s for business or otherwise.

Taking this Rule seriously, will speed up your WordPress web site more than you know.

Now, I want to be clear about something… you may have heard through the grapevine that your scripts will download in parallel, during the loading process of your website

But, as explained in the article, ‘How to Combine CSS Stylesheets Into 1 File in WordPress’, there is one main reason that I like to combine JavaSript’s into one or two files at the most… KEEP READING!

Combining External JavaScript’s (ONE Major Reason)

TO Reduce the Chances of Bottlenecks to the Point of Non-Existance!

A slow-loading WordPress-based website usually means one of two things, or both actually.

1. You have too many plugins and widgets requesting information!

2. Your web hosting sucks, and you have too many plugins and widgets.

You can have the fastest and most reliable web hosting on the planet, but if your site has too many plugins and widgets, it won’t matter.

On the other hand, if you remove every single WordPress plugin and widget from your site, and your web hosting sucks, you can still have high-traffic bottlenecks which can bring your site to a screeching halt.

It’s been my experience, that it’s better to have both… fast and reliable web hosting, and have a WordPress site that is not riddled with plugins and widgets.

But, that’s a story for another day.

Moving On…

Even though your scripts may download in parallel, and the majority of them are on the server that houses your site, a few of them may need to gather information from an outside source… another server, other than your own.

In a nutshell… getting rid of any outside source, HTTP requests, will reduce the chances of getting caught up in a high-traffic bottleneck – unless it’s the server your site is on.

You see… JavaScript’s are Render Blocking, meaning that the scripts will not allow other components (images, all the wording on the page) to download until the scripts are finished loading.

If you were to create 1 or 2, at the most, JavaScript files, and they were stored on your website’s server, the chances of a bottleneck from your scripts will be virtually non-existant.

How to Combine JavaScript’s Into 1 or 2 Files

NOTE: In order to accomplish combining scripts into 1 or 2 files, you will need to have access to your WordPress files, and have some basic knowledge for modifying existing files, and creating new ones.

YOU Need to KNOW That… Combining JavaScript’s into fewer files is going to be a tedious and time consuming task to accomplish (depending on the quantity of your scripts).

STEP 1 – What YOU Must Do First!

Before we dive head first into combining scripts into fewer files, we are going to need to make sure that your site will function properly when moving all the scripts to the footer.

What do I mean? Not every site will function properly when putting every external JavaScript file into the footer, so you will need to test this theory first to make sure your site functions like it should.

REASON: Depending on the WordPress theme that you use, and the functions that you have enabled for it, will be the determining factor whether moving all the JavaScript’s to the footer will work.

Example: Some themes have a slideshow on a page which require jQuery scripts or certain JavaScript files to load in the head section.

The only thing that you can do is to try moving all the JavaScript’s to the footer, in 1 action, to see which direction you will need to go for combining your site’s JavaScript’s into fewer files.

Follow the instructions from the article ‘How to Move JavaScript’s to the Footer in WordPress‘, then come back after testing your site to see what you need to do next to start combining your JavaScript’s.

NOTE: If something isn’t working properly with your site, remove the scripting, but paste it to a Word or Notepad document, then come back to this page.

– Link above will open a new window/tab in your browser so you won’t lose your place here.

You Tested Your Site and It’s Time to Combine JavaScript’s

Ok… you tested your site to find out if moving all the JavaScript to the footer in one action, from STEP 1, worked or not.

If it Did NOT Work…

If something with your site did not function properly when you moved all the JavaScript’s to the footer, using the one step process, whether it was a slideshow or the menu in the Mobile test platform, CONTINUE READING to resolve this issue.

If moving all the JavaScript to the footer in one action worked for your site, CLICK HERE!

– – – –

TROUBLE-SHOOTING | Your Site DOES NOT Work When Moving ALL the JavaScript to the Footer

To begin, you will need to determine which JavaScript files, were causing whatever was not working properly on your site, when you used the script to move all of your JavaScript to the footer in one action.

We will be manually placing whole lines of JavaScript into the head section of your theme until whatever didn’t work before, begins functioning properly.

This is going to be trial and error until your site works… I have learned that it is usually the first 3 lines of JavaScript (jQuery) that solve the problem.

You will need access to your ‘header.php’ or ‘functions.php’ file depending on your WordPress theme.

– Genesis and Thesis themes have a unique method to make their themes work – using action ‘hooks’.

For other types of themes that use php TEMPLATES, you will look for the ‘header.php’ file which is in the same directory as your ‘functions.php’ file, where you placed the ‘Move the JavaScripts to the Footer,’ script.

To locate either file, navigate to your WordPress theme using the following path (starting from the WordPress Core root directory):

For cPanel’s left side files, open up ‘wp-content’ > ‘themes’ > ‘your-theme’s-name’… when you click on your theme’s name from the left panel, all of the files should show.

Do you see a ‘header.php’ or ‘functions.php’ file there? If you do… for the TEMPLATE Driven Site, click on the header.php file to highlight it, then click on ‘Code Editor’ from the top.

For the GENESIS OR THESIS THEME, find the ‘functions.php’ file and click on the ‘Code Editor’.

Leave your header.php or functions.php file open, and open another tab or window, visit your site being sure not to be logged into WordPress.

Once you land on your site, visit one of your posts, right click your mouse, then click on ‘View Page Source’ or whatever wording is used to see your ‘Source Code’.

With your source code open, hit the buttons ‘Ctrl’ + ‘F’ on your keyboard at the same time which will open a ‘Find’ box… type in the box ‘javascript’.

Click on the down arrow until you come to the first JavaScript’s starting from the top similar to the screenshot image.

You can click on the image for a full-screen shot.

Source Code Screenshot – Before the External JavaScript's are Combined

If you have at least 4 or more lines of JavaScript, copy the first 4 lines of JavaScript code similar to the yellow highlighted lines of code, into a Word or Notepad document, being sure to copy the whole line, of each line.

For the TEMPLATE Driven site, go ahead and paste the 4 copied JavaScript lines into your header.php file directly above the <?php wp_head(); ?> line… the wp_head code should not be too far from the top of the page.

You can click SAVE CHANGES!

For the GENESIS or THESIS THEME, hover over the box to Copy (click on the ‘double page’ icon) and PASTE the Scripting below into the functions.php file, right where you would normally paste the ‘MOVE THE JAVASCRIPT TO THE FOOTER’ code.

Once you have pasted the code below into your functions.php file – replace each HTTP JavaScript URL link only, right after the scr=”, starting with the http and ending with the js, leaving the quotes in tact, with your JavaScript hyperlink, from your source code.

Do this carefully to make sure you do it right… one little mess up and you will create a syntax error.

– – – –

NEXT… in your functions.php file, re-add the ‘Move JavaScript to the Footer’ scripting, from your Word or Notepad document, a few lines below the code you just added, then re-save the file.

Now, refresh your site and see if whatever wasn’t working before is now working…

If it was a mobile site issue, you will most likely need to clear cache and cookies when you get to the mobile site, then refresh your page.

Hopefully all your site functions are working properly… if they are, remove the bottom line of the 4 JavaScript lines from your header.php or functions.php file and re-test… is it still working?

If it is, remove the 3rd line and recheck… if it stopped working, put the code back, re-save the file and re-check.

If it all worked out well… AWESOME! Leave the lines of JavaScript it took to make your site function properly in the head section and remove the ‘Move JavaScript to the Footer’ code and re-save your file.

– – – –

If you are thinking – WOW, this worked well putting the lines of JavaScript in the head section, and keeping the code in the functions.php file active to put all my JavaScript files into the footer, I think I’ll leave it that way…

Let me mention… doing it this way will give you duplicate JavaScript files… they will be in the header section because you manually placed them there, and the footer section because of the scripting in the functions.php file…

If you want to leave it this way, you would still need to go through the ‘DeRegistering’ process to remove the JavaScript from the footer section, which means that you would need to remove the scripting from the functions.php file anyways.

YOU CAN’T HAVE IT BOTH WAYS!

Either follow through with the rest of this article, or remove everything you’ve learned to this point.

– – – –

If it still Did NOT Work… you will need to continue the trial and error process until you find the right combination that is keeping your site from working properly.

MOVE On to STEP 2…

– – – –

STEP 2 – Create a Custom File to Hold Your Combined External JavaScript’s

Below you will find a <head> section screenshot image of the source code for a site that we will be combining the external JavaScripts.

Source Code Screenshot – Before the External JavaScript’s are Combined

Source Code Screenshot – Before the External JavaScripts are Combined

As you can see from the image highlighted in yellow, we have 3 external JavaScript’s, from the head section, to combine into 1 file… it shall be fairly easy.

What you don’t see is that when we reveal the ‘handles’ for the external JavaScript’s, later in this article, we will find 3 other JavaScript files in the footer that we can combine if we choose.

Moving On…

To begin, we will be creating a folder in your root directory which will be holding your WordPress modifications… if you have already done this step from the ‘Combining CSS Stylesheets into 1 File‘ article, then all you will need to do is create a ‘js’ folder, and a custom javascript file… KEEP READING…

If you are using Dreameweaver or Filezilla to access your WordPress site, I am going to make the assumption that you already have some basic understanding for accessing and modifying your site’s files and information.

Just follow all the same paths within the platform you are using, when I mention cPanel.

Here Is What to Do if You are Using cPanel:

Log in to your cPanel, go to your ‘File Manager’ link (under ‘Files’), open the ‘File Manager’, click on the folder that contains your WordPress site, whether it’s ‘Public_html’, ‘www’ or another name.

Once you opened up that folder, make sure that this is where your WordPress site is, HINT – you should see folders named, ‘wp-admin’, ‘wp-content’, etc.

Next, you will need to create a folder in your root directory, the same directory as the wp-admin and wp-content folders.

With all of your root directory files and folders showing, click on the ‘+’ sign for adding a folder and name it ‘includes’ (of course without the apostrophes).

Once you’ve done that, click on the ‘includes’ folder from the left side pane, it should now say ‘This directory is empty.’

Let’s add another folder inside the ‘includes’ folder and name it ‘js’.

Repeat the step above and open the ‘js’ folder so it says ‘This directory is empty.’

Now click on the + sign to add a ‘file’ (not folder) and name it ‘custom_jquery.021115.js’ with the numbers before the ‘.js’ representing the numerical date that you created it (today’s date?).

NOTE: if you happen to have a large amount of JavaScript’s to combine, then also create a file that says ‘custom_plugins.021115.js’.

As I mentioned earlier, I have 3 additional files from my site’s footer section to combine.

So, for my purposes, since all of my head section external JavaScript files are from the jQuery library, I will be using the custom_jquery.021115.js custom file to hold these files.

NOTE: Each time you update a WordPress plugin, you will need to modify the ‘combined’ file, then re-save it with the new date… Details Further Below!

The reason for updating your combined JavaScript file(s) with a new URL is… if you are using Cache-Control using ‘Expires Headers‘ code in your .htaccess file, this will tell your visitor’s web browser that this combined file has changed and to grab the newly modified file so the plugin’s will work properly.

– – – –

STEP 3 – Add the JavaScript’s to the Custom ‘Combined’ JavaScript File

Now that you have the custom JavaScript file and folders created, it’s time to get to work!

Click on the ‘JS’ folder from the left side pane of your cPanel files, single click on the custom_jquery.021115.js file to highlight it.

Click on ‘Code Editor’ from the top (above all the files).

With your custom JavaScript file open, you will want to create information (as shown up to line 13), similar to the screenshot below.

NOTE: Because I know I have 6 external JavaScript files, I also went ahead and created 2 custom files.

Once I created the information up to line 13, as in the image below, I copied and pasted it in my other custom file, custom_plugins.021115.js, then changed the word ‘jQuery’ in lines 2, 5 and 13 to ‘JavaScript’, just to keep things straight.

Screenshot of the Modified ‘custom_jquery.021115.js’ JavaScript File

Click on the image for a larger screenshot.

Each JavaScript file that is placed within the combined JavaScript file will show: the Plugin Name, the Version of the Plugin and its ‘handle‘, plus the link wrapped in parenthesis.

JUST So YOU KNOW… in the image above, under the ‘Plugin Name’ in lines 9 and 10, it says ‘WordPress Core’, that is because these two JavaScript files are from the WordPress platform itself, as you can see from the link where it says ‘wp-includes’.

If it were a plugin or JavaScript file that is a part of your theme, the file will be located from inside the ‘wp-content’ folder where your ‘plugins’ and ‘themes’ folders reside.

NOTE: As the screenshot shows, whenever you put Notes or Comments within this type of file, you MUST put ‘//’ before each line typed.

Doing all this will help keep your files in some sense of order, giving you a quick glance, when it comes to updating.

Before moving on… create a Word or Notepad document and name it ‘Plugins Update List‘ and keep it handy.

NOTE: Each time you add a WordPress Plugin JavaScript file to one of your custom JavaScript files, document the name of it in your Plugins Update List document… we will be discussing it further towards the end of this article.

Information to Create the Top Part of your ‘custom_jquery.021115.js’ File:

Before moving forward, be sure you are LOGGED OUT of WordPress.

Open up your WordPress site in another tab/window in your browser, then click on any link to one of your ‘Posts’.

This is to be sure that you see all the JavaScript files that are being called by the plugins.

Some JavaScript files won’t show up unless you happen to be on a ‘Posts’ page.

Right click your mouse, then click on ‘View Page Source’ or whatever wording is used to see your ‘Source Code’.

With this open, hit the buttons ‘Ctrl’ + ‘F’ on your keyboard at the same time which will open a ‘Find’ box… type in the box ‘javascript’.

Click on the up or down arrow to highlight the file that is first in line, starting from the top.

You are looking for a javascript link that is similar to below:

<script type=’text/javascript‘ src=’http://seoblogger.co/wp-incl…‘></script>

Look at the whole line of the first JavaScript file to get a sense of what the JavaScript goes to.

As mentioned above, if it says ‘wp-includes’ in the link, then you will want to put the words, WordPress Core, under the Plugins Name.

If it says ‘wp-content’ in the link, look after that, does it say ‘plugins’ or give the name of your theme?

If it gives the name of your theme, then most likely it is JavaScript being called by some function in your theme.

If You Will Be Using Both Custom JavaScript Files

NOTE: If you will be using the 2 custom JavaScript files because your site uses a large quantity of JS files to make it function, be sure to divide the files fairly evenly, by file Kilobyte size, between the two files…

HINT: The jQuery files from the WordPress Core are fairly big in KB size… maybe put those 2 files in the jQuery custom file, then depending on how many more JavaScript files you have, putting the remaining in the custom_plugins file.

Just do your best after all the files are combined, to balance between the two.

You don’t want 1 huge JavaScript file with the other one small… your cPanel, or whatever platform you are using, should tell the file size once the files are saved.

AND, be sure the JavaScript order remains the same, from top to bottom (as shown in your source code).

Even though the custom JavaScript files will download in parallel, if one is larger, taking longer to download, that larger file will be the hold up in determining whether your page is considered fully loaded or not.

– People may not notice, but the online web performance tools, like Pingdom or GTMetrix will show longer page loading times (if you are optimizing for site speed, or actually care).

NEXT… open another tab or window and log into your WordPress site.

Go to your WordPress ‘Plugins’ page to highlight, then copy and paste, the first plugin’s ‘Name’ and the ‘Version #’, into your custom JavaScript file as shown in the image above.

NEXT, go back to the source code and highlight the link and paste it (in-between the parenthesis) on the custom JavaScript file.

NOTE: If you are having trouble highlighting the link because that darn ‘Hand’ keeps showing up, slowly slide your mouse just directly before or after the link… when the hand turns into a vertical-line, click and hold your mouse, then move the mouse over the link until it’s completely highlighted.

Then right click and copy, then paste it in-between the parenthesis on your custom JavaScript file!

Visit your Source Code to see which JavaScript file is next in line, then repeat until you are done copying all the ‘javascript’ information into the custom JavaScript file.

– – – –

Your NEXT STEP…

Highlight all the information from your custom JavaScript file, that is between the ‘BEGIN – Plugins COMBINED Plugins Order‘ and ‘END – Plugins COMBINED Plugins Order‘ similar to below (to include the links), then paste it a few lines below all of the top part of your plugin information:

// WordPress CORE – Version 4.1 – jquery (http://seoblogger.co/wp-includes…)
// WordPress CORE – Version 4.1 – jquery (http://seoblogger.co/wp-includes…)
// WordPress Theme Mobile JS – Version 1.3 – mobilemenu (http://seoblog…)

Now, put about 7 to 10 spaces between each of those lines of information.

Between these lines of information is where you will paste the JavaScript coding.

Go back to your WordPress page, source code and click on the first ‘JavaScript’ link… it will open a window with the code for that particular JavaScript file.

Now, hit ‘Ctrl + A’ on your keyboard to highlight all of the code, then ‘Ctrl + C’ to copy the information… now right click and select ‘back’, to go back to your JavaScript’s in the source code.

Go to your custom JavaScript file – press ‘Ctrl + V’ to paste the code you just copied, a line or two below, the words that describe which JavaScript file it is.

Now, rinse and repeat until you have pasted all the copied JavaScript files from your source code.

– – – –

STEP 4 – Find Each External JavaScript Handle

We will need to find the ‘handle’ names for each JavaScript file, so you can place them in the proper locations and within the deregistering script coming up.

NOTE: To find the ‘handle,’ we will need to place a small piece of scripting within your ‘functions.php’ file to find out the name of each JavaScript file’s handle, then you will put the handle name within your custom JavaScript file, and the De-Registering Script that will follow.

Navigate to your functions.php as done before (located within your WordPress theme).

Once you have found your ‘functions.php’ file – single click on the file to highlight it, then click on ‘Code Editor’ from above all the files, to add the scripting below.

– – – –

NOTE: You will notice in the code below, on line 1, where it says ‘JavaScript Handles — jquery contact-form-7 devicepx mobilmenu‘, these words will be replaced with the ‘handles’ that are revealed once you use this scripting.

To grab a copy of the scripting, just hover your mouse over the box below, then click on the ‘double page’ icon.

Either right click your mouse and copy the code, or press Ctrl + C on your keyboard, then Ctrl + V to paste into the functions.php file.

Instructions for adding the scripting to your ‘functions.php; file.

If you went through the process adding the scripting for the ‘Move the JavaScript’s to the Footer‘ article, you can add this scripting in the same area.

If not, I will repeat the instructions…

Once you have your functions.php file open and ready to add the script, scroll to the end of the file… this is where you can safely place the script from above.

NOTE: If your functions.php file ends with the ?> (shown in line 321 in the image below), put the scripting just before it… you can create some space by placing your cursor above the ?> and hit the enter key on your keyboard.

If your file does not contain this ‘question mark’ and ‘greater-than’ bracket, don’t worry about it, your theme was designed to work that way.

Paste the code after any existing scripting on the page as shown below.

DO NOT SAVE the Changes yet… Keep Reading!

functions.php File

Now… before you save your changes, be prepared to copy down your JavaScript handles that the scripting will reveal for you.

These ‘handles’ are going to show up in two different locations.

The JavaScript handles will show up at the very top-left part of your website (in your browser’s window). The handles will also show in your Source Code at the first line of JavaScript code in your header.

Which ever place you feel that you can highlight and copy the fastest will be the place for you to go right after clicking on Save Changes.

Your site will NOT break, depending on how much traffic your site gets, you may not want the ‘handle’ words showing in the browser window too long… it just doesn’t look professional.

When you are ready, click ‘SAVE CHANGES’… go to one of the two locations I mentioned and hit F5 on your keyboard (refresh your page).

Do you see the handle names, with a space in-between each one?

They should look similar to the screenshot below…

Now, highlight the handle names, then copy and paste them into the functions.php file, replacing the pink highlighted handle names, as shown in line 309 from the screenshot above.

As soon as you have done that, highlight and remove the ‘Handle Locator’ scripting as shown from lines 311 to 319, from above, then click SAVE CHANGES.

At this time, you can go back to the custom JavaScript file(s) and add the ‘handles’ as per the screenshot in STEP #3.

They should be fairly obvious which line to add them to. Just look for the handle name within the http link… if it isn’t obvious, you will need to locate which line it belongs to, later in this article.

Click SAVE CHANGES for both of your custom JavaScript files.

– – – –

STEP 5 – Create Footer Link(s) for the Custom JavaScript File(s)

Below will be the code that you will place in the ‘footer.php’ or ‘functions.php’ file depending on your WordPress theme.

Here is the determining factor to which method you will use… if you use the Genesis or Thesis theme, you will use the second method.

– Genesis and Thesis themes have a unique method to make their themes function – using action ‘hooks’.

Click this link to go to to the Genesis and Thesis information.

For other types of themes that use php TEMPLATES, you will look for the ‘footer.php’ file.

To locate this file, navigate to your WordPress theme using the following path (starting from the WordPress Core root directory):

For cPanel’s left side files, open up ‘wp-content’ > ‘themes’ > ‘your-theme’s-name’… when you click on your theme’s name from the left panel, all of the files should show.

Do you see a ‘footer.php’ file there? If you do… click on the footer.php file to highlight it, then click on ‘Code Editor’ from the top.

NOTE: If you created the custom JavaScript file exactly like I mentioned above, naming your folder ‘includes‘ and the other folder ‘js‘ along with the name of the custom file to be ‘custom_jquery.021115.js‘, then only the pink highlighted area will need to be changed once you paste that whole line of code into your footer.php file.

With your footer.php file open, copy the link below from your screen…

<script type=’text/javascript’ src=’http://www.yourdomainname.com/includes/js/custom_jquery.021115.js’></script>

Go ahead and paste the copied JavaScript line, directly below the <?php wp_footer(); ?> line in your footer.php file.

Now, change the pink highlighted information to your domain name and the file numbers you used when creating your custom JavaScript file.

NOTE: Of course if you are using both custom JavaScript files, then you can paste this 2 times, one right after another, change the pink highlighted areas, plus change the word jquery to plugins which is right after ‘custom_’ in the code.

Next… if you already saved your custom JavaScript file(s) as directed above, you should be able to highlight the URL link only, then copy and paste it into your browser address bar, then hit enter, to see if the file exists.

If it doesn’t show, double-check your URL address… if you had to modify the URL address to get it to work, copy and paste the modified URL back into your footer.php file.

If your file(s) exists in your browser, SAVE your footer.php File!

Click this link to bypass the Genesis and Thesis information.

– – – –

Begin – Create Custom JavaScript File Link for the Genesis or Thesis Theme

As you did in STEP 4, navigate to your functions.php file located within your WordPress theme.

Click on the functions.php file to highlight it, then click on ‘Code Editor’.

NOTE: Some Genesis themes have a ‘footer.php’ file, don’t mess with that file… use the ‘functions.php’.

Once you have your functions.php file open, navigate to the end where you added the ‘Handle Locator’ code before.

Grab a copy of the scripting below hovering your mouse over the box then clicking on the ‘double page’ icon.

NOTE: If you created the custom files exactly how I mentioned earlier, you will only need to change the domain name and the numerical date to what you have chosen.

If you have modified your link, click SAVE CHANGES to the functions.php file.

NOW go to your site’s source code, locate these files in the footer, and click on each link to make sure it shows your combined JavaScript file.

If they work, Move On to ‘Disabling Your Existing JavaScript’ files…

END – Create Custom JavaScript Link for the Genesis or Thesis Theme

– – – –

STEP 6 – Add the ‘De-Register Handles’ Scripting

Grab a copy of the scripting, the same way you did before, by clicking on the ‘double page’ icon.

Copy the code and paste it within your functions.php file in the same manner you did the ‘Handle Locator’ scripting, a couple of lines below the ‘JavaScript Handles’ line from STEP 4 – ‘Find Each External JavaScript Handle’.

DO NOT Save the Changes After Pasting the Code into Your functions.php File!

Before you save the file, we will need to modify the scripting for testing purposes.

The first line that says “wp_deregister_script( ‘jquery’ );” can stay, lines 7, 8 and 9 shown from directly above can be removed (leaving the curly brace in tact).

DO NOT Save the File yet!

The only reason I gave you the whole piece of code including, lines 7 thru 9, was so you can see what the finished product would look like if those handles, that are shown, were yours.

What you will be doing next is checking to see how many external jQuery files disappear by using the handle from line #6, ‘jQuery’, once you Save the file.

DON’T SAVE YET!

There are many jQuery files that will disappear using this jquery handle, so we need to document which ones those are…

Make sure you are LOGGED OUT of WordPress… Visit the Source Code for your site…

NEXT… with your source code page open, hit Ctrl + F on your keyboard to open the ‘Find’ box.

In the Find box, type ‘jquery’ then click the down arrow to see how many lines of ‘external jquery’ files (ones with links) there are…

ARE any of them showing up in the footer?

With a mental note, or documented one, you will need to know which ones disappear once you save the functions.php file.

GO AHEAD AND SAVE YOUR FILE… now, refresh your source code page.

Which ever file(s) disappeared, and are in your footer, you will need to add each one to your custom JavaScript file using the instructions from above.

To see the files that disappeared once again, you will need to remove the De-Register Handles script from the functions.php file and Re-Save it.

Once you have added the files from the footer that were removed by using the De-Register Handles script, into your custom JavaScript file, come back to STEP 6 and begin again.

Instructions to ADD JavaScript Files to your custom JavaScript file.

Again… if you have more than 1 custom file, which most likely you do, do everything in your power to keep the order of the JavaScripts as mentioned earlier.

Moving ON…

Whether you had to add some JavaScript files from your footer to your custom file or not…

You can now either re-copy the De-Register Handles code from above and re-enter it or duplicated the line, wp_deregister_script( ‘jquery’ ); as many times as you have handles.

Is the ‘}’ (curly brace) still below the final scripting as the ‘DeRegister Handles’ Scripting shows above?

If not, your site will have a heart-attack… make sure it’s there.

At this point, you can add the ‘handles’ that are listed in your ‘JavaScript Handles’, line 309, into the yellow highlighted areas as shown below.

I personally like to place the handles in the order that the JavaScript shows in my source code, but it really doesn’t matter the order for this scripting.

Go S L O W when doing this… one little mess up and it will break the file, and your site will have a stroke.

Just make sure that the apostrophes, before and after the handle name, are still there once you’ve replaced the word(s).

BEFORE YOU SAVE THIS FILE, make sure to compare it to the screenshot above… make sure the Parenthesis, Apostrophes and Semicolons, along with the Curly Braces are in tact.

To save yourself some headache, copy/paste the modified scripting from your functions.php file, to a Word or Notepad document… this way, if for some reason, you hit save and your site is broken, you can immediately remove the scripting from the functions.php file and re-save it to bring your site back to life.

If this happens, you will at least have a copy of your scripting from the functions.php file to look at for errors before attempting to put it back.

If you have checked thoroughly and are confident with your modifications, click SAVE CHANGES to your functions.php file and TEST YOUR SITE.

REMINDER: Each time you update a WordPress plugin from your ‘Plugins Update List’, or the WordPress Core itself, you will need to update the custom JavaScript file that is affected by the update, then you will need to re-save it with the new date you modified it on. After that, you must update your Footer URL link with your new number, that you created in STEP #5.

– – – –

Next… You Are DONE… Let’s Check Everything!

If you have gone ahead and saved your functions.php file, tested your site, and all appears OK, you should be able to look at your ‘source code’ and see the added link(s) for your custom JavaScript files in the footer of your site.

AND… the JavaScript files that you combined into 1 or 2 custom files should have disappeared from the source code, as shown highlighted in yellow, in the first ‘source code’ screenshot at the beginning of the article.

NOTE: Any remaining JavaScript files that are shown in the footer, you will need to be content with… unless you would like the task of searching for the ‘handle’ within the scripting of the plugin… not necessarily an easy thing to do.

– – – –

Closing Comments – How to Combine JavaScript’s Into 1 or 2 Files

Combining JavaScript files may be a time consuming and daunting task, but putting forth the effort is one more step towards achieving the goal of a high-performance, WordPress web site.

By removing every possible HTTP request from outside sources, and with the assumption that you have stable and reliable web hosting, you will remove the chances of high-traffic bottlenecks to the point of non-existence.

In Future Articles – We will be discussing the Remaining Steps in greater detail, so be sure to put your email address in the box below for notification.
YOUR Turn… What WordPress Performance Issues Have You Been Facing with Your Site? Slow Loading Times? Takes Forever to Connect? Share YOUR Thoughts Below!

Tags:

Comments (14)

Trackback URL | Comments RSS Feed

  1. Thanks for a marvelous posting! I actually enjoyed reading it, you happen to be a great author.I will always bookmark your blog and will often come back at some point. I want to encourage you to ultimately continue your great posts, have a nice afternoon!

  2. Whitney says:

    Hi, so after so many Google searches and so many stressful plugins later I found your site. Seriously, this whole thing is so awesome. Definitely worth the time it took! I’ve been able to combine my JS files, would I be able to use this same technique with my CSS files?

    Again, thank you, such an awesome and detailed post!

    • John Edwards says:

      Hey Whitney,

      I am sorry I am replying so late… I’m glad you were able to combine your JavaScript files, every little bit helps.

      I see you found the “Combining CSS Stylesheets” article…

      Thank you for stopping by and commenting about your success.

      Have an amazing day.

      John

  3. Wilmer says:

    This post is amazing. Thank you so much for this.

    I just wanted to ask you something that got me confused:

    There are some javascripts on my website with src pointing to another webste (e.g. my website is mydomain.com and the javascript’s src is z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US)

    Do I also add these to the same file as the rest of my js?

    Thanks!

    • John Edwards says:

      Hey Wilmer,

      Unfortunately you have no control over another JavaScript source and cannot add it to your combined scripts.

      You most likely are using a plugin or something similar that requires information from an outside source.

      John Edwards

  4. Adam says:

    Hi John,

    Absolutely brilliant series of articles…precisely what I was looking for.

    I just have a quick question regarding the scripts that get moved.

    I have a LOT of plugins…and somehow they all worked by putting them into the footer, which is great. I’m at the step where I have to start copying them across into the combined files but some of my scripts aren’t THAT simple.

    I have some like this:

    var OptimizePress={“ajaxurl”:”https://www.thetrainingbuddy.com/wp-admin/admin-ajax.php”,”SN”:”optimizepress”,”version”:”2.5.4.2″,”script_debug”:”.min”,”localStorageEnabled”:””,”wp_admin_page”:””,”op_live_editor”:””,”op_page_builder”:””,”op_create_new_page”:””,”imgurl”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/images/”,”OP_URL”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/”,”OP_JS”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/js/”,”OP_PAGE_BUILDER_URL”:””,”include_url”:”http://www.thetrainingbuddy.com/wp-includes/”,”op_autosave_interval”:”300″,”op_autosave_enabled”:”N”,”paths”:{“url”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/”,”img”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/images/”,”js”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/js/”,”css”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/css/”},”social”:{“twitter”:”optimizepress”,”facebook”:”optimizepress”,”googleplus”:”111273444733787349971″},”flowplayerHTML5″:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/modules/blog/video/flowplayer/flowplayer.swf”,”flowplayerKey”:””,”flowplayerLogo”:””,”mediaelementplayer”:”http://www.thetrainingbuddy.com/wp-content/plugins/optimizePressPlugin/lib/modules/blog/video/mediaelement/”,”pb_unload_alert”:”This page is asking you to confirm that you want to leave – data you have entered may not be saved.”,”pb_save_alert”:”Please make sure you are happy with all of your options as some options will not be able to be changed for this page later.”,”optimizemember”:{“enabled”:false,”version”:”0″}};

    and:

    var wc_add_to_cart_params={“ajax_url”:”/wp-admin/admin-ajax.php”,”wc_ajax_url”:”/recipes/turkey-sweet-potato-meatballs/?wc-ajax=%%endpoint%%”,”i18n_view_cart”:”View Basket”,”cart_url”:”http://www.thetrainingbuddy.com/basket/”,”is_cart”:””,”cart_redirect_after_add”:”no”};

    You mentioned that it is important to keep them in the same order but it looks as if these have variables as to when the URL is used. I can see it causing issues if I just include the URL in the combined file but you did mention keeping them in order so I’m not sure the best way to proceed.

    What would you advise?

    Again, thank you for your assistance thus far, and thank you in advance.

    • John Edwards says:

      Hey Adam,

      To be honest… on the subject of combining JavaScripts, you are Golden, you don’t need to worry about going through the trouble. I ran your site through Pingdom and all of your JavaScripts are loading in Parallel, which is a good thing. Below is the link of your test… take a look at what is known as the Waterfall (File Requests) and you will see that the files ending in “.js” are all loading in parallel in under a 100 milliseconds due to the Content Delivery Network that you are using.

      https://tools.pingdom.com/#!/dEMgg3/http://www.thetrainingbuddy.com/

      The other Javascripts that you showed me are not external JavaScripts, so you should not consider putting them in a single JavaScript file unless you know where to remove the call for the JavaScript file which is a whole other animal in itself.

      One thing that made this particular Pingdom test so long, which was 8.28 seconds, was that you had a “Connection error, no response from the server”. I ran the test a second time and with the same results… you have a Connection Error with the Server. I would run the test again and hope for different results, that it was just an isolated issue. If you continue having this connection error then you will need to call your Web Hosting provider and speak with them. They may not be able to tell you anything because they will probably say that it’s your site causing the issue, so it might be time for a new Hosting Provider if they do.

      Now… you have other issues that are slowing down your site, and it is definitely not the JavaScript. Your page size alone is 3.7 MegaBytes which is pretty big. Take a look at the Pingdom test and familiarize yourself with everything there and make changes accordingly. My personal opinion is if you want to make your site faster, then you would be to concentrate on the other issues, and not worry about the tedious work of combining your external JavaScripts.

      I hope this helps…

      John Edwards

      • Adam says:

        Hi John,

        Thank you so much for your reply.

        I hadn’t noticed that the css and js loaded so quickly! I just presumed that because they were creating so many requests, that’s what was slowing it down. A developer had actually told me that too which is frustrating. I thought it made sense as I do have a LOT of plugins (40+) but I need them all. I’ve already had a cull to get to that number.

        I’ve been trying all sorts to try and speed things up. I’ve just upgraded to a VPS (from shared) and I’ve added the CDN which looks to help a bit.

        I’ve just had a look at your pingdom link…in regards to the connection error, is is the “glyphicons-halflings-regular.woff2” that you’re talking about? I’m not actually too sure what that is but it doesn’t look as if it’s actually affecting my site. On the waterfall it’s saying that it only slowed it down by about 100ms too.

        When I arrange the waterfall by load time, there are four main culprits from what I can see, and it’s really just “wait” time. The admin-ajax.php had a load time of over 6 seconds for instance. Do you know what this “wait” means? Is this the server responding? Or is the file just poorly written or something? How would I go about cutting down this “wait” time as that looks to be where the issues are.

        The page size is quite large, with over 2mb of it coming from images. Once image took quite a long time to load which I will change to see if I can cut that down but, thanks to the CDN, it looks as if the images all load pretty fast. As I said, it seems to be just this “wait” issue and mostly from four key files.

        What would you advise? Again, I very much appreciate your help.

  5. Staysmallbiz says:

    Hi,
    Thanks for the tutorial, but after going through the steps, it turned out to be slower (from 9s to 18s…), with the two custom javascript files having the longest loading time and unknown error on pingdom speed test.
    Besides, in my case the easy method in step 1 did not work. I am confused if I have to remove these scripts before going down the combine external files steps.
    May you give me some advice? Thanks!

  6. Evripidis says:

    Great tutorial.
    I already used your “combine css stylesheets ” with great success and got 4%-8% up in my metrics.
    I can complete your javascript tutorial and I would apreciate a little help.
    I am using despacho theme with revolution slider. Revolution slider need jquery on head which I put it in header.php but when I put the code in functions.php to remove all javascript from head and set them to footer it removes jquery as well.
    What I am doing wrong?

    • John E says:

      Hi Evripidis,

      To answer your question, you are doing nothing wrong… the script to move the JavaScript to the footer was a test before combining JS files (I.E. “STEP 1 – What YOU Must Do First!”).

      You found out that your site will not work moving the jQuery files to the footer, so this tells you that if you follow through with combining your JS, you will not add the jQuery files to the custom file, but manually install them within your Head section so your theme’s slider works.

      An alternative for combining your JavaScripts manually to your footer works well with the W3 Total Cache plugin, if you choose.

      I have yet to write an article based on the W3 Total Cache plugin, but here is a great article that can explain the procedure for combining and moving the files to the footer, leaving your jQuery alone to remain in the Head section: http://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/

      I hope I have helped!

      Let me know how it goes…

      John

Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to a friend