さくらレンタルサーバー(共用)でのWordPress表示速度改善方法(JavaScript編)

表示速度改善を行なおうと思いFirebugのYslowやGoogleのPageSpeedなどのツールを使うと、
項目としてJavaScriptがソース上部に来ていると「よくないよ」と言われてしまいます。

これをなんとか解消したいと色々やってみたのですが、
プラグインが自動的に独自のJSなどを吐き出している場合が多くあまりうまくいきませんでした。

 
そこでテンプレートにあるfunctions.phpを使って、
プラグインのJSの場所を強引に変えることにしました。

基本方針編でも書きましたが、なぜならプラグイン自体をハックしてそれを実施したとしても
プラグインがアップデートされればせっかくハックしたソースも無くなりそうだったからです。

functions.phpならばテンプレートに紐づいているものですし、
プラグインをアップデートしても関係ないだろうということです。

JavaScriptの出力箇所をフッターに移動

実際のソースはこのような形です。

remove_action('wp_head', 'wp_print_scripts');
add_action('wp_footer', 'wp_print_scripts');

wp_headでJavaScriptを吐き出すwp_print_scriptsの処理を一回消して、
wp_footerに付け加えるようにします。

WordPressが持っているJavaScriptをGoogle Libraries APIに変更

さらに表示速度改善として、WordPressにバンドルされているJavaScriptではなく、
Google Libraries APIのJavaScriptを呼びこむようにします。

add_action('template_redirect', 'wp_js_delete');
add_action('wp_footer', 'google_js_footer_load', 1);

wp_js_deleteでWordPressが吐き出しているJavaScriptをまず削除してしまいます。

そのあとで必要なJavaScriptだけ、
Googleが提供しているGoogle Libraries APIをフッターで呼びこむようにgoogle_js_footer_loadで指定します。

 
作ったfunctionは以下の通りです。

function wp_js_delete(){
  //wp用のJSを利用しない
  wp_deregister_script('jquery');
  wp_deregister_script('jquery-form');
  wp_deregister_script('prototype');
  wp_deregister_script('scriptaculous-effects');
  wp_deregister_script('scriptaculous-builder');
  wp_deregister_script('scriptaculous');
  wp_deregister_script('swfobject');
}

function google_js_footer_load(){
  wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
}

プラグイン用のJavaScript個別対応

プラグインのJavaScriptは必要なページは少ないのにもかかわらず、
全ページで呼びこんでしまうものもあります。

それらは個別に以下のように対応しました。

1. 全ページでは必要ないプラグインを洗い出す。
2. そのプラグインの中で、JSを呼び出しているWordPressのタグを見つける
3. functions.phpで必要なページだけ吐き出すように指定する

add_action('template_redirect', 'plugin_js_delete');

function plugin_js_delete(){
  //プラグインのJSを利用しない
  if(!is_page('contact')){
    wp_deregister_script('si_contact_form');
  }
}

Fast Secure Contact Formプラグインをお問い合わせ用に使っているのですが、
contactページ以外は呼びこむ必要がないため、plugin_js_deleteでそれ以外は読み込まないようにしました。

 
もっとスマートなやり方があるとは思うのですが、
とりあえず現状はこの方法をとっています。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス