Optimize WordPress javascript placement
YSlow rule 6: Put JS at the bottom. This is a very simple rule, but it has noticeable improvement on actual page loading time. Because javascript in head will block both page elements loading and rendering. The placement of javascript in WordPress 2.7.1 is hard coded to be placed in html head, because most ajax plugin would expect javascript library to be fully loaded before page load. If you use WordPress without any fancy ajax related plugins, it is very possible to load javascript at bottom of every page without breaking any blog function. I also tested it with Lightbox 2 without any noticeable problems. The measurable page loading time difference is near half a second when browser cache is empty. Before you proceed to make any change to WordPress php files, I would recommend you to do a full backup of database and related php files. Now open ‘wp-includes/default-filters.php‘, search wp_print_scripts. Near line 184, you should find,
add_action('wp_head', 'wp_print_scripts');
Change this to
add_action('wp_footer', 'wp_print_scripts');
Clear your WordPress page cache and test your WordPress. Ideally one could write a plugin hooking into filter ‘print_scripts_array’ to remove plugins from html head conditionally. But I have not found one yet. There are a lot other methods to safely speedup javascript loading in html header. Unfortunately they are not very easily implemented and cross different browsers. Steve, author of Yslow had a post and talk explaining the whole situation.
RSS
Follow
yup, you are right. Based on YSlow, we must js at bottom but there is no option in wordpress to allow us to do that.
You can actually do this in a dirt-simple plugin file without modifying core:
remove_action(’wp_head’, ‘wp_print_scripts’);
add_action(’wp_footer’, ‘wp_print_scripts’, 5);
Google “remove_action wp_print_scripts” for more examples.