PageSpeed Insightsの測定結果ではいろいろと改善点が示されてしまったが、ひとまず、「修正が必要」と書かれている一番上から。
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptとCSS の排除」という項目に書かれている、「レンダリングをブロックする JavaScriptの除去」から対応してみた。
検討の経緯
修正内容の理解
PageSpeed Insightsの測定結果において、この項目は、モバイルでは「修正が必要」となっているが、パソコンにおいては「修正を考慮」のランクになっていた。
ネットでいろいろ調べてみると、「スクロールせずに見えるコンテンツ」とは、サイトで一番最初に表示されるトップページのこととわかった。
「修正方法を表示」のリンクを開くと、以下の画面が表示される。
ここでは、「このページには、レンダリングをブロックするスクリプトリソース が 2 個、CSSリソースが 16 個あります。これが原因で、ページのレンダリングに遅延が発生しています。」とあるうちの、まずはスクリプトリソース2個を解消することになる。
次に「レンダリングをブロックしている JavaScriptを除去」をクリックすると、
ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScriptをダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。
との解説に続き、
スクロールせずに見える範囲の表示に必要な JavaScriptはインライン化し、ページに機能を追加するのに必要な JavaScriptは、スクロールせずに見える範囲のコンテンツが配信されるまで遅延させてください。
と解決策が書いてあるのだが、私にはさっぱり意味がわからない（笑。
この後に書かれているインライン化の具体例は言うに及ばす・・。
調べていくと、修正提案にある2つ、つまり除去すべき2行の記述は、jQueryというJavaScriptの簡易版で、プラグインを動かすプログラムに関するものらしい。
そして、サイト表示でサーバーのデータ読み込みの際（これをレンダリングというようだ）、JavaScriptがあると、そのたびにそのファイルを読みに行って忙しいらしいのだ。
このファイルを往復する分だけ遅延が生じるので、このJavaScriptを、もともと読み込むファイルに書き込んで一本化するように、というのが、インライン化の意味のであることがわかった。
修正方法の選択
「スクロールせずに見える範囲」より下の表示に移す、つまりプログラムをhead部分ではなくfooterに移動するという方法についてはたくさんの解説があった。
自動で処理してくれるプラグインとして、「Head Cleaner」や「JavaScript to Footer」などを紹介している記事も多い。
しかし、私はあまりプラグインを増やしたくなかったので、結局、あまりよくわからないまま、次のサイトを参考にさせていただき対応することにした。
「レンダリングをブロックしている JavaScriptをフッターに移動させる」
なおこちらでは、footerにプログラムを移す際に、WordPressに置かれているjQuery本体を利用せずに、外部サーバーから配信させるCDN（Contents Derivery Network)ということについても説明されていた。
CDNを導入して、スペックの高いgoogleのサーバーから一部のデータを配信することで、自分のサーバーの負荷を軽減し、表示スピードもさらに高速にできるとのこと。
コピー用のコードも併せて記述されていたので、そのまま適用させてもらうことにした。
手順の詳細
詳しくは参照サイトにていねいに解説されているので、そちらを読んでいただいた方が早いだろうが、手順としては要するに、WordPressダッシュボードの「外観」の「テーマ」から「テーマの編集」に進み、functions.phpを開いて以下のコードを貼り付ければよかった。
if (!is_admin()) {
function deregister_script(){ // 登録の解除
wp_deregister_script(‘jquery’);
}
function register_script(){ // CDNに変更して登録
wp_register_script(‘jquery’, ‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’, false, ‘1.12.4’, true );
}
function add_script() { // 登録したjqueryを出力
deregister_script();
register_script();
wp_enqueue_script(‘jquery’);
}
add_action(‘wp_enqueue_scripts’, ‘add_script’);
}
なお、コード内にある「1.12.4」の部分2カ所は、Google Hosted Librariesにあるjquery「1.x snippet」のバージョン番号なので、サイトを確認して最新のものに書き換えれている（2017年5月現在）。
なお、私が使っているsimplicity2というテーマでは子テーマもダウンロードできるので、すでにそこにこのファイルがあるが、子テーマがなければ、新たにこのfunctions.phpファイルを作りそこに書き込む方がいいと思う。
評価の改善結果
この処理をして、再度PageSpeed Insightsで測定すると、「レンダリングをブロックする JavaScript の除去」という項目はたしかになくなっていた。
評点についても、モバイルで63から72、パソコンで71から76にアップした。
CDNについては、Autoptimizeというプラグインにも「CDNオプション」という項目があって気になるので、いずれ改めて確認してみたいと思うが、ひとまず今の時点ではいいことにして、次の改善点に進むことにした。
