Page Speed　[海外]

速くなければならないのですよ。もっと速く、もっと素早く、More speed.スピードはジャスティスです。速いからこそ評価されるんです。クリストファー・コロンブスだって1492年という早いタイミングで西インド諸島に到達したからこそ評価されているんです。私が、今アメリカに飛行機で行ったとしても誰も評価なんてしてはくれませんよ。せいぜいお土産を要求されるのが関の山です。アメリカ発見と同じ轍は踏むわけにはいかない。林檎の木ももっともっと速くサイトが表示されるようにならなければ。林檎の木高速化計画、題して「プロジェクト素早い動きの林檎の木がみたい」始まりました。

Googleでもサイト順位の決定指標の一つにサイトの表示速度を導入したと聞きます。SEO的にもページが速い方がプラス。さらにページの反応が0.5秒遅くなるとアクセス数が20%減るとも言われています。よーし林檎の木も高速化しちゃうぞ。でも何から手を付けたものか。そんな疑問にザシュッと答えてくれるのが今回導入したPage Speedです。FirefoxのアドオンのFirebugのさらにアドオンみたいなソフトです。導入するとFirebugに新たにタブが追加されFirebugの一機能のようにして動作します。Page Speedは現在閲覧しているページを解析しサイト高速化という観点から問題点を指摘してくれます。その指摘事項を一つ一つ直して行けば爆速になるという寸法です。Yahoo製のYSlowという同種のアドオンがあります。ちなみにこのPage Speed実はGoogle製です。GoogleがYahooに対抗してPage Speedを当てていったというところでしょうか。Googleはサイトの高速化に関して病的だともっぱらの噂です。試しにHTMLソースを林檎の木とGoogleで見比べてみてください。林檎の木はインデントや改行でそこそこ見られるソースなのに対し、インデントや改行すらも取っ払って軽量化しているGoogleのソースは何がなんだかわからない、やたら横に長い。ここまでするGoogleの出したアドオンこれは期待出来ますよ。

YSlowを林檎の木で紹介した時には、YSlowの指摘を元にTOPページを改修したので今回はソフトの詳細画面を高速化したいと思います。Page Speedは、「Page Speed Score」なる点数を表示しれくれます。高速化前の林檎の木の詳細画面のスコアは86点、これがどれだけ上がるか楽しみです。

Enable compression
gzip圧縮をかけましょうということ。ブラウザに返すテキストをGzip圧縮をかけると劇的に転送量を減らせます。イメージとしてはZIPで圧縮してからメールで送るような物でしょうか。圧縮解凍の手間がかかり余計にCPUのリソースは食いますが速くなる。最近知ったのですが私の使っているレンタルサーバーはApacheにmod_gzipがインストールされているので.htaccessに設定すればgzip圧縮使えるらしい。これは勝った。さっそくhtml、css、jsをgzipで圧縮するように設定。画像はすでに圧縮されているのでgzipをしても意味ありません。

Combine external CSS
外部CSSファイルを結合せよ。たくさんの外部CSSを読み込むとそれだけHTTPリクエストが多く発生しますから遅くなる。管理の都合上は分けていた方が便利なので林檎の木詳細画面の場合「ringonoki.css」「detail.css」「highslide.css」をロードしていた。後半二つを結合して「ringonoki.css」「softdetail_css」に集約。ringonoki.cssは全ページでロードするのでキャッシュが効いてむしろくっつけない方がいいかなーという判断。

Minify CSS
Minify Javascript
Minify、つまり余分なスペース、改行、コメント取れ取り去れって事ですね。でもMinifyしちゃうと可読性が著しく落ちるので、普段はスペース、改行、コメント有りで作って、アップロードする時に結合とMinifyをするプログラムを作りました。CSSのMinifyは自作、JsのMinifyはJSMinというライブラリを使いました。

Remove unused CSS
使っていないCSSの設定はやめましょう。画像をにょっきさせるhighslide用びCSSでたくさん使っていないCSSがあったので削除。

Leverage browser caching
ブラウザキャッシュを有効にしろ。そんな事言われても困ります。コンテンツにExpireという有効期限を付けてレスポンスを返せばこの指摘は消えるはずですが、私のサーバーには「mod_expire」が無さそう。mod_expire無しでExpireを付けるのはかなりトリッキーな事になりそうなのでパス。

Use efficient CSS selectors
効率の良いCSSセレクターを使え。「div.foo > a」こんな書き方は効率が悪い。ブラウザはこう書かれると全部のaタグを全部検索、その中でfooクラスを持つdivダグを親にもつaタグを探すという事をします。照合順序が左からではなく右から。だからaタグにクラスでも定義して「.bar」とかにした方がいい。ちなみに「a.bar」より「.bar」の方が速いとか。

Optimize images
画像の最適化。画像に含まれる余計なデータを削除して軽くしましょうって事。この画像とこの画像最適化した方がいいよとリストが出て、「Save as」を押せば最適化済みの画像を保存出来ます。

他のよくわかんない奴とか面倒そうな奴は無視。さらに言われなかったけど、CSS Spriteもやりました。アイコンなんかの画像を一枚にまとめてCSSで指定する手法です。星のアイコンとかを右クリックして「背景画像だけ表示」を選択してみてください。まとめた画像がみられます。さらにさらにアクセス解析のGoogleアナリティクスのタグを新しい非同期タイプの物に換装。これでアナリティクスがページのロードに悪影響が出なくなるはず。いやー疲れた疲れた、これだけやって速くならなかったら嘘でしょ。駄目だったら神なんていないでしょ。測定は、秀丸メールの詳細ページを10回Firebugの接続タブで計測して平均を取りました。

旧林檎の木
Page Speed Score：87点
読み込み平均：804.3ms

素早い動きの林檎の木
Page Speed Score：91点
読み込み平均：687.5ms

136.8msの高速化。27％の高速化。よすよすこんなもんでしょ。これで、むしろ遅くなったとかだったらどうしようかと思いましたよ。遅くなっていたら私は測定結果を捏造していましたね、きっと。今回思ったのは、Page Speedの言いなりになるのでは無く費用対効果を考えて高速化を実行する必要があるということ。今回は片手間でやったとはいえ、始めた時にはコートが必要だったのに、完成したのはTシャツ一枚でむしろ暑くなってから。詳細画面だけ回収するつもりが結局サイト全体を弄ることに。さらにcss、jsの結合、CSS Spriteを行ったので管理コストは間違い無く上がりました。つかれた。

管理人おすすめ度：

( 2010/06/27 )