今、見ているWebページのW3C標準規格の表示速度が測れるChrome用機能拡張「Sonar」
表示速度、何で調べていますか?
皆さんは、手軽にWebページの表示速度を調べたい時に、どんなツールを使っていますか?
こんな感じでしょうか？
標準規格準拠の重要性
実は、これらのツールは、計測したデータに差があります。
私も業務で「ツールによって計測した値が違う」と相談されることがあります。
計測オブジェクト数の違い
実は、これらのツールは、取得できるデータに差があります。
実際に取得しているオブジェクト数を確認してみると分かります。
「ページの終わり」をどのように定義するかは、実は結構悩ましい問題です。
実験計画法の三原則に基づいて、1ユーザとして一定間隔にアクティブに計測するSynthetic Monitoring（合成計測）の場合は、HTTP/HTTPSの通信が途絶えてから1～2秒待ってみて、通信が発生しなければ終わりという定義が主流になってきています。
Catchpointも、Keynoteも、双方ともに、デフォルトでこの方法を採用しています。
ブラウザによる違い
ブラウザによって、取得するデータにも違いがあります。
計測する場所による違い
計測する場所によっても、速度表示が異なります。特にオンラインサービスで提供している無料計測の場合は、どこから計測しているかを確認するのは大事です。
同じ測定基準を使う重要性
何かを「測る」のに、ものさしが異なるのでは非常に困ります。
現在、大人気のNHKの大河ドラマ「真田丸」で、豊臣秀吉が、福島正則は大きな枡、自分は小さな枡でお酒を呑んでいるのを見比べて、枡の大きさの統一＝基準の統一の必要性に気づくシーンが描かれていました。
度量衡を統一して、太閤検地を行うきっかけを上手い具合に表現してましたね。
NHK for Schoolの解説動画は、こちらです。
Webページの表示速度も、計測するツールによって、測定基準がバラバラなのでは、比較がおかしくなってしまいます。
そこで、2010年、W3CでWeb Performance Working Groupという部会が設立され、測定基準が策定されました。
いくつかの測定基準の標準化が進められていますが、主要なものは以下の通りです。
- Performance Timeline
- パフォーマンスの測定基準のデータを保存・取得する統一インターフェースについて定義
- Navigation Timing
-
Webページのルートドキュメントを読み込みながらユーザエージェントから実世界のパフォーマンス情報を収集する、サイト開発者向けの相互利用可能な手段。ユーザエージェントはWebサーバからWebページを読み込んだ時のEnd to Endのレイテンシを取得する。
- Resource Timing
-
Webページのルートドキュメントが指定したリソースを読み込みながらユーザエージェントから実世界のパフォーマンス情報を収集する、サイト開発者向けの相互利用可能な手段。ユーザエージェントはWebサーバからリソースを読み込んだ時のEnd to Endのレイテンシを取得する。これは、ネットワークを経由してリソースを取得した時間とユーザエージェント内でリソースが読み込まれた時間が含まれる。以下のものが含まれる。
- ネットワークに関連した計時
- ドキュメント内のリソースを読み込みに関連した計時
- リソースは以下のエレメントのいずれかになる: iframe, img, script, object, embed, link
- User Timing
- 開発者が提供した名前で計時情報を取得する、サイト開発者向けの相互利用可能な手段。ユーザエージェントはユーザエージェント内でコードが実行されたタイムスタンプと指定された時間を取得する。
- Server Timing
- ユーザエージェントとのリクエスト―レスポンスサイクルのパフォーマンス測定基準をやり取りする、サーバ向けの相互運用可能な手段であり、JavaScriptインターフェースによってアプリケーションがアプリケーション配信を最適化するためにそれらの測定基準を収集、処理、実行することを可能にする。
現在は、上記の内、Navigation Timing 、Resource Timing、User Timingの3つがWebブラウザに実装されています。
Webブラウザの対応状況
Webブラウザの対応状況は以下のとおりです。
（参考：Can I use... Support tables for HTML5, CSS3, etc.）
Navigation Timing API
Resource Timing
User Timing
どうやって計測するか?
これらの測定基準をどうやって計測するかですが、一番手っ取り早いのは、JavaScriptでこれらのAPIを叩いて、データを取得するやり方です。
RUMは、この方法で閲覧したユーザの体験した表示速度などを取得しています。
RUMの場合は、JavaScriptをWebページに埋め込む必要があるので、自分で管理しているWebサイトのページしかデータが取得できません。
「もっと手軽に、今見たページの表示速度を知りたい」
そういう要望に応えたのが、Catchpoint SystemsのChrome用拡張機能「Sonar」です。
Catchpoint Systemsとは
Catchpoint Systemsとは、DoubleClick、Googleの配信品質担当VPだった、Medhi Daoudiが2010年に起業したWebサイトパフォーマンス計測会社です。
CatchpointのCEOのMedih Daoudiと私（2016年1月）
GoogleやMicrosoftを始めとして、米国・欧米・インドのテクノロジー企業やEコマースサイト、Verizonのようなキャリア、Akamai・Fastly・CDNetworks・MaxCDNのようなCDN各社が採用している、今、最も注目を集めているWebサイトパフォーマンス計測のリーディングカンパニーです。
Medhi自身が、DoubleClickやGoogleで、KeynoteやGomezのヘビーユーザだったこともあり、Webサイトパフォーマンス計測に必要なものを、あったら良いものを知り尽くしています。
そこで私財を30億円を投じて、Googleの元DoubleClickのメンバーとスピンアウトして創設した会社です。
全世界に500ヵ所の計測サーバを設置し、今世界で最も広範囲にWebサイトパフォーマンス計測を行えるサービスを展開しています。
RUMやサーバサイドの計測サービスも持ち、IoTの計測も開始しており、Honeywellが全ての通信機器にCatchpointの計測Agentを実装したり、Verizonが米国国内の数千ヵ所での回線計測を行うなどしています。
日本国内では、東京と大阪に計測拠点を持ち、固定回線だけでなく、携帯網のLTE回線でのスマートフォンのブラウザ計測も可能です。
「Sonar」とは
「Sonar」は、CatchpointがChromeの拡張機能として作ったもので、JavaScriptを仕込まなくても、Chrome上で閲覧しているWebページの表示速度をW3C Web Performance Working GroupのNavigation Timing とResource TimingのAPIを叩いて取得・表示・分析してくれます。
Sonarのインストール
Chrome、もしくは、Vivaldiで、こちらのリンクを開きます。
残念ながら、同じChromeベースでもOperaは対応していません。
上記のリンクを開くと、Sonarの画面になるので、右上の「CHROMEに追加」の青いボタンを押します。
Sonarでの計測
SonarをインストールしたChromeやVivaldiでWebページを開き、そして、Sonarのボタンを押すだけです。
そうすると、以下のような画面が表示されます。
これを使って取得した計測値は、参考としてみてください。
本格的な統計的品質管理のデータとしては使えないです。
手軽に、「このページ、どのくらいの速さだったんだろう？」と確認する分には、遅い原因も分かりますし使いやすいツールです。
