Mudy’s Blog

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.

 Tweet
 

Yejun Web javascript, js, optimization, website optimization, wordpress, yslow

The default installation of WordPress use full version of css and javascript library. In order to minify all of these files, I wrote this bash script to minify all of them. There will be no progress bar while minifying, so be patient.

cd wordpress
find -H . -type f -writable  \( -name \*.css -o -name \*.js \)  \
-exec sh -c "yuicompressor {} -o /tmp/yui.tmp && mv /tmp/yui.tmp {}" \;

This will only work under POSIX system.
Findutils should be included in most popular Linux distros.
Yuicompressor can be downloaded from here.

 Tweet
 

Yejun Linux bash, css, javascript, js, minify, website optimization, wordpress, yui, yuicompressor