この記事では、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点もアップしています。
ブラウザのキャッシュを活用する- サーバーの応答時間を短縮する
画像を最適化するスクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除するCSS を縮小するJavaScript を縮小する
しかし、まだまだ100点には遠いですね。調べながらわかったとことして、「PageSpeed Insights」はスピードの評価は意外と甘い観点で採点されていることがわかりました。
それから、プラグイン「Above The Fold Optimization」を導入する際も引っかかったのですが、プラグインどうしの相性があるようです。複数のプラグインを導入すると、守備範囲がかぶって本来の実力が出せなかったり、レンダリングが崩れてしまうものがあります。より良い方法が見つかりましたら、ご紹介したいと思います。
コメント