昨日ちょっとサイトの高速化に足を踏み入れてから，意外と楽しくてちょこちょこ作業してます。
基本はGoogleのPageSpeed Insightsを目標に改善していっているのですが，調べてみると皆さん苦労されているようです。
特に頭を悩ませているのがこの注文。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
今回は，こいつをどうにかして倒してやろうと藻掻くお話です。
レンダリングのブロックって何だ
そもそもウェブページというのは基本的にhtmlで書かれていますが，それだけだと難しい/面倒な部分はJavaScriptとかCSSの技術を使ってhtmlを装飾しています。
で，htmlは基本的に上から順番に読んでいって，読まれた先からブラウザ上に表示されます。これを「レンダリング」と言います。そのままですね。
ところがhtmlを装飾するためのツールであるJavaScriptとかCSSを読む段になると，ブラウザの描画が一時停まってしまいます。なぜって，JavaScriptやCSSだけ読んでも何も描画されないですから。
こういう風に，他をブロックしてしまう処理のことを「同期処理」なんて言ったりします。
で，最近モバイルからの検索を重視しているGoogleは，このちょっとのレンダリングの遅延を嫌っていて，それが先のPageSpeed Insightsのスコアにも影響してくるわけです。確かに，スマホで読み込みに1秒かかったらユーザが離れかねませんよね。
ところでJavaScriptと言えば代表格はjQueryです。私もほとんどJavaScriptの経験はありませんが，いわゆる「かっこいい動きのあるデザイン」には間違いなくjQueryが使われているっておばあちゃんが言ってました！
htmlの描画をブロックしなきゃいいわけですから，基本的な対策としては，最後の方に読み込むようにするのが一番単純です。拡張性で売っているWordPressでは，JavaScriptやCSSをフッターに移動してくれるプラグインすらあったりします。
ただ残念なことに，特にjQueryを代表とするJavaScriptに関しては利用しているプラグインとの相性もあってそんなに上手くいかないことも多いのですね。その場合は，読み込み位置をずらす以外の選択肢を採ることになります。
ただそれも難しいようで，調べてみると「jQueryの読み込み最適化は諦めました」なんてものもあるくらいです。
でもPageSpeed Insightsで警告出たままなのはちょっと切ないので，どうにかする方法を考えてみたいと思います。
jQueryを非同期で読み込む方法
上で，他の処理をブロックしてしまうのが「同期処理」と言いましたが，逆に「非同期処理」というものも存在します。これは，うまーく並行処理して他をブロックしない仕組みです。俗に言う，「バックグラウンドで処理する」と意味は同じですね。
jQuery（などのJavaScript）の読み込みがhtmlレンダリングのブロックをしてしまうのなら，非同期で読み込めばいいじゃない。
そんな簡単な解決策なのですが，意外とそういう取り組みをしている参考サイトが見つかりません。
というのもWordPressの場合はちょっと事態が複雑で，色々なプラグインが勝手気ままにjQueryを読み出すのですが，それら1個1個の読み込み部分のコードを「同期読み込み」から「非同期読み込み」に手修正していくのが大変な手間なわけです。プラグインにアップデートがあった場合には，修正部分がリセットされてもう一度，なんてことにもなりかねません。
そんなわけで，サードパーティー製のプラグイン含め，jQueryの読み込みをフックして非同期化するような仕組みが必要になります。
以上のように状況の把握まではできたのですが，PHPすらまともに書けない私にはちょっと荷が重たすぎる策です。
必死に，同様のことをやっているサイトを探しました。
そして見つけました。
とても詳しい解説が載っているので是非読んでいただきたいのですが，結論から言うと結果私のfunctions.phpはこうなりました。
// 管理画面以外ではGoogle CDNのjQueryを利用する
if (!is_admin()) {
function replace_jquery() {
wp_deregister_script('jquery');
wp_register_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), NULL, false);
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'replace_jquery' );
}
add_filter(
'script_loader_tag',
function ( $tag, $handle ) {
if ( 'jquery' == $handle ){
return str_replace( ' src', ' async defer src', $tag );
} else {
return $tag;
}
}, 0, 2);
この設定の有無によるPageSpeed Insightsの結果も載せておきましょう。左が変更前，右が変更後です。
[foogallery id=”3405″]残念ながらスコアこそ変わっていませんが，警告文からJavaScriptが外れているのがわかります。
（あとはCSSをどうにかすればスコアアップが期待されると思います）
最後に身も蓋もない話になりますが，jQueryといえどもそんなにファイルサイズが大きいわけでもないので，ぶっちゃけ同期的に読み込んだところでオーバーヘッドは大したことはないと思います。
あくまでPageSpeed Insightsのスコアアップのため，すなわちGoogleに気に入られるため，という割り切りも必要かもしれませんが，でも1つでも項目が減るとやっぱり嬉しいものです。
今後も継続的にサイトは良くしてきたいですね。