#
ドキュメント

Document

自分のための備忘録です。

目的

サイトを高速化して検索ランキングを改善してサイトへの流入を増やす。

以下記事でGoogleは表示速度をモバイル検索ランキングの指標とすることに言及している。
ref. https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

参考文献

  • 書籍
    • 久保田 光則 Webフロントエンド ハイパフォーマンス チューニング 技術評論社
    • 佐藤 歩,泉水 翔吾. 超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) (Japanese Edition)
  • レンダリング処理
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ja
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ja
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ja
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=ja
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering-path?hl=ja
    • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/page-speed-rules-and-recommendations?hl=ja
  • DevTools
    • https://developers.google.com/web/tools?hl=en
    • https://developers.google.com/web/tools/chrome-devtools/?hl=en
    • https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=ja
  • web.devcss
    • https://web.dev/
  • Google
    • https://webmaster-ja.googleblog.com/2020/06/evaluating-page-experience.html
    • https://support.google.com/webmasters/answer/9205520?ref_topic=7440006#about_data
    • https://developers-jp.googleblog.com/2020/05/web-vitals.html
    • https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
  • Others
    • https://developers.google.com/web/updates/2018/09/inside-browser-part1
  • Repository
    • https://github.com/s-hiroshi/frontend-playground

HTTP/1.1 TCP同時接続数

単一のドメインに対する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/画像)のリクエスト数やファイルサイズを最適化する必要がある。

フレームワーク - Lighthouse/PageSpeed Insights -

Googleは、ページのパフォーマンスを評価するフレームワークLighthouseを公開している。
Lighthouseを手軽に使用するツールとして以下の2つがある^1。 (ツールによって指標の呼び方が異なる)

ツール DevTools Lighthouse PageSpeed Insight
指標 Performance > Metrix ラボデータ

Ref.

指標(評価システム) - Metrics/ラボデータ(2020/07/23現在)-

  • https://web.dev/metrics/
  • https://simulate.site/cheatspeed-insights/
項目 内容 対策
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), elements, or non-white elements.[^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), elements, or non-white elements. [^2]: 何らかの特定の定量化を容易にする測定に関連したシステム

ref. https://github.com/GoogleChrome/lighthouse/blob/d2ec9ffbb21de9ad1a0f86ed24575eda32c796f0/docs/scoring.html#how-are-the-scores-weighted

クリティカルレンダリングパス

クリティカルレンダリングパスとは

ページは、Loading -> Scripting -> Rendering -> Paintingを経て表示される。この処理をクリティカルレンダリングパスと呼ぶ(フレームともいう)。

  1. Loading
    1. リソースのロード(Load)
    2. 解析(Parse) Parseにはdocument.write()といったJavaScriptの解析も含む
      • DOMツリー構築
      • CSSOM(CSS Object Model)ツリー構築
  2. Scripting
  3. Rendering:LoadingとScriptingで作成されたDOMツリーとCSSOMツリーをもとにして、スタイル計算とレイアウト処理を行ってレンダリングツリー(StyleTreeともいう)を構築
    1. スタイル計算(Calculate Style)
    2. レイアウト処理(Layout)
  4. Paint:レンダリングツリーをもとに実際にブラウザに描画
    1. Paint:2次元描画命令発行
    2. Rasterize:Paintで発行された命令を元にピクセルを作成(≒レイヤーを作成)
    3. Composite Layouts:すべてのレイヤーを処理

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の動作をわかりやすく解説している。
当文章のJavaScript部分は基本的に以下リンク先を引用したもの。

前提

  • JavaScript は非同期(async, defer)であると明示的に宣言されていない場合、DOM構築をブロック
  • 外部CSSも含めてCSSはDOMツリー構築をブロックしない
  • JavaScript は、DOM と CSSOM に対するクエリ(問い合わせ)と変更が可能なために、CSSOM構築(CSSダウンロード&パース)まで待機(よってDOM構築もその間ブロック)

※ 外部CSSも含めてCSSはDOMツリー構築をブロックしないが、JavaScriptが現れた時点で、CSSにアクセスする可能性が発生するので、記載位置より前にあるCSSをすべてロードするまでDOM構築はブロックされる。

詳細

  1. HTMLパーサーがscriptタグを検知
  2. DOM構築のプロセスを一時中断して、JavaScript エンジンに制御を渡す
  3. JavaScriptはCSSOM構築(CSSダウンロードとパース)が完了するまで待機
  4. JavaScriptエンジンがスクリプトを実行
  5. 実行が完了すると、ブラウザは中断前の位置に戻り、そこから DOM 構築を再開

レンダリングに関するイベント

DOMContentLoaded

DOMContentLoadedイベントは、ブラウザによるHTMLドキュメントのロード完了を示し、その他サブリソースのロードは保証しません。しかし