「レンダリングを妨げるリソースの除外」をCSSとJSの遅延読み込み処理で解決する方法
Webページの読み込み速度が遅いと直帰率の上昇やSEOへの悪影響につながります。PageSpeed Insightsでよく指摘される「レンダリングを妨げるリソースの除外」について、CSSとJSの遅延読み込み処理で解決する方法を解説します。
Webページの表示速度を確認する
ブログやサイトの表示速度は、Googleが提供する無料ツール「PageSpeed Insights（外部）」で計測できます。モバイルとPCそれぞれのスコアが表示されます。
計測後にページを下にスクロールすると「改善できる項目」が表示されます。重要度の高いものから順に並んでいるので、上位の項目から対処していくのが基本です。
「レンダリングを妨げるリソースの除外」とは
「レンダリングを妨げるリソースの除外」をクリックして展開すると、以下のような説明が表示されます。
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insights
原因となるのは主にCSSとJSファイルです。展開した項目の中に対処が必要なファイルの一覧が表示されます。たとえばCSSが22ファイル・JSが3ファイルといった具合で、それぞれ遅延時間（ミリ秒）も確認できます。
CSSの影響が大きくても、JSも合わせて対処する必要があります。以下でそれぞれの解決方法を解説します。
CSSの遅延読み込みで解決する
「レンダリングを妨げるリソースの除外」に表示される「.css」ファイルの正体を確認します。一般的には以下の3種類があります。
- WordPressテーマのCSS
- WordPress本体のCSS
- 各種プラグインのCSS：プラグインを有効にするたびhead内に追加されるため増えやすい
プラグインのCSSはサイト表示に致命的な影響を与えないファイルがほとんどのため、読み込みを遅らせても問題ありません。
CSSのIDを調査する
特定のCSSの読み込みを遅らせるには、functions.phpにコードを追記します。そのためにまず対象CSSのIDを調べます。
PageSpeed Insightsで計測したページを右クリックし「ページのソースを表示」を選択します。head内にCSSのリンクタグが並んでいる箇所を見つけ、「id=」の部分を確認してください。
<link rel="stylesheet" id="crayon-css" href=".../css/min/crayon.min.css" type="text/css" media="all">この場合、必要なIDは「crayon」です。末尾の「-css」は不要なので除いてください。同様に遅延させたいすべてのCSSのIDを控えておきます。
functions.phpを編集する
WordPressテーマのfunctions.phpに以下のコードを追記します。ID「crayon」のCSSをhead内から除外してフッターで読み込む処理です。
function my_dequeue_plugin_files(){
wp_dequeue_style('crayon');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);
function my_enqueue_plugin_files(){
wp_enqueue_style('crayon');
}
add_action('wp_footer', 'my_enqueue_plugin_files');複数のCSSを遅延させる場合は、以下のようにIDを追加していきます。
function my_dequeue_plugin_files(){
wp_dequeue_style('crayon');
wp_dequeue_style('example001');
wp_dequeue_style('example002');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);
function my_enqueue_plugin_files(){
wp_enqueue_style('crayon');
wp_enqueue_style('example001');
wp_enqueue_style('example002');
}
add_action('wp_footer', 'my_enqueue_plugin_files');遅延処理の確認
処理後にページのソースを表示し、対象CSSがhead内から消えてフッター付近に移動していれば正常です。まず1つのCSSで試してから、問題なければ徐々に増やしていくのがおすすめです。
テーマCSSは遅延させない方が無難
テーマCSSを遅延させると、ページ読み込み中にデザインが崩れて表示されることがあります。
デザイン崩れが気になる場合はテーマCSSの遅延処理は見送り、プラグインのCSSのみ対処するのが現実的です。
JSの遅延読み込みで解決する
JSファイルもCSSと同様に「レンダリングを妨げるリソースの除外」の原因となります。以下のコードをfunctions.phpに追記してください。クォーテーションはすべて半角で入力してください（全角になるとエラーが発生します）。
<?php /*JSの遅延読み込み*/
if(!(is_admin())){
function replace_scripttag($tag){
if(!preg_match('/defer/',$tag)){
return str_replace("type='text/javascript'",'async',$tag);
}
return $tag;
}
add_filter('script_loader_tag','replace_scripttag');
}
?>改善結果を確認する
CSSとJSの遅延処理後にPageSpeed Insightsで再計測します。
当サイトでの改善結果は以下のとおりです。
- モバイル：5 → 26
- PC：39 → 55
カスタマイズのたびに再チェックする
WordPressはプラグインを追加するたびにCSSやJSが増えます。カスタマイズ後は必ずPageSpeed Insightsで再計測し、新たに指摘されたファイルをfunctions.phpの遅延処理に追記するようにしましょう。
サーバーの表示速度そのものを改善したい場合は、高速なレンタルサーバーへの移行も有効な手段です。
まとめ
「レンダリングを妨げるリソースの除外」はCSSとJSの遅延読み込みで対処できます。手順をまとめます。
- ページソースからCSSのIDを調べてfunctions.phpにwp_dequeue_style／wp_enqueue_styleを追記する
- テーマCSSはデザイン崩れのリスクがあるため遅延させない方が無難
- JSはfunctions.phpにasync処理を追記する
- プラグイン追加のたびにPageSpeed Insightsで再確認する
