制作メモ
Google が提供する PageSpeed Insights で Web サイトの問題点を確認しましょう。
とかいいつつ正直わからないことだらけです・・・
わからないところは素直に「わからん！」って書いてるのでどなたか教えていただけるとうれしいです。
まずは、Web ページがブラウザに表示されるまでのプロセスをおさらいしましょう。
【おさらい】Web ページがブラウザに表示されるまでのプロセス
PageSpeed Insights の結果に関わってくるのは、主にレンダリングのフローです。
それぞれの処理内容を確認していきましょう。
| HTML Parser | HTML を解析して、DOM Tree（Document Object Model Tree の略。ノードと呼ばれるオブジェクトのツリー状の集合）を構築します。 |
| CSS Parser | 外部ファイル及びインラインのスタイルシートを解析して、CSSOM Tree（CSS Object Model Tree の略）を構築します。 |
| Attachment | DOM Tree と CSSOM Tree を組み合わせて、Render Tree という新たなツリーを構築します。 |
| Layout（レイアウト） | Render Tree を元に画面に表示される位置やサイズを各ノードに割り当てます。 |
| Painting（ペイントまたは描画） | Render Tree が走査され、各ノードが描画さます。 |
Webkit と Gecko では一部用語が異なりますが仕組みは同じです。
上の図ではあたかも順番に処理が行われているようですが実際はそうではありません。
レンダリングエンジンはできる限り早くコンテンツを画面に表示しようとします。
すべての HTML が解析されるのを待つのではなく、部分的に解析を終えたコンテンツから表示していきます。
重めのページを開いたときにみられる、上から下へ遅れて表示されていくアレです。
そしてその間にもネットワークから残りのコンテンツが届いて処理が続けられます。
ここまでなんとなく理解した上で以下をご覧ください。
このサイトの PageSpeed Insights の結果です。
項目の左端のマーカーは評価です。
●90–100 ■50–89 ▲0–49
何かしら表示されるまで2秒かかっているようです。
最近のユーザーはせっかちなので3秒以上待たないと言われていますから、まぁまぁ悪くない結果なんじゃないかと思います。
（モバイルの方は手厳しい結果になってますが・・・）
初めてこれを見た人でも、なんか2秒くらいかかってるのかなっていうのは伝わってくるかと思います。
そんな解釈もいいですが、どこで処理が滞っているのかを知ることができれば対処しやすくなるので、ここはしっかり確認していきましょう。
| コンテンツの初回ペイント | HTTP リクエストを送ってから、Painting の開始までに要した時間を示しています。 |
| 意味のあるコンテンツの初回ペイント |
これよくわかりません。
逆に意味のないコンテンツってなんでしょうか・・・。 ってことで検証してみました。 <body>の一番最初に以下の文字列を挿入して計測してみました。 1. 意味のない文字列（「ああああああああ」など）を大量に入れてみる「コンテンツの初回ペイント」「意味のあるコンテンツの初回ペイント」どちらも同じ時間でした。 2. 空のタグなどを大量入れてみる「意味のあるコンテンツの初回ペイント」が「コンテンツの初回ペイント」よりも少し遅くなりました。アルゴリズムはわかりませんし変わるものなのではっきりとしたことはいえませんが、「意味のあるコンテンツ」とはタグを除いた、検索エンジンにインデックスされ得るような文字列のことなのかもしれません。 |
| 速度インデックス | ページのコンテンツが目に見える状態になるまでの時間を示しています。まずはファーストビューを最優先で表示させることが重要といわれてますから、この速度は一番重要な気がします。ここだけ ■ なので改善の余地ありです。 |
| CPU の初回アイドル | ページの操作性が最低限になるまでの時間らしい。うーん、最低限ってどこで判断してるんでしょうか？操作するものはUI 要素（ウィンドウ、テキストフィールドやセレクトボックスなど）を指しているそうなので、フォームに入力して送信するみたいな処理が最低限可能かってことですかね？いや、だから最低限って？って話なのですが・・・ |
| インタラクティブになるまでの時間 | ページが表示され、ユーザーが操作可能になるまでの時間を示しています。「CPU の初回アイドル」との違いは、完全か不完全かってことでしょうか？「操作可能になる」タイミングとは、レイアウトが安定して、主要なウェブフォントが表示され、メインスレッドでユーザー入力を処理できる状態になるタイミングと、定義されているらしい。 |
| 最大推定 FID | FID とは First Input Delay 略です。ユーザーが最初にリンクをクリックするなどした瞬間から、ブラウザが応答するまでの時間を示しています。必ずしもリンクをクリックした瞬間にブラウザが応答してくれるわけではないということですね。このような入力遅延（入力待ち時間）は、ブラウザのメインスレッドが他の何か（JavaScript の解析や実行など）をするのに忙しいので、ユーザーに応答できないために発生するようです。90ミリ秒ってことはわずか約0.1秒なのでほとんど遅延はなさそうです。 |
こんな感じでどうでしょうか？
あってますかね？
私なりの解釈もあるので正確ではないかもしれないので参考程度にしてくださいね。
ご意見お待ちしてます！