サイトを高速化して検索ランキングを改善してサイトへの流入を増やす。
以下記事でGoogleは表示速度をモバイル検索ランキングの指標とすることに言及している。
ref. https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
単一のドメインに対するTCPの同時接続数は、多くのブラウザで最大6に制限されていて、HTTP/1.1ではその制限の中で複数のTCPコネクションを持つことで並行性を確保しています（
佐藤 歩,泉水 翔吾. 超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) (Japanese Edition) (Kindle の位置No.1297-1299). Kindle 版.
TCP同時接続数は規定では2だが、現状多くのブラウザのTCP同時接続数は6となっている。
TCP同時接続が6なので、サブリソース（CSS/JavaScript/画像）のリクエスト数やファイルサイズを最適化する必要がある。
Googleは、ページのパフォーマンスを評価するフレームワークLighthouseを公開している。Lighthouseを手軽に使用するツールとして以下の2つがある^1。
（ツールによって指標の呼び方が異なる）
| ツール | DevTools Lighthouse | PageSpeed Insight |
|---|---|---|
| 指標 | Performance > Metrix | ラボデータ |
Ref.
| 項目 | 内容 | 対策 |
|---|---|---|
| First Contentful Paint(FCP) https://web.dev/fcp/ |
最初のコンテンツが描画されるまでの時間^1。The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images),[^2] |
クリティカルレンダリングパス高速化 |
| Largest Conetntful Paint（LCP) https://web.dev/lcp/ 最大コンテンツの描画 |
ビューポート（=ファーストビュー）で最も大きな領域を占めるテキスト要素または画像要素を描画するまでの時間。The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport. |
First Contentful Paintを改善 Largestコンテンツ（メイン画像等）を最適化 |
| Speed Index(SI) https://web.dev/speed-index/ https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 速度インデックス |
ページロード中にいかに速く描画が進行するか。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. |
First Contentful Paintを改善 Largestコンテンツ及びファーストビューのコンテンツを改善 |
| Time To Intractive（TTI） https://web.dev/tti/ インタラクティブになるまでの時間 |
条件1：FCPを開始してからメインスレッドに5秒以上の余裕が生じた時点からさかのぼって、最後のロングタスク（50ms以上のタスク)の終わり 条件2：TCPコネクションが2以下 |
FCPの後に取得するリソース数およびロングタスクを改善 |
| Total Blocking Time（TBT） https://web.dev/tbt/ 合計ブロック時間（JavaScriptの負荷） |
FCPとTTI間のロングタスク(50ms以上タスク)合計時間。The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. |
TTIが短ければ相対的にTBTも短くなる。 ロングタスクを改善 |
| Cumulative Layout Shift（CLS） https://web.dev/cls/ 累積レイアウト変更（誤操作の誘引） |
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. レイアウトの段階的な変化と影響を受ける領域の大きさ。画像の読み込み完了やJavaScriptにより後からの要素が挿入されレイアウトがズレる事象が典型例。ちなみにスピードとは無関係。 |
JavaScriptによる要素操作を改善 画像サイズ指定漏れ改善 |
^1: コンテンツとは For this metric, "content" refers to text, images (including background images),
[^2]: 何らかの特定の定量化を容易にする測定に関連したシステム
ページは、Loading -> Scripting -> Rendering -> Paintingを経て表示される。この処理をクリティカルレンダリングパスと呼ぶ（フレームともいう）。
document.write()といったJavaScriptの解析も含むWebサイト高速化作業の1つが、上記クリティカルレンダリングパスの高速化である。
ref. Webフロントエンド ハイパフォーマンス チューニング 久保田 光則 ref. https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=ja
CSSとJavaScriptのロード中は、DOMツリーやCSSOMツリーに影響を与える可能性があるためレンダリング処理をブロックします。
佐藤 歩,泉水 翔吾. 超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) (Japanese Edition) (Kindle の位置No.1426-1427). Kindle 版.
以下リンクは、JavaScriptの動作をわかりやすく解説している。
当文章のJavaScript部分は基本的に以下リンク先を引用したもの。
※ 外部CSSも含めてCSSはDOMツリー構築をブロックしないが、JavaScriptが現れた時点で、CSSにアクセスする可能性が発生するので、記載位置より前にあるCSSをすべてロードするまでDOM構築はブロックされる。
scriptタグを検知DOMContentLoadedイベントは、ブラウザによるHTMLドキュメントのロード完了を示し、その他サブリソースのロードは保証しません。しかし