Firebugでラクラク診断?Yahoo!が明かすページ表示の高速化13のルール | 株式会社イー･エージェンシーのコラム
結論から言うと確かにこれは面白い。あくまでYahoo!ノウハウに基づく基準なので、そこまでやる必要はないとか、システム/予算的に無理とかいうこともあるけれども、きちんとした理由で「このサイトのここがダメだからこう直した方が良い」というのがわかるのがいい。それを直しさえすればいいかどうかは別にして、「1つの統一された基準で問題の切り分けを行ってみる」というのは、問題を把握する上で役立つものだなぁと。
ちなみに参考までに指摘されたチェックポイントから抜き出してみると。
- HTTPリクエスト多すぎ
- .jsファイルがたくさん読み込まれているので1つにまとめてみては
- .cssファイルがたくさん読み込まれているので1つにまとめてみては
- 背景画像が多く使われているのでCSS Spriteを使ってみては
- 静的ファイルにExpiresを設定した方が良いよ
- 静的ファイルにもgzip使った方が良いよ
- 静的ファイルのドメインではCookieは使わない方が良いよ
- 画像の表示サイズをHTMLやCSSで変更するのは控えた方が良いよ
- DOM Elementsの数が多すぎ
- 静的ファイルのETag設定は無効にした方が良い
- CSSファイルはheadの中の上の方に配置した方が良い
- JavaScriptはHTMLの中の下の方に配置した方が良い
1については問題のある箇所がはっきりしていてか把握しているのだけど、CSSの構造を変えるって結構手間なんだよね…JavaScriptの方は読み込んでるのは殆どライブラリなのでまとめるのは難しいかも。無理にまとめても良いけどさ。
2についてはとりあえず.htaccessで対応しておいた。httpd.confに書くべき何だろうけどmod_expiresは既に読み込まれていたし、httpdを再起動したくなくて。
3についてはなんとも。どの程度の改装が必要なのか読めないので保留。
4についても一応、よく使われる静的ファイルをアプリケーションサーバと分ける方向で考えてはいるのだけど、いろいろ問題があって今のところは実現しそうにない。
5については出来る部分については対応した。出来ない部分については放置。ていうかしょうがない。画像を増やすまたはオンザフライで生成するという手が思い浮かぶけど、それのコストが見合うとは到底思えないので。
6については…そんなこと言われてもなぁ。確かに調べてみると他のサイトに比べてかなり多いんだけど、だからといって簡単には減らせない。
7についてはそのように設定。
8については一応そのようにテンプレート書き換え。一部、body内でCSSファイル呼び出して怒られてたのでそれについては修正予定で。
9については…なかなか難しいけど、出来ればしてみてもいい。ただ、head内でJavaScriptの準備をするサイトなんかたくさんあるわけだし、結局はライブラリ呼び出しすぎを解決したら多少はマシになるのかな。
とりあえずディスクI/Oがかなりのボトルネックになってるので、その辺りの改善を重点的にしているんだけど…やっぱ、サーバ増やさないとダメだろうなぁ。最終的には。
