YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを!

YSlowの評価結果はA(最良)からFまでの6段階評価で、評価できなかった項目についてはn/aで表示される。それぞれの項目をクリックするとヘルプページにジャンプするので、このままでもそれなりに扱える。YSlowのメニューからHelp→YSlow Helpを選択するとヘルプサイトに飛ぶので、本格的に使う場合には同ページを一度全部読んでおきたい。ここでは各項目がそれぞれ何を意味しているかを簡単にまとめておく。

1	Make fewer HTTP requests	HTTPリクエストの数をもっと減らせるのではないか
2	Uses CDN	CDNを使っているかどうか	予算との兼ね合いだが、CDNが使えるならそちらのほうが高速になる
3	Add an Expires header	Expiresを使っているかどうか	Expires期限をだいぶ先に設定して長いことキャッシュが効くようにする
4	Gzip components	圧縮機能を有効にしているかどうか	HTTPの圧縮通信機能を有効にしてテキストデータは圧縮して通信した方が高速になる。指定するのはGzip
5	Put CSS at the top	CSSを上部に配置しているかどうか	上部に配置しておけばコンテンツが逐次表示されるようになる
6	Put JS at the bottom	JavaScriptを下部に	CSSを上に配置した場合はJavaScriptは下に配置した方がいいことが多いとか
7	Avoid CSS expressions	CSS expressionを使ってしまっているかどうか	expression関数は何度も実行されるので処理速度の遅延を招く
8	Make JS and CSS external	JavaScript/CSSを外部ファイルにできるのではないか	ファイルサイズが大きい場合は外部ファイルに分離した方がキャッシュが効くため高速になる。サイズによってはケースバイケース
9	Reduce DNS lookup	DNSルックアップをもっと削減できるのではないか	あまりたくさんホスト名を指定しないほうがいいのではないか、という指針
10	Minify JS	JavaScriptの縮小化を実施していないのではないか	YUI Compressorを使うなどしてJavaScriptを縮小化した方が高速になる
11	Avoid redirects	リダイレクトしていないか	リダイレクトするとその分遅くなる。URLの最後にちゃんと"/"をつけるなど細かい調整も大切
12	Remove duplicate scripts	スクリプトの重複があるのではないか
13	Configure ETags	ETagsの設定が誤っていないか	ETagsを正しく指定するか、指定方法がよくわからないなら無効にしてしまった方が効果的とされている

もっとも、2のCDNでA評価を得るには、CDNを使っている必要があるので、ほとんどの場合は難しいだろう。ほかにも評価結果がBやCになっているからといって、パフォーマンス上は問題がないこともある。細かい調整はケースバイケースだ。すべてA評価とかありえるのかという話になるわけだが、Googleのトップページはさすがにいい評価を実現している。