How to determine what js files are being used by my WP Theme, to remove useless oens

[mikeman]

I’m using WP and WooCommerce with a theme from themeforest.

Over all there’s quite a bit of js files being loaded, I’m trying to reduce http requests and it looks like removing some JS files would be a good start.

I’m also hoping that the JS files that are in-use, on specific pages…. i might be able to determine which pages and simply make some if statement to load them in the header If…. its actually needed and not just on every page.

Could anyone help me figure out how to do this? I’v been told to combine js files but I dont understand that, like if i just copy the contents of one js file, paste in another… then remove the old one.. things will still work? seems like i might be missing something

Thank you!

[PixelClaw]

Just type the link of your website with the active ThemeForrest template and hit “Test Now”! You’ll get a precise timeline in which you can check what is going on under the hood.

http://tools.pingdom.com/fpt/

[mikeman]

I dont understand, I can see all the js files that are loaded but how does this tell me if their actually being used by something on the page?

[Alen]

You can concatenate your .js & .css files using Apache. [See line 510 on HTML5 Bolerplate, .htaccess](https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess) file!

Concatenating files is basically, adding the files together in the order they are required/loaded by the page. So let’s say you have 3 JavaScript files (jquery, slider, and functions).

So:

– jquery (1 request)

– slider (1 request)

– functions (1 request)

---

3 Total

Get merged into:

– app.js [jquery + slider + functions] (1 request)

> like if i just copy the contents of one js file, paste in another… then remove the old one.. things will still work?

Yes.

Same idea with CSS. One important thing to remember with both is to merge them in the right order.

If you are using WordPress you can conditionally load stuff you need. Let’s say you have a gallery page and you need to only load part of JavaScript needed.

Hope that helps,

-Alen

[Alen]

> how does this tell me if their actually being used by something on the page?

You have to figure that out. Are you running any components that rely on JavaScript? Menu?

If you are running small size website, I would just concatenate and pre load all the scripts.

How many files are we talking about? What is the size in KB?

[Author]

Posts