12/19

岡場散歩day

英語

縦長の画像置き場のフォルダ名に迷ったので。

縦長：portrait orientation

横長：landscape orientation

パフォーマンス

ネットワークタブ

名前の横に「ウォーターフォール」を表示させる。
青い線がDOMContentLoaded、赤い線がLoadイベントが発生する時点。

ホバーした時書いてある項目を見る。
重要なのは

• 「サーバーの応答を待機しています（Waiting-TTFB）」
  最初のデータを受け取るまでにかかる時間。
  ここで時間がかかっていたらサーバー側での処理に時間がかかっていることを示す。
• 「コンテンツのダウンロード」
  コンテンツの最初のバイトからすべて受け取り終えるまでの時間。

パフォーマンスタブ

こちらもDOMContentLoadedとLoadがある。緑の線は最初にページ上に何らかの表示が反映されるタイミング。

特に時間のかかっている処理の割り出しに使う。

メモリタブ

メモリの利用状況を計測。

メモリリークを検知。

JSでの検知

検証ツールによる計測ではユーザーの実際のパフォーマンスを確認できない、計測を自動化できないなどの短所。

JSでの計測をする。

• Navigation TimingAPI
  ブラウザのナビゲーションの開始からLoadイベント開始まで各段階の処理時間を計測
  window.performance.timing
• User Timing API
  任意の処理の時間を計測
  performance.mark()
• Resource Timing API
  個別のリソースの取得時間を計測（ネットワークタブのリソース取得のパフォーマンスの詳細情報と同じ）
• Performance Observerによる継続的な計測
• 高精度なタイムスタンプ
  処理にかかっている時間を得るのにUserTimingAPIの代わりにperformance.now()

これらに比べると、PageSpeedInsightsやLighthouseはしょうもない。

実際にユーザーが訪れた時のパフォーマンスの計測をサーバーに送信して記録する。
自分で作るのも良いが、ユーザーのパフォーマンスを収集するサービスをReal User Monitoring(RUM)という。

所感

一通り、やり終えた。乾杯。

It's mostly done. Cheers.