企業のWebサイトを調査してみた その2
小山です
それでは前回の記事企業のWebサイトを調査してみた その1に続いて
今回はプライム市場の企業サイトのパフォーマンスについて書いてみます
Lighthouseのパフォーマンスは何をもとに計測されているのか？
これを知らないと何が高く、何が低いか理解できないですね
Lighthouseの説明によるとパフォーマンスは下記の5項目により計測されています
AuditWeight
First Contentful Paint 10%
Speed Index 10%
Largest Contentful Paint 25%
Total Blocking Time 30%
Cumulative Layout Shift 25%
Contentful Paintに関わるふたつの指標
Contentful Paintに関する項目がふたつありますね
ひとつがFirst Contentful PaintでもうひとつがLargest Contentful Paintです
Contentful Paintとはコンテンツのいずれかの部分（テキスト、画像、svg要素、白以外のcanvas要素が画面上にレンダリング（描画）されるまでの時間です
よってFirst Contentful Paintとは最初にコンテンツが表示されるまでの時間、Largest Contentful Paintはその名の通り最も大きい画像もしくはテキストブロックが表示されるまでのレンダリング（描画）時間となります
FCP とは？
First Contentful Paint (FCP) 指標は、ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定します。この指標における "コンテンツ" は、テキスト、画像 (背景画像を含む)、<svg> 要素、白以外の <canvas> 要素のことを指しています。
LCP とは？
Largest Contentful Paint (LCP) 指標は、ビューポート内に表示される最も大きい画像またはテキスト ブロックのレンダリング時間を、ページの初期読み込み開始タイミングと比較してレポートします。
Speed Index
Speed Indexはコンテンツが視覚的に表示される速度の指標です
先ほどと違い「完全なページに近い」ものまでの表示の指標です
What Speed Index measures
Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the Speedline Node.js module to generate the Speed Index score.
Introducing the Speed Index
The speed index takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted. To do this, first it needs to be able to calculate how "complete" the page is at various points in time during the page load. In WebPageTest this is done by capturing a video of the page loading in the browser and inspecting each video frame (10 frames per second in the current implementation and only works for tests where video capture is enabled).
Total Blocking Time
Total Blocking TimeはFirst Contentful Paint（最初のコンテンツの描画）からTime to Interractive（ユーザーの入力やタップを受け付けるようになるまで）の間でどれくらいブロックされているかという指標です
ブロックはひとつのタスクで50ミリ秒を超えたタスクで、秒数の合計を出します。
TBT とは？
Total Blocking Time (TBT) 指標は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する First Contentful Paint (視覚コンテンツの初期表示時間、FCP) と Time to Interactive (操作可能になるまでの時間、TTI) の間の時間の合計を測定します。
メイン スレッド上で 50 ミリ秒 (ms) 以上実行されているタスクを意味する長く時間がかかっているタスクがある場合、メイン スレッドは "ブロックされた" とみなされます。メイン スレッドが "ブロックされた" と表現されるのは、ブラウザーが進行中のタスクを中断することができないからです。そのため、長く時間がかかっているタスクの途中でユーザーがページを操作した場合、ブラウザーは応答する前にタスクの終了を待たなければなりません。
タスクの処理にかなり長く時間がかかっている場合 (例: 50 ms 以上)、ユーザーはその遅延に気付き、ページが遅い、または質が低いと感じてしまう可能性があります。
特定の長いタスクのブロック時間は、50ミリ秒を超える期間です。また、ページの合計ブロック時間は、FCPとTTIの間で発生する各長いタスクのブロック時間の合計です。
Cumulative Layout Shift
Cumulative Layout Shiftは説明よりみなさんの実体験の方がわかりやすいですね
ページを読みこんで、タップをしようと思ったら突然上に何かが割り込んで誤タップをしてしまうことがあると思います
https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm
Layout Shiftについては多くの項目があるので割愛しますがこういった動きはユーザーにとって良くないと判断しています
CLS とは？
CLS は、ページの表示中に発生した予期しないレイアウトシフトごとにレイアウト シフト スコアの最大バーストを測定します。レイアウト シフトは、表示された要素がレンダリングされたフレームから次のフレームへと位置を変更する際に発生します。(個々のレイアウト シフト スコアの計算方法に関する詳細については、以下を参照してください)。セッション ウィンドウと呼ばれるレイアウト シフトのバーストとは、それぞれが独立した 1 回以上のレイアウト シフトが、1 回のシフトが 1 秒未満、ウィンドウ全体で最大 5 秒間の長さで急速に連続して発生することを指します。そして最大バーストとは、そのウィンドウで発生したすべてのレイアウト シフトを累積したスコアが最大となるセッション ウィンドウのことを指します。
随分長くなってしまいました
一旦この記事ではパフォーマンスとは何をもとにスコアをつけられているのかを書かせていただきました
次回はこのパフォーマンスがプライム市場の企業Webサイトでどのようなスコアになっているかの記事になります
ありがとうございました
■お問合せ・ご相談はこちら
【BA公式サイト】
【BAsixsメディアサイト】Web用語解説・解決事例・RFPなど公開中！