Ask your WordPress questions! Pay money and get answers fast!

Reducing HTTP Requests for Javascript Files in WordPress

SOLVED

I have a Wordpress Buddypress site up here - [[LINK href="http://pefriends.com"]]pefriends.com[[/LINK]].

Here are all the javascript files in the header - [[LINK href="http://cl.ly/423M291o3S0Q1H1p1u2F"]]http://cl.ly/423M291o3S0Q1H1p1u2F[[/LINK]]

I have the W3 Total Cache plugin, but I've often found that combining javascript files using that plugin results in conflicts, and then things don't work.

Would someone be willing to help me reduce HTTP requests by combining and minifying some of these javascript files so that page load times aren't as slow, and without any conflicts between the javascript files?

Thanks for your help!

2011-07-13 by Spencer Barfuss

Answers (5)

2011-07-13

Romel Apuya answers:

try [[LINK href="https://addons.mozilla.org/en-US/firefox/addon/yslow/"]]YSLOW[[/LINK]].. if your only main concern is to make the site load faster..

Spencer Barfuss comments:

I already use YSlow, and that's why I'm wanting to combine and minify the javascript files that are loading in the <head>, and that's why I'm asking for help.

Romel Apuya comments:

try having a condition where in you just load your javascript at pages where you need it..

2011-07-13

Dylan Kuhn answers:

I think [[LINK href="http://wordpress.org/extend/plugins/wp-minify/"]]WP-Minify[[/LINK]] does that, in addition to compressing the scripts.

2011-07-13

Pali Madra answers:

Hello,

Try using MaxCDN (http://www.maxcdn.com/) to speed up the site. There is a nice post at http://bp-tricks.com/featured/the-perfect-cdn-setup-for-buddypress-using-maxcdn-and-w3-total-cache/#comment-174097306 how to implement MaxCDN for WordPress.

This should do the trick for you.

Thanks and Regards,
Pali Madra

Spencer Barfuss comments:

Using MaxCDN won't reduce HTTP requests for multiple javascript files in the header though.

2011-07-13

John Cotton answers:

Hi Spencer

There's a good reason that WordPress doesn't (yet) offer this facility on the front end - it's tricky!

As you have found combining scripts can quickly lead to bugs - and ones that are hard to track down at that.

There are [[LINK href="http://betterwp.net/wordpress-plugins/bwp-minify/"]]some plug-ins[[/LINK]] out there that claim to handle all this, but all the ones I've looked at have drawbacks.

However, there are thing that you can do on your site straight away that will have an impact.

1/ Move the scripts to the footer - the page will load more quickly since the browser won't be spending time retrieving external files.
2/ Change the location of common files (eg jquery, jquery-ui) to Google APIs (use wp_deregister_script and then wp_register_script). This will increase the changes that a visitor has a local cache of that file already from another site.
3/ Manually combine those files that you have complete control over - ie your theme files. I note that you have three files coming from the theme folder - just cut and paste those into one and you'll instantly save your self 2 round trips.
4/ On Jquery ui, you can get a custom roll up of the parts you need from the UI site (reducing your three calls to one). However, this has the downside of not being able to move this load off to Google APIs (personally, I'd do the latter since users will get the benefit of the caching and I can the benefit of reduced server load!)

Hope that helps.

JC

Spencer Barfuss comments:

Thanks, John. I might just have to hire someone to do this. It seems like the theme javascript files and plugin javascript files are outputting into the header automatically. I'm not sure how to redirect that output to the footer before the </body> tag, but I'm well aware that doing that helps page load times.

Wish I knew more about this stuff...

2011-07-13

Jerson Baguio answers:

Try WP JS http://www.halmatferello.com/lab/wp-js/
It will allow your javascript files into a single file