Webパフォーマンスについて

Webパフォーマンスについて記事を書いています。パフォーマンス管理は、品質管理です。ですから計測データを元に記事を書いてます。

今、見ているWebページのW3C標準規格の表示速度が測れるChrome用機能拡張「Sonar」

表示速度、何で調べていますか?

皆さんは、手軽にWebページの表示速度を調べたい時に、どんなツールを使っていますか?

  • Chrome Developer Tool
  • Firebug
  • 各種オンライン無料計測サービス

こんな感じでしょうか?

標準規格準拠の重要性

実は、これらのツールは、計測したデータに差があります。
私も業務で「ツールによって計測した値が違う」と相談されることがあります。

計測オブジェクト数の違い

実は、これらのツールは、取得できるデータに差があります。
実際に取得しているオブジェクト数を確認してみると分かります。

「ページの終わり」をどのように定義するかは、実は結構悩ましい問題です。
実験計画法の三原則に基づいて、1ユーザとして一定間隔にアクティブに計測するSynthetic Monitoring(合成計測)の場合は、HTTP/HTTPSの通信が途絶えてから1~2秒待ってみて、通信が発生しなければ終わりという定義が主流になってきています。

Catchpointも、Keynoteも、双方ともに、デフォルトでこの方法を採用しています。

ブラウザによる違い

ブラウザによって、取得するデータにも違いがあります。

計測する場所による違い

計測する場所によっても、速度表示が異なります。特にオンラインサービスで提供している無料計測の場合は、どこから計測しているかを確認するのは大事です。

同じ測定基準を使う重要性

何かを「測る」のに、ものさしが異なるのでは非常に困ります。

現在、大人気のNHK大河ドラマ真田丸」で、豊臣秀吉が、福島正則は大きな枡、自分は小さな枡でお酒を呑んでいるのを見比べて、枡の大きさの統一=基準の統一の必要性に気づくシーンが描かれていました。

度量衡を統一して、太閤検地を行うきっかけを上手い具合に表現してましたね。

f:id:takehora:20160516105514j:plain

NHK for Schoolの解説動画は、こちらです。

www2.nhk.or.jp

Webページの表示速度も、計測するツールによって、測定基準がバラバラなのでは、比較がおかしくなってしまいます。

そこで、2010年、W3CWeb 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

f:id:takehora:20160516141502p:plain

Resource Timing

f:id:takehora:20160516141658p:plain

User Timing

f:id:takehora:20160516141832p:plain

どうやって計測するか?

これらの測定基準をどうやって計測するかですが、一番手っ取り早いのは、JavaScriptでこれらのAPIを叩いて、データを取得するやり方です。

RUMは、この方法で閲覧したユーザの体験した表示速度などを取得しています。

RUMの場合は、JavaScriptをWebページに埋め込む必要があるので、自分で管理しているWebサイトのページしかデータが取得できません。

「もっと手軽に、今見たページの表示速度を知りたい」

そういう要望に応えたのが、Catchpoint SystemsのChrome拡張機能Sonar」です。

Catchpoint Systemsとは

Catchpoint Systemsとは、DoubleClick、Googleの配信品質担当VPだった、Medhi Daoudiが2010年に起業したWebサイトパフォーマンス計測会社です。

f:id:takehora:20160113124516j:plain

CatchpointのCEOのMedih Daoudiと私(2016年1月)

GoogleMicrosoftを始めとして、米国・欧米・インドのテクノロジー企業や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.google.com

残念ながら、同じChromeベースでもOperaは対応していません。

上記のリンクを開くと、Sonarの画面になるので、右上の「CHROMEに追加」の青いボタンを押します。

f:id:takehora:20160516152605p:plain

Sonarでの計測

SonarをインストールしたChromeやVivaldiでWebページを開き、そして、Sonarのボタンを押すだけです。

そうすると、以下のような画面が表示されます。

f:id:takehora:20160516154136p:plain

これを使って取得した計測値は、参考としてみてください。
本格的な統計的品質管理のデータとしては使えないです。

手軽に、「このページ、どのくらいの速さだったんだろう?」と確認する分には、遅い原因も分かりますし使いやすいツールです。