サイトがどれくらいの速度で表示可能かを測定するChromeの拡張機能「Page Speed」。Firefoxには「YSlow」という同機能を持ったアドオンがあるが、「Page Speed」を使えば表示速度を落としている原因が探れる。インストール方法と使い方を解説。

ChromeでWEB制作をするなら拡張機能（エクステンション）の「Page Speed」を是非インストールしておきたい。
「Page Speed」の配布ページにも書いてあるが、
この拡張機能を使用するにはまず「試験運用版の拡張機能 API」を有効にしなければならない。
（※試験運用版の拡張機能 APIを有効にしていないと「Page Speed」をインストールしても起動しません）

アドレスバーに「 about:flags 」と打ち込み、
「試験運用版の拡張機能 API」を有効にしてChromeを再起動する。

少しわかりにくいが、
ページ中段にある「click here to install Page Speed for Chrome」からインストール。

①・・・
サイトのページ内で右クリックでして「要素の検証」、
または「Ctrl + Shift + I 」を押し、一番右にある  「Page Speed」を選択。
②・・・
左端にある「Run Page Test」をクリックして測定開始

このブログの表示速度の測定結果は以下。

赤色の部分が表示速度を落としている原因として指摘されている。
黄色は要注意。
緑色は特に問題なし。

CSSスプライトにするの面倒だったからさぼったらやっぱり指摘された・・・。
ついでだからCSSスプライトにしてみた。

ちょっとだけ改善された。
まあトップページはアイキャッチ画像使ってるから
個別ベージだと80/100まで向上した。

CSSスプライトはTonttuで作ったけど、サイト探したら閉鎖されてた・・・。
CSSスプライト作るなら「Sprite Cow」とか便利かも。

ちなみにこのブログのCSSスプライト画像はこんな感じ。