レスポンシブWebサイトの特徴としては、一つのHTMLコード、JavaScript、スタイルシートで全てのデバイスに対して情報を配信します。その中でデバイスごとに情報を分ける訳ですが、その中にはあるデバイスにとっては不要な情報が紛れることも多々あります。 その結果パフォーマンスが落ちてしまうケースがある訳ですが、そのチェックを行えるのがRWDPerfです。

RWDPerfの使い方

RWDPerfのインストールはnpmで行えます。

$ npm install rwdperf -g

その後、Chromeをサーバモードで立ち上げます。

$ sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 ----disable-cache

これで準備は完了です。Windowsでも同じように実行します。

そしてRWDPerfを実行します。

$ rwdperf -l http://hirondelleusa.org/ --width 400 --height 300 -m true -d 2 -s 2 -u "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"

例えばこれは幅400px、高さ300pxのデバイスでアクセスした場合を想定しています。ユーザエージェントも変更可能です。実行すると3000番ポートでWebサーバが立ち上がるのでアクセスします。

例えばこんな感じ。リソースがパイチャートになります。

使っていない画像、エレメントが表示されます。

リクエストが出ます。

同じくMOONGIFTの場合。

使われていないエレメント。非表示にしている情報があがっています。

リクエスト内容です。

スマートフォンなどは帯域も限られますのでなるべくリクエスト数が少ない方が良いでしょう。JavaScriptをまとめたり、使われていないエレメントを減らすといった工夫も必要です。RWDPerfはGoogle Chromeを使って実際のブラウザアクセスに限りなく近い解析ができるのが便利です。

RWDPerfはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

lafikl/RWDPerf