[PhantomJS]loadreportを使ったheadlessのページ分析

皆さんは、Webページの表示速度を分析する際に、どうやっていますか?
ChromeやFirebug等に付属しているツールで調べている?
loadreport.jsというツールを使ってみるのも良いかもしれません。


インストール


PhantomJSが必要ですので、インストールしてください。
MacOSでbrewを利用されているならば以下のコマンドで一発です。


brew install phantomjs

githubのリポジトリからソースコードをコピーしてきます。
これで利用の準備は整います。


git clone https://github.com/wesleyhales/loadreport.git

filmstripを使ってページがどのように表示されるかをみてみよう


loadreportをインストールしたディレクトリへ移動し、以下のコマンドを実行します。


phantomjs loadreport.js "調査対象のURL" filmstrip

実行すると、実行したディレクトリ以下にfilmstripというディレクトリが作られ、
中に経過時間[ms]ごとのキャプチャが保存されています。
161_01.png


CSS, JS等の解釈の結果を ms単位でキャプチャしたものになります。
このブログだと画像を含めた最終的なレンダリング完了には 10sかかっていることがわかります。


画像をみてみると、少しずつ変化していることがわかります。
なお、Googleに対して実行してみたところ、300msでした。
さすがに早い。


Sppedreport


ブラウザに付属している分析ツールと同じような機能です。
以下のように実行します。


phantomjs speedreport.js "調査対象URL"

実行結果は、speedreportsというディレクトリ以下にhtmlで保存されます。
HTMLを開くと以下の様なレポートが表示されます。
161_02.png


結果をCSV, jsonで出力する


メインとなる機能です。
以下のように実行します。
csvの箇所をjsonにすると結果がjsonになります。


phantomjs loadreport.js "調査したいURL" performance csv

この機能は複数回実行すると、結果が追記されていきます。
画像等のリソースで最も遅かったものや、データ量が大きかったもの、エラーなどがCSV, JSONとして記録されます。


UAの偽装


デフォルトはChromeを偽装しますが、config.json中の `userAgent`を`iphone`や`android`へ変更することでUAの偽装も行い分析が可能です。


スケジュール実行


schedule-loadreport.js を用いて指定した時刻ごとの結果も取得出来ます。
schedule-loadreport.js 内のURLを変更し、以下を実行しておけば 毎時の結果を取得出来ます。


npm schedule-loadreport.js
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。