【PageSpeed Insights】「レンダリングを妨げるリソースの除外」の解決方法

Google PageSpeed Insightsで自分のサイトをチェックすると改善できる項目に「レンダリングを妨げるリソースの除外」が出てくることがあります。

短縮できる時間を見るとかなり負荷が大きくなっているように見えますが、一体どういう理由で改善できる項目に挙げられたのでしょうか。

「レンダリングを妨げるリソースの除外」の解決方法

「レンダリングを妨げるリソースの除外」は、headタグ内にCSS・JavaScriptファイルの読み込みを発生させてレンダリングをブロックしているのが原因です。

例えば下記のコードはPageSpeed Insightsの「レンダリングを妨げるリソースの除外」のチェックに引っかかります。

<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' id='tsnc_main-style-css' href='style.css' type='text/css' media='all'/>
</head>
<body>Hello</body>
</html>

</body>以下に読み込み行を移動させる

一番確実なのは</body>より下にCSSやJavaScriptファイルを読み込むコードを移動させることです。例えば以下のようにします。

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>Hello</body>
<link rel='stylesheet' id='tsnc_main-style-css' href='style.css' type='text/css' media='all'/>
</html>

このようにCSSやJavaScriptを最後に読み込ませることで、HTMLの解析をしたあとにリソースファイルが読み込まれるのでPageSpeed Insightsのチェックを通過できます。

rel=”preload”属性を追加して非同期読み込みする(CSSのみ)

CSSの場合、rel=”preload”属性を与えることでレンダリングブロックを発生させずにCSSを読み込ませることができます。

<link rel='stylesheet' id='tsnc_main-style-css' href='style.css' type='text/css' media='all'/>

CSSの場合は読み込み順序がメチャクチャだったとしても正常に読み込まれるため、何も考えずにrel=”preload”を追加して非同期読込させて問題ありません。

Async・Defer属性を付与する(JavaScriptのみ)

JavaScriptファイルの読み込みの場合、<script>タグにAsync属性もしくはDefer属性を付与することで「レンダリングを妨げるリソースの除外」が改善されます。

詳しくは割愛しますが、HTMLのレンダリングを行いつつ裏でJavaScriptの読み込み・実行も行うようになるため、レンダリングを妨げずJavaScriptを読み込ませることができます。この方法であれば<head>内に書いていても問題ありません。

依存関係に注意

jQueryを使っている場合など依存するライブラリがある場合は真っ先に読み込ませてください。読み込み順序を適切に設定しないとJavaScript実行時にエラーとなり、正常に動作しなくなります。

ですのでバグが発生する場合は、バグが発生してしまうJavaScriptのみ、PageSpeed Insightsの評価が下がる前提で<head>内で読み込ませたほうが懸命です。

WordPressの場合はカンタンに改善可能

WordPressの場合は自作でも使い続けていることでもない限り、直接テーマをいじるわけにも行きません。ですがWordPressにはプラグインという便利な仕組みがあります。「レンダリングを妨げるリソースの除外」の解決に役立つおすすめのプラグインは「Autoptimize」です。

Autoptimizeを使えばカンタンにCSSやJavaScriptの読み込みを最適化して「レンダリングを妨げるリソースの除外」の問題を解決してくれます。

完全なリソース除外は難しい(しないほうが良い)

PageSpeed Insightsのスコアを1点でも上げるために「レンダリングを妨げるリソースの除外」を完璧に解決したい方も多いかもしれませんが、WordPressは仕様上完璧に解決することが難しいと思っておきましょう。

WordPressはjQueryに依存している面が強く、jQueryだけは<head>内で読み込むことが推奨されています。そのため最低でも1件は「レンダリングを妨げるリソースの除外」として表示されることが普通と思っておきましょう。

下記のように1件2件に留まっていたら上出来です。

jQuery本体まで最適化すると結構な確率でバグるのでこの辺りが妥協点です。他の項目で点数を稼ぎましょう。

厄介なのがバグっていることに後で気づくことが多いということです。時間が経てば経つほど何が原因でバグっているのかわからなくなってしまうため、jQuery本体の最適化はメリットよりもデメリットのほうが大きくなっています。

SEO対策の指標にしよう

PageSpeed InsightsはSEO対策の指標にちょうどいいツールです。何がどう悪いのか明確に示してくれるため、サイトの高速化にはかなり役立つでしょう。

「レンダリングを妨げるリソースの除外」はWebページのファーストビューに大きく関わるポイントなので、可能な限り最適化することをお勧めします。