Webサイトの表示速度は重要です。スマートフォンなどにおいても表示が高速に行えなければ訪問者はあっという間に離れてしまいます。Google Chromeなどの開発者用ツールではリソース単位で一覧表示はできますが、今ひとつ実感として沸きづらいのが難点です。 そこで使ってみたいのがPerfmapです。リソース単位の表示速度をヒートマップ風にビジュアル化してくれるGoogle Chrome機能拡張です。

Perfmapの使い方

PerfmapはChrome Web Storeで配信されていますのでインストールは簡単です。アイコンが表示されたら準備完了です。

そして任意のWebサイトを表示し、アイコンをクリックします。

緑であれば総じて問題はないでしょう。2つの数字があり、一つ目はページが読み込まれてから何ミリ秒後に表示されたかで、二つ目は画像の読み込みにかかった時間になります。Ajaxを使っていたりすると遅い傾向があります。別なサイトではかなり真っ赤です…。

PerfmapはResource Timing APIを使って、その結果をリソースごとにビジュアル化しています。ビジュアル化されることで改善ポイントが分かりやすくなります。赤い部分を徹底的に改善していくことでユーザ体験も改善されていくことでしょう。

PerfmapはGoogle Chrome用のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Perfmap - Chrome Web Store zeman/perfmap