jQueryの読み込み位置を変更し、PageSpeedInsightsの問題を解消する

諸事情のため、ここ最近更新していなかった。
というか触れてもいなかったこのサイト。

モバイルフレンドリーにしないとダメという知らせは耳にしていた。
ただ、以前ウェブマスターツールで確認したときは「モバイルフレンドリーである」という評価だった。
そのためそこまで焦る必要もないだろう。人もいないし。と思っていた。

しかし、久しぶりに確認してみたところ、このブログは「フレンドリーではない」という評価に変わっていた。

使用しているテーマはSTINGER5。
このテーマはレスポンシブウェブデザインであったはず。なぜフレンドリーではないという評価なのか？

robots.txtでブロックしていた

問題はrobots.txtでアクセス拒否を記述していたため。
結果、Googlebotが必要なリソースにアクセスできずレイアウトが崩れた形で判断されたらしい。

とりあえず、アクセスできないと文句を言われたリソースへのアクセスを許可して再び判定したところ、「モバイルフレンドリーである」という評価をもらえたのでよしとする。

ひとつ問題は解決した。
だが、Googleさんによると、まだまだこのサイトには問題が山積みらしい。

PageSpeedInsightsで指摘された問題を解決したい

まずは、jQueryの読み込みがヘッダに記述されているのでレンダリングが遅くなるという問題。

調べてみるとfunction.phpをいじればいい模様。
現在利用しているテーマ(STINGER5)のfunction.phpには、次の関数が記述されていた(一番上に)。

function register_jq_script() {
if (!is_admin()) {
$script_dir = get_template_directory_uri();
wp_deregister_script( ‘jquery’ );
wp_enqueue_script( ‘jquery’,’http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’,array(), false, false);
}
}
add_action(‘wp_enqueue_scripts’,’register_jq_script’);

関数リファレンスによると、wp_enqueue_scriptの最後の引数が true の場合フッターにスクリプトを追加してくれるらしい。

function.phpを変更する

それが分かればあとは変えるだけ。
ただし親テーマのfunction.phpを直接変更しても、テーマを更新するとまた変更する必要が出るかもしれない。
そのために子テーマを作って変更箇所だけ記述したいところ。

が、しかしfunction.phpは他のファイルとは異なり、子テーマを読み込んでから親テーマを読む。
そのために、単純に記述しただけでは上書きがうまくいかないらしい。
そこで、次のような流れが必要になる。

１．親のテーマで登録された関数を取り除く
２．代わりの関数を定義しなおす(関数名は変更する)

実際には子テーマのfunction.phpに次のように記述した。

// 親テーマで定義されている関数を削除するための関数を定義
function remove_parent_register_jq_script(){
remove_action(‘wp_enqueue_scripts’,’register_jq_script’);
}
// 削除用関数を登録
add_action(‘init’,’remove_parent_register_jq_script’);
// 代わりの関数を定義
function register_jq_script_child() {
if (!is_admin()) {
$script_dir = get_template_directory_uri();
wp_deregister_script( ‘jquery’ );
wp_enqueue_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’,array(), false, true);
}
}
// 関数登録
add_action(‘wp_enqueue_scripts’,’register_jq_script_child’);

代わりの関数の中身はwp_enqueue_scriptの5番目の引数を true に変えただけ。

上記のfunction.phpを子テーマに配置したところjQueryの読み込みをフッターに移動できた。
まだまだ修正が必要な部分が残っている。
疲れたので今回はここまで。