この記事では、PageSpeed Insightsで指摘をつけた、レンダリングをブロックするJavascriptを排除する方法について記載したいと思います。今回は、思考錯誤をたくさんしました。色々試しましたが、一番簡単解決方法は、Javascriptの読み込み属性に、「async属性」を追加することです。改善自体は、 functions.phpに手を入れます。また、CSSについては、プラグインで解決を図ります。
改善前
PageSpeed Insightsの状況は次の画像のとおりです。「レンダリングをブロックするJavaScript」に3本ピックアップされています。
レンダリングをブロックする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を排除する方法を記載します。最後の1項目ということで思いのほか苦戦しました。結局「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」を導入する際も引っかかったのですが、プラグインどうしの相性があるようです。複数のプラグインを導入すると、守備範囲がかぶって本来の実力が出せなかったり、レンダリングが崩れてしまうものがあります。より良い方法が見つかりましたら、ご紹介したいと思います。
コメント
[…] 詳しくは、コチラのサイトを参照して下さい。 →WordPressでレンダリングをブロックする~ | しもた帳 […]
はじめまして。
とても参考になりました。
ところで、
プラグインのAbove The Fold Optimizationは、現在公開停止(規約違反のため)?となってきますが、
Githubからはダウングレード可能のようです。
プラグインのAbove The Fold Optimizationは使用しても問題ないのでしょうか?
お忙しいところ恐れ入りますが、
ご教授いただけましたら幸いです。
WordPressのVersion5とプラグイン「Above The Fold Optimization」の組み合わせは試したことがありません。基本的には使えると思いますが、テスト用の環境で一度お試ししてから使用されることをおすすめします。
早急なご返信誠にありがとうございます。
規約違反のためというのは、
どういうことなのでしょうか?
なにか危険なコードなどがあるということなのでしょうか?
しもたさん@エンジニア兼ブロガー様は、
現在、Above The Fold Optimizationを使用していらっしゃいますか?
度重なる質問誠に申し訳ありません。
本業に集中していたので、1年以上放置してしまいましたね。
ごめんなさい。
WordPressのPluginの規約違反については、次のガイドラインに従っていないということですね。
https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/
現在の私のサイトでは、「Above The Fold Optimization」を利用していません。
[…] https://shimota.app/wordpress%E3%81%A7%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%92%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%99%E3%82%8Bjavascript%E3%82%92%E6%8E%92%E9%99%A4%E3%81%99%E3%82%8B%E6%96%B9/ […]
嘿,感謝您的分享,您能否確認是相同的插件https://github.com/wp-plugins/above-the-fold-optimization
等待你的回复。
是一样的