6章 フロントエンド監視
フロントエンド監視とは、どういった意味か
ブラウザあるいはネイティブなモバイルアプリケーションによって、パースされて実行されるすべてをフロントエンドとして定義する
あるwebページをロードしたときのHTML,CSS,JavaScript,画像などすべてがフロントエンドの構成要素
フロントエンドのパフォーマンス監視のゴールは動き続けるのではなく、素早くロードできること
ページのロード時間は4秒以下を目指すべき
フロントエンド監視の2つのアプローチがある
リアルユーザー監視(RUM)とシンセティック監視の2つ
2つの違いは監視につかうトラフィックの種類による
GAはRUMの一種
RUMとは、監視のデータとして実際のユーザートラフィックをつかうもの
各ページにJSの小さなスニペットを入れることで監視サービスに対してメトリクスを送信する
WebpageTest.orgのようなツールがシンセティック監視を行う
監視データを得るため、テスト環境化で偽のリクエストを生成する
フロントエンドパフォーマンスのメトリクス
Navigation Timeing API
ブラウザはW3Cによって推奨されているNavigation Timeing APIという仕様に基づいたAPIを通じて、ページパフォーマンスを公開している
このAPIで常に有益なのは以下のメトリクス
- navigationStart
- ブラウザによってページリクエストが開始されタイミング
- domLoading
- DOMがコンパイルされロードが始まったタイミング
- domInteractive
- ページが使用可能になったと考えられるタイミング
- ただしロードが終わったとは限らない
- domContentLoaded
- すべてのスプリクトが実行されたタイミング
- domComplete
- すべてのロードを終えたタイミング
Speed Index
事実上の標準フロントエンドパフォーマンステストツールとして使われているWebpageTestで、最も有名なのがSpeed Index
視覚的な観点でページがロードされたのが5日を判断するのに、秒間10フレームのビデオキャプチャを使う
ユーザーの体験を完全に判断する点ではブラウザが報告してくるメトリクスよりもずっと正確