Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
105
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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

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 (ブラウザ拡張機能)

使ったことがない

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
105
Help us understand the problem. What are the problem?