こんにちは、mickです。
このWebサイトは、PageSpeed Insightsでモバイル80オーバー、パソコン90オーバーのスコアです（2020/08/25時点）。
- WordPressのPageSpeed Insightsのスコアを上げたい
- 警告「レンダリングを妨げるリソース除外」を消したい
- 「除外」する仕組みを知りたい
そんな要望に答える記事です。
手っ取り早いのはプラグインを使う
「レンダリングを妨げるリソース除外」を消して、PageSpeed Insightsのスコアを上げるなら、プラグインを使うのが一番早いです。
オススメなのが次の2つ。
- Autoptimize
- Async JapvScript
これらは同じ開発者が公開しています。しかも無料です。
この2つ、どちらから先にインストールしても大丈夫です。
Autoptimizeを使う
私の場合は、先にAutoptimizeを使いました。
理由は、先にこのAutoptimizeを知ったからです。単純ですね。
使い方は、前回の記事で紹介しています。
そちらをみてみてください。
簡単に手順だけ紹介しておきます。
- プラグインAutoptimizeをインストールする
- プラグインAutoptimizeを有効化する
- 設定画面の「JS、CSS & HTML」にいく
- JavaScriptオプション
- JavaScript コードの最適化
- JS ファイルを連結する
- CSSオプション
- CSS コードを最適化
- CSS ファイルを連結する
- インラインの CSS を連結
- CSS のインライン化と遅延
- HTMLオプション
- HTML コードを最適化
- その他オプション
- 連結されたスクリプト / CSS を静的ファイルとして保存
- 除外されたCSSファイルとJSファイルを縮小する
※画像を最適化は、無料で利用できる範囲に制限があるため、別のプラグインで対応します。
Async JavaScriptを使う
次に、Async JavaScriptを使います。
使い方は、こちらも前回の記事で紹介しています。
こちらも、そちらをみてみてください。
簡単に手順だけ紹介しておきます。
- プラグインAsync JavaScriptをインストールする
- Async JavaScriptを有効化する
- 設定画面の「Setting」にいく
- 「Enable Async JavaScript」で「Enable Async JavaScript？」にチェックを入れる
- 「Quick Settings」で「Apply Defer」をクリック
- 設定を保存しておしまい
レンダリングを妨げるリソースとは
この「レンダリングを妨げるリソース」というのーー
Webサイトを訪れたユーザーにとって今すぐ必要でないもの（リソース）が先に処理されてしまっている、ということ。
この先に処理されてしまうリソースを「レンダリングを妨げるリソース」といっています。
このときレンダリングを妨げるリソースとみなされるのは、CSSとJavaScriptのことです。
すべてのCSSとJavaScriptがレンダリングを妨げるわけではない
大切なことがあります。
それは、すべてのCSSとJavaScriptがレンダリングを妨げるわけではないということです。
WordPressではメジャーな「style.css」の処理が遅ければ、Webサイトに訪れたときしばらく文字ばかりの画面がでてきます。
そのような現象は「Flash of unstyled content」といって、Wikipedia（英語）にも紹介があります。
⇒ Flash of unstyled content（Wikipedia英語）
日本語でいうなら、「一瞬映るスタイルシートが適用されていないWebページ」というところでしょうか。
実際、このWebサイトでもAutoptimizeのCSSの設定が誤っていたために起きた経験のある現象です。
画像の扱いは違う
画像に関しては、PageSpeed Insightsの警告「レンダリングを妨げるリソース」に画像がでてこないため、対象外と解釈しています。
画像については、2つ対策があります。
- 画像そのもののファイルサイズを小さくする
- 遅延読み込みを利用する
レンダリングとは
「レンダリング」というのは、ChromeやSafariなどのWebブラウザが、Webサイトを表示する処理のことです。
Webサイトというのは、ChromeやSafariなどのWebブラウザが、ユーザーが訪れるたびに、毎回画面を描いています（レンダリングしています）。
Webサイトはユーザーに情報をいち早く効率よく届けなければならない。つまりユーザーがWebサイトに訪れたとき、ユーザーの目が届く範囲から情報を届けなければいけないということ。
極端な例えですが、トップページを訪れたユーザーに対して、プロフィールページの処理をしていては、ユーザーのためにならないというわけです。
レンダリングを妨げるリソースを除外する仕組み
実際、レンダリングを妨げるリソースとなるCSSやJavaScriptを処理していないわけではなりません。
基本的に、CSSやJavaScriptを処理するタイミングを変えることで、対処します。
必要でないCSSやJavaScriptは、あとで（非同期）に処理します。
これが結果的に「除外」することになります。
必要でない、というのは「ユーザーが見えていない画面（スクロールしないとみれない画面）」に該当するCSSやJavaScriptです。
このとき、よく出てくるHTMLの属性が2つあります。
- async属性
- defer属性
なお、Webサイト（HTML）をWebブラウザが解析することを、パースする（パーシング）、といいます。なので、WebブラウザはHTMLのパーサー（パースするアプリケーション）ということになります。
async属性
Webブラウザが、Webサイト（HTML）を解析とレンダリングしている途中で、JavaScriptを読み込みます。読み込みが終わると、Webサイトの解析とレンダリングを止めて、JavaScriptを実行します。
defer属性
Webブラウザが、Webサイト（HTML）を解析とレンダリングしている途中で、JavaScriptを読み込みます。読み込みが終わっても、すぐにはJavaScriptを実行せず、Webサイトの解析とレンダリングを続けます。Webサイトの解析とレンダリングが終わったら、JavaScriptを実行します。
Growing with the Webのイラストがわかりやすい
async属性とdefer属性の動きの違いについては、Growing with the Web（英語）のイラストがわかりやすいと思います（イラストを簡単に日本語化してみました）。
この図からJavaScriptの処理を後回しにできる場合は、「defer属性」がよいとわかります。
それは、レンダリングを優先できるからです。
まとめ。
レンダリングを妨げるリソースの除外は、WordPressならプラグインを使うことで簡単にできます。
PageSpeed Insightsのスコアがよければ、ユーザーに対して優良なWebページとみなされて、結果としてSEO対策になります。
ただし、あまり神経質にならない方がいいと思います。
理由は、コンテンツを充実させるといった中身をよくするのがいいからです。
Webページの読み込みが早くても、内容が薄いWebサイトならユーザーも離れてしまいますよね。
内容も充実していて、ユーザーにも優しい、そんなバランスのいいWebサイトを目指していきたいですね。
以上、みなさまの助けなれば幸いです。
初稿 2020/08/25
mixhost などのLiteSpeed系サーバーのレンタルサーバーを使っている場合は、LiteSpeed Cache をオススメしています（追記 2020/09/17）。
