94
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webページ表示速度計測ツールメモ

Last updated at Posted at 2015-08-10

久しぶりにチェックしたのでまとめ。オンラインだったものがなくなっていたり、ブラウザ拡張であったものがなくなっていたりはしている。

WebpageTest (オンライン)

Webサイトのパフォーマンスを実際の計測してくれるサービス。計測する地域やブラウザを選択できる。

自前のホスティング環境に導入することで継続的に計測しデータを収集することが可能。

Speed Indexというページの可視部分が表示される平均時間を取るものがあり、表示時間の完了時間を見るのではなく画面の可視部分の9割を速く表示できているかといったユーザ体験により近づいた指標になっている。計測ブラウザにIEを使うと0.1s毎の画面の表示段階のサムネイルが確認できる。

Navigation Timing API (ブラウザ)

ブラウザ側に実装されるHTML5のAPI。

ブラウザがページの読み込み、表示にかかった時間を計測し、取得できる。
ハイパーリンクがクリックされてからの時間でDNSのフェッチの時間なども計測される。

高精度時計を使うことでアプリケーションの速度を計測にも利用できる。
参考: User Timing API: あなたの Web アプリをもっと理解するために - HTML5 Rocks

対応ブラウザはChrome、Firefox 7+、IE9+、Android 4.0+
http://caniuse.com/#feat=nav-timing

iOSはi0S8で実装されたがパフォーマンスに問題があったためiOS8.1で無効化された

The Navigation Timing API has been disabled only on iOS due to performance issues
https://developer.apple.com/library/ios/releasenotes/Miscellaneous/RN-iOSSDK-8.1/index.html

Google Analytics (オンライン)

Navigation Timing APIを利用しデータを回収し表示している。Navigation Timing APIが実装されていないIEでもGoogleツールバーがインストールされている場合は収集できる。

測定できる環境が限られる他、PCとモバイルのスペックや回線速度の違い、ページごとの違いなどが全て平均されてしまうのでうまくセグメントを活用してデータを閲覧する必要がある。

Page load time (Chrome拡張機能)

Navigation Timing APIを使ってページの表示速度を計測してくれるChrome拡張機能。大まかな項目の計測時間を表示する単純な機能しかないため、いろんなページを把握するときに役に立つ。

Google PageSpeed Insights (オンライン)

GoogleのWebサービス
PageSpeed Insights

URLを入力するとページの速度やユーザ体験を改善できる項目をPCサイトとモバイルサイトの両方を検証して一覧にしてくれる。計測時間ではなくパフォーマンスを向上させるための施策の実施度が数値化され、改善項目が列挙される。

以前は「Page Speed」と呼ばれており、Chrome拡張機能も公開されていたが今はオンラインバージョンのみが提供されている。

PageSpeed Insights for Google Chrome has been deprecated. Please use the online version of PageSpeed Insights.

YSlow (ブラウザ拡張機能)

YSlow

PageSpeed Insightsと同様に、計測時間ではなくパフォーマンスを向上させるための施策の実施度がランク付けされ、改善項目が列挙される。

オンラインツールではなくブラウザ拡張機能として実行できるため公開していない社内インターナルなWebサーバからも実施ができる。

オープンソース化されている
https://github.com/marcelduran/yslow

その他

いまだに使いこなせていない。

最近、動向を把握できていない。

  • Firebug (ブラウザ拡張機能)

使ったことがない

94
106
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
94
106

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?