Webサイトのパフォーマンスを調べる

Published at 2013-06-16

一口にWebサイトのパフォーマンスと言っても色々あって、

• 通信部分のパフォーマンス（Networking）
• スクリプト部分などの実行パフォーマンス（Computing）
• 表示に関するパフォーマンス（Rendering）

などなど。今回はWebサイトのどこがボトルネックになっているかなどの調べ方とか。

GoogleChromeのPageSpeedを使う

Dev Tools(command + option + iで開くやつ)の進化が凄まじすぎて追いかけるのが大変な今日このごろ、その中のアドオンとして働くPageSpeed Insightsというものがある。

• PageSpeed Insights (by Google) - Chromeウェブストア
• Using PageSpeed Insights for Google Chrome

これをインストールすると、Dev ToolsのパネルにPageSpeedが追加されるので、あとは検証したいページを開いてAnalyzeするだけ。すると、そのページの検証が行われて、何が改善可能かを教えてくれる。Gzip効かせろだとか、minifyしろだとか、<script>は後ろでロードせいだとか、リダイレクト減らせだとか、cssスプライトにしろよだとか…、手軽に色んなことを教えてくれる。まずはこのツールでScoreを伸ばすことが先決です。

DevToolsについて

前述の、NetworkingやComputingなどの細かい解析は、デフォルトで搭載されているDevToolsの各機能で行う。NetworkパネルでAjaxのタイミングとか見たり、画像のダウンロードにかかってる時間を見たり。タイムライン見てるだけでも、「ここ時間かかってるなー」っていうのが見えるかと。

あと、Timelineでペインティングコスト見たり、ProfilesでJavaScriptの実行コスト見たり。これらに関しては各パネルでレコーディングをする必要がある。下部の虫眼鏡の右にあるアイコンでレコーディングの開始と終了をする。それぞれ、レコーディングされている間に行われた描画や、スクリプトの実行をプロファイルとして閲覧することができる。

CompositeLayerの生成に関してはあんまりこのパネルで見てなくて、SettingsのGeneralのRenderの

• Show paint rectangles（赤がpaint rectangle）
• Show composited layer borders（オレンジがcomposite layer）

にチェックをすることで得られる視覚的なほうで確認して、リフロー多いなおい…ってこととかをTimelineパネルで見たりしている。果たしてこれが常套手段なのかどうかは、不明。

Sitespeed.ioを使って解析する

これはAriyaのRTで今日知った。

Just set up http://t.co/1phATVNerY (by @soulislove) locally on my windows machine. Up and running in 5 minutes. Great tool.

— Thomas Puppe (@thomaspuppe) June 14, 2013

こちらはコマンドラインから使うツールで、サイトのURLを指定して実行し、解析結果はhtmlで出力される。観点としては前述のPageSpeedと大差ないが、より細かく、関連ページの解析までしてくれるツール。PhantomJS1.9とJava1.6~が必要。

• sitespeed.io
• soulgalore / sitespeed.io

PhantomJSとJavaのインストールはしてもらうとして、その後も、githubからcloneしてくるだけ。もちろんダウンロードでもOK。

$ git clone https://github.com/soulgalore/sitespeed.io.git

あとは、サイト名を指定して実行。

$ cd sitespeed.io

$ ./sitespeed.io -u https://1000ch.net

すると、sitespeed-resultというフォルダに解析結果が出力される。ドメイン別で出力されるのと、その下は解析した日付時刻でフォルダが生成されるので、継続的に解析して比較するということもできそう。