【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介
目次 [非表示]
「どうせなら100点にしようよ！」というお声が聞こえてきそうですが…。
それはさておき、最近ではページの表示速度がこれまでよりもより重要視されていて、PageSpeed Insights を活用する方も増えてきています。WordPressは動的なCMSということもあり表示速度があまり速くありませんので、
- キャッシュプラグイン
- 画像の軽量化
上記のような工夫をしてらっしゃるのではないでしょうか。
ですが、PageSpeed Insights で注意されがちな項目はそれだけではありません。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」というこの項目がなかなか厄介でして、今回はこの項目を解決する方法をご紹介います。
内容は２つの指摘になります。
「レンダリングをブロックする JavaScript を除去してください」
「次のCSS 配信を最適化してください」
それぞれ、解決方法が異なりますので、順にご説明します。
レンダリングをブロックする JavaScript を除去
WordPressで構築されたウェブサイトの場合、ほとんどの場合、下記のJavaScriptを指摘されるはずです。
https://webkikaku.co.jp/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4
https://webkikaku.co.jp/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
実はこの二つ、WordPressがwp_headに自動で呼び出すJavaScript。まずはこれから解決します。解決方法はとても簡単で、function.phpに以下を追記するだけ。
1 2 3 4 5 6 7 8 | 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 );} |
行っていることは、
- 管理画面意外で適用する
- jquery.min.jsは非同期の対象外にする
- それ以外のJavaScriptはasync属性を付与して非同期にする
この３つです。async属性は、
<script type=”text/javascript” src=”〜〜
こうやって記述されているJavaScriptを、
<script async type=”text/javascript” src=”〜〜
このように記述することで、非同期で読み込むことができる方法です。
もしこれで解決しないJavaScriptがあれば、直接asyncをソースに記述することで解決します。
（参考）
WordPressでレンダリングをブロックするJavascriptを排除する方法
次のCSS 配信を最適化してください
こちらは難しいのでプラグインを使うことをオススメします。
Autoptimizeというプラグインを今回は使用します。
Autoptimize の設定方法
まずプラグインの設定画面に移動します。
「高度な設定を表示」をクリック。
「CSS オプション」からオプションにチェックしていきます。
- CSS コードを最適化
- インラインの CSS を連結
- すべての CSS をインライン化
この３つにチェックを入れて、最後に「変更を保存してキャッシュを削除」を押して完了です。
このプラグインでは、HTMLやJSも最適化することができます。最適化することで高速化をすることができるのですが、場合によってはウェブサイトの表示が崩れてしまうこともありますので、試す際は、表示や動作に影響が出ていないかよく確認するようにしてください。
おわりに
解決が大変なレンダリングブロック問題ですが、解決することで大きく点数が上昇します。是非トライしてみてください。
東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
１０００サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。
どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。
