Google PageSpeed Insights でパフォーマンスチューニング

Googleの Page Speed Insightsが新しくなったので試してみたけどかなり使いやすくなっています。Google Chrome Extensionsとしても公開されているのでChromeウェブストアからインストールできます。

インストールするとChromeのDeveloper Toolsの一番右にPage Speedというメニューが追加されています。パフォーマンスチューニングをしたいページを選んで左上の「分析」を押すだけです。

PageSpeed Insightsの分析画面

ちょっと待つと分析結果が表示されます。

PageSpeed Insightsの解析結果

結果は「高い優先度」と「中間の優先度」、「低い優先度」、「試験的なルール」に分かれているで何処から手を付けたらいいか一発でわかります。

例えば、「高い優先度」の「画像を最適化する」を見ると画像を圧縮しろと怒られます。どれぐらいファイルサイズが軽減されるかなども合わせて教えてくれます。

画像の最適化

「ブラウザキャッシュを活用する」を見るとExpiresでキャッシュが利用されてないファイルの一覧が表示されます。

ブラウザキャッシュを活用する

「CSSスプライトに画像をまとめる」を見るとCSS スプライト化したほうがよい画像の一覧が表示さます。

スクリーンショット 2012-06-20 16.09.14.png

PageSpeed Insightsはちゃんと日本語で解説してくれているし、やることが明確なので改善ツールとしてはかなり良いかなと思いますのでお試しあれ。（このサイトもスコアが悪かったので、そろそろCSS3でプチリニューアルしたいな。）

スポンサードリンク

«MacのCodeKitでCompassを使う | メイン | iOSシミュレータでWebインスペクタが利用できる「iWebInspector」»