- レンダリングって何？と思っている方。
- PageSpeed Insight（ページスピードインサイト）で「レンダリングを妨げるリソースの除外」が表示されたんだけど何をすればいいの？と困っている方。
現役でSEO対策の仕事をしている私が「レンダリング」について解説します。
レンダリングについて書かれているネット記事や書籍はたくさんありますが、ちょっと内容が難しいですよね。
レンダリングとは
レンダリングとは、
ブラウザが画面を表示する流れのことです。
ブラウザとはインターネット上のWebサイトを閲覧するためのソフトのことです。
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
- Internet Explorerなど
普段何か情報を探そうとするときに、
GoogleやYahoo!を使って情報を探すことが多いと思います。
検索を行って検索結果が表示された際に、気になったページをクリックすると思いますが、あなたがページをクリックしたタイミングで、ブラウザはWebサーバーにページを表示するための情報をリクエストします。
サーバーから応答があり、
Webサイトを表示するための情報（ファイルや画像）が準備できたタイミングで、ブラウザが情報の解析を行います。
そして、解析が完了したタイミングで、Webサイトが表示され、あなたはページを閲覧することができます。
レンダリングには順番がある
ファイルや画像の読み込みには順番があります。
まず最初に、
HTMLファイルのソースが上から順番に読み込まれていきます。
上から順番に読み込まれていくのですが、読み込みのときに外部ファイルの記載があると、外部ファイルを読み込みにいきます。
読み込みのときに外部ファイルの記載があると、外部ファイルを読み込みにいくというのがちょっとポイントなので覚えておいてください。
レンダリングを妨げるリソースの除外とは
レンダリングの仕組みがなんとなくわかったところで、「レンダリングを妨げるリソースの除外」について書いていきます。
「レンダリングを妨げるリソースの除外」ってなんのこと？
Googleが提供するページの表示速度計測ツール「PageSpeed Insight（ページスピードインサイト）」内の項目です。
ちなみに、ページの表示速度が遅いと悪い評価を受ける可能性があるため、SEO対策に熱心な人たちは「PageSpeed Insight（ページスピードインサイト）」の情報をもとに日々ページの表示速度改善に取り組んでいます。
妨げるは「邪魔をする」といった意味ですね。
リソースは「資源」と訳しておきましょう。
「資源」は、Web的に言うと「ファイル」です。
ちなみに「レンダリングを妨げるリソースの除外」は、英語では「Eliminate render-blocking resources」です。
言葉からもなんとなくわかる通り、
「レンダリングを妨げるリソースの除外」の意味は、「レンダリングを邪魔しているファイルがあるので除外してください」です。
レンダリングを妨げているもの
それでは、「レンダリングを妨げているもの」について書いていきます。
ページスピードインサイトを使用すれば、
すぐにチェックできます。
あなたが管理しているWebサイト、
もしくは気になるWebサイトをチェックしてみましょう。
CSSファイルやJavaScript（jQueryライブラリ）などが、表示されると思います。
表示されたファイルを何とかすることができれば、ページスピードインサイトの点数をあげることができます。
【補足】chromeデベロッパーツールでも確認してみよう
レンダリング処理はchromeのデベロッパーツールでも確認が可能です。
検証をひらいて「Network」タブをクリックです。
「command＋R」（Windowsはctrl＋R）でレンダリングが開始します。
リソース（ファイルや画像）の読み込み順が確認できます。
サイズや時間の確認も可能です。
家から駅まで歩く自分を想像してみよう
「レンダリングを妨げるリソースの除外」については少しわかりづらいので、補足です。
わかりやすいと思ってもらえるかはわかりませんが、少しお付き合いください。
まず、家から最寄り駅に向かう自分の姿を想像してみてください。
とくに何も起こらずに駅までたどり着いたとしたら、5分とか10分くらいの道のりかもしれません。
家から駅まで向かう道のりを、
レンダリングの過程と考えてみましょう。
家から出たタイミングでレンダリングが開始し、駅に着いたタイミングですべての処理が完了です。
もしも道草をしたとしたら？
では仮に、家から駅までの道のりの中で、
知り合いに出会ったとします。
無視して通りすぎるわけにはいかないので、
少し話をすると思います。
あるいは、「週刊少年ジャンプ」を読むためにコンビニに立ち寄るといったケースもあるかもしれません。
知り合いとの話が終わったり、「週刊少年ジャンプ」のチェックが終わった後に再び駅に向かうわけですが、知り合いと出会ったり、コンビニに立ち寄ったりしたことで、駅に着くまでの時間が通常よりも少し長くなってしまいました。
要するに「道草を食う」ってやつですね。
レンダリングを妨げるリソース＝道草の対象？
道草を食う対象が多かったり、道草を食う対象に使う時間が長かったりすると、それだけ時間がかかります。
駅にたどり着くまでに時間がかかります。
レンダリングも同じです。
たとえば知り合いを外部のCSSファイルだとしましょう。
たとえばコンビニを外部のJavaScriptファイルだとしましょう。
たくさんの知り合いに会えば会うほど、
あるいは、知り合いの話が長ければ長いほど、駅にたどり着くまでの時間は長くなります。
それと同じで、
ファイル数が多かったり、ファイルサイズが大きかったりすると、レンダリングが完了するまでの時間が長くなります。
では駅まで早くたどり着くためにはどうすれば良いかというと、「道草をしない」のがベストです。
つまりGoogleが言いたいのは、「ページを表示するまでの間に道草が多いから、できるだけやめてくださいね」ということです。
道草をしないように駅に向かえばOK
「レンダリングを妨げるリソースの除外」を解決するには、言葉通りですが、レンダリングを妨げるリソースを除外すればOKなわけです。
「道草を食う」対象をなくせばOKなわけです。
具体的には、
「レンダリングを邪魔しているファイル」をどうにかすることです。
ただ、一度作り上げられたWebサイトのファイルをどうにかするのはそう簡単なことではありません。
あなたが現役のエンジニアであれば自力でなんとかできると思いますが、そうでないならエンジニアの力を借りる必要があります。
自力での解決が難しい場合には、「このファイル読み込みに時間がかかってるのだけど何とかできない？」とエンジニアに相談してみましょう。
少しテクニカルな話
レンダリングを邪魔しているファイルの問題を解決するにはどうすれば良いか？
JavaScriptファイルを例に考えてみましょう。
考えらるのは以下方法です。
- ファイルを削除する。
- ファイルの位置を変更する。
- 非同期読み込みを行う。
ファイルを削除する
ファイルを削除すれば、
削除したファイルを読み込む分の時間が速くなります。
「いやいや、ファイルは削除できないでしょ？」と思うかもしれません。
たしかに使用しているファイルを削除するのは簡単ではありませんが、読み込みに時間がかかってまでも必要なものかを考えてみても良いかもしれません。
また、サイトの作りによっては、すべてのページで同じファイルを共通して読み込んでいるがために、ページによっては必要のないファイルを読み込んでいるケースもあります。
ファイルの位置を変更する
<head>内で読み込んでいるファイルを</body>に移動させることで、表示スピードを改善することができます。
JavaScriptファイルの読み込みが発生するとレンダリングがストップしてしまうので、<head>内では読み込ませずに、HTMLの<body>の読み込みが完了した後で読み込ませます。
ただ、
なんでかんでも移動するのはNGです。
<script>の読み込みタグの中に「async」や「defer」がついているものは移動させなくてOKです。理由は次に説明します。
また、JavaScriptには複数のファイルが依存関係にある場合があります。
あるファイルが読み込まれた後でないと実行ができないというケースです。
依存関係にあるファイルがある場合、
何も考えずにファイルの読み込み場所を移動してしまうと、動かなくなってしまうので注意です。
非同期読み込みを行う
先ほど出てきた「async」や「defer」についてです。
「async」や「defer」を読み込みタグにつけると、非同期でファイルが読み込まれます。
<script async src=””></script>、
または、<script defer src=””></script>と記述
非同期読み込み＝レンダリングをブロックせずに読み込む。
「async」は、読み込みが終わったタイミングでプログラムが実行されます。
「defer」も読み込みが終わったタイミングでプログラムが実行されますが、「defer」属性がついたファイルが複数ある場合には、記述の順番で実行されます。
つまり、他のファイル（プログラム）と依存関係にないファイルは「async」で読み込む、依存関係にあるファイルは「defer」で読み込むイメージです。
まとめ
レンダリングは少しややこしい仕組みですね。
ただ、WebユーザーにWebサイトをちゃんと見てもらうためには、最近ではコンテンツの質だけではなく、ページの読み込みスピードなども意識する必要性が出てきています。
SEOでも、
ページスピードは重要性を増しています。
必ずしもご自身で改善する必要はないかもしれませんが、エンジニアと話す際に、ただ「ページスピード速くしてよ」だと、話が通じないこともあります。
ですので、
多少は仕組みを理解しておく必要があります。
ただ、「道草を食う対象を減らしてくれ」とか言っても、たぶん通じないと思うので気をつけてくださいね。
