WordPressでレンダリングをブロックするJavascript/CSSを排除する方法

この記事では、PageSpeed Insightsで指摘をつけた、レンダリングをブロックするJavascriptを排除する方法について記載したいと思います。今回は、思考錯誤をたくさんしました。色々試しましたが、一番簡単解決方法は、Javascriptの読み込み属性に、「async属性」を追加することです。改善自体は、 functions.phpに手を入れます。また、CSSについては、プラグインで解決を図ります。

改善前

PageSpeed Insightsの状況は次の画像のとおりです。「レンダリングをブロックするJavaScript」に３本ピックアップされています。

レンダリングをブロックするJavascriptを改善する

functions.phpの修正

やり方は、なんでも良いのですが、「functions.php」の最後尾に以下のコードを追加して保存します。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
    return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

レンダリングをブロックするJavascriptの改善後

「functions.php」にコードを追加した後に、PageSpeed Insightsで計測してみると、「レンダリングをブロックするJavaScript」がなくなっています。

参考）そのほかの修正方法としてPHP自体を改修することを考える

WordPressのPHPを直接編集する

使用していないJavaScriptを探し出す

Grepコマンドを使用して調査をすると、外部サイトのJavaScriptを読み込んでいることがあったり、デッドリンクになっているJavaScriptが存在します。

grep -r 検索文字列 ディレクトリ

JavaScriptを指定している関数を書き換える

書き換え方は、イメージできていないのですが、JavaScriptをPHP上で読み込む場合、次のPHPに記載がありました。このPHPを残しておきたいと思います。

レンダリングをブロックするCSSを改善する

PageSpeed Insightsで指摘をうけた、レンダリングをブロックするCSSを排除する方法を記載します。最後の１項目ということで思いのほか苦戦しました。結局「Above The Fold Optimization」というプラグインで解決をしました。このプラグインは、あまり紹介している人がいませんね。私のサイトにはピッタリだったのに、びっくりです。いつもより詳しめに説明を書いてみます。

Above The Fold Optimizationは、どんなプラグイン？

プラグインインストール時の説明には、次のように書かれています。

このプラグインは、最高のウェブサイトのパフォーマンスを達成するためのツールとして作成し、GoogleのPageSpeed Insightsで100点を達成できるよう、設計しています。

ただし、このプラグインは単純なオン/オフだけでは、それはできません。このプラグインを使用して様々なスピードに影響する様々なものを調べてみましょう。
(Above The Fold Optimizationのイントロダクションより)

つまり、プロ用のツールだということですね。使いこなせば簡単に、サイトの表示スピードをアップさせられると書かれています。

このプラグインでリンクが張られているテスト

調査用のサイトとして、以下のリンクがプラグインの設定画面に貼られています。私は、Googleしか見えていなかったので、半分以上知りませんでした。。

• PageSpeed Insights
• モバイルフレンドリーテスト
• Sucuri Load Time Tester
• モバイルサイトの読み込み速度とパフォーマンスをテストする
• WebPagetest
• GTmetrix
• SecurityHeaders.io
• SSL Server Test
• DSN Test
• HTTP/2に対応しているかテスト

今回の目的とその設定

ちょっと調べてみると高機能ですが、今回「Above The Fold Optimization」プラグインを導入する目的は、レンダリングをブロックするCSSを排除することです。私のサイトの場合は、下記の設定（CSSタブの赤い四角)を行うだけで、レンダリングをブロックするCSSを排除することができました。

設定後のPageSpeed Insightsの結果

パソコン版のほうは、レンダリングをブロックするJavaScript/CSSを排除してくださいと出ますが、モバイル版のほうは、警告がなくなりました！得点も次のようになっています。得点もだいぶ改善されてきましたね。

まとめ

色々試行錯誤しながら、PageSpeed Insightsの指摘を解決することができました。モバイルのポイントは、最初に比べると20点もアップしています。

1. ブラウザのキャッシュを活用する
2. サーバーの応答時間を短縮する
3. 画像を最適化する
4. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
5. CSS を縮小する
6. JavaScript を縮小する

しかし、まだまだ100点には遠いですね。調べながらわかったとことして、「PageSpeed Insights」はスピードの評価は意外と甘い観点で採点されていることがわかりました。

それから、プラグイン「Above The Fold Optimization」を導入する際も引っかかったのですが、プラグインどうしの相性があるようです。複数のプラグインを導入すると、守備範囲がかぶって本来の実力が出せなかったり、レンダリングが崩れてしまうものがあります。より良い方法が見つかりましたら、ご紹介したいと思います。