Yslow　[海外]

2009/07/20より林檎の木が新しくなったのをご存じでしょうか？ リニューアル？いえいえ。大幅な機能追加？違う違う。管理人が変わった？ 実は、2009/07/20より林檎の木はハイスピードバージョンとして生まれ変わりました！ 林檎の木は、速度的に次の一歩を踏み出しました。いわゆるネクストジェネレーション、これはもうネクストジェネレーション！

Yahoo！JAPANが2009/4/27にYahoo!ニュースを高速化したと発表しました。 なんと3〜5倍になったとか。なんだと、貴様、3〜5倍だと。3〜5倍って尋常じゃない数字だぞ、調子にのりやがって。 Yahoo！ニュースが3〜5倍なら私は、13〜15倍やったるわ！そんな、ビッグマウスのYahoo！がリリースしている、 WEBページパフォーマンスチェッカーがYslowです。FirefoxのアドオンであるFirebugに機能を追加するアドオンです。 アドオンのアドオンなので、Firefoxを入れる→Firebugを入れる→Yslowを入れるというステップを踏む必要があるので気をつけて。 Yahoo! Inc.が出しているので日本のYahoo！がYslow使ってるのかどうか知らないけど、私はYslowを使ってYahoo!ニュース以上の高速化を目指します。

Yslowを入れると、FirebugにYslowのタブが追加されます。それで、パフォーマンスを計測したいサイトまで行って、「Run Test」ボタンを押せ、押したれ。 計測が終了すると、全体のスコアと、パフォーマンスアップのために修正項目を表示（グレードA〜Fで表示。グレードが低いほどヤバイ）、 読み込んでいるファイル/画像/CSS/jsのサイズや読み込みに要した時間などの一覧、読み込んだファイルサイズの総計・キャッシュ使用時の読み込みファイルの総計をグラフで表示します。 こうやって示されたデータを元に高速化につとめるわけですね。やるぞー。出てきたレポートはこんな。林檎の木のTOPページで問題があるのは以下みたい。

F：Use a Content Delivery Network (CDN)
→コンテンツデリバリネットワークを使いなさい
F：Add Expires headers
→いまどきExpiresヘッダを付けてないとかありえない
F：Compress components with gzip
→gzip圧縮を有効にせよ
F：Configure entity tags (ETags)
→ETagsを適切に設定しろ
B：Make fewer HTTP requests
→HTTPリクエストをもっと減らせるから
F：Use cookie-free domains
→静的なファイルは、クッキーフリーなドメインを使え

うーん、上から4つはサーバー側で設定が必要な項目みたい。レンタルサーバーユーザーの私には手も足出ない。 賃貸のアパートに住んでいるのに、「エレベーターがぼろい」とか「外壁のペンキがはげている」とか指摘を受けた気持ち。 共有部分とか私に言われてもどうしようもないからー。
「B：Make fewer HTTP requests」は、手も足も出るぞ。CSSを6つも読み込んでいるから減らせとのこと。 CSSの@importという機能を使って、CSS内で別のCSSを読み込んでいたのですがこれをやめてCSSをまとめました。 @importを使うと、CSSを並列読み込みが出来ず速度的によろしくないらしいのでこれは期待出来る。
「F：Use cookie-free domains」続いてこれ。林檎の木ではソフト一覧のソート順や表示件数をクッキーに保存しています。 そのデータが「ringonoki.net」以下の画像、CSSなんかの静的なファイルにも無駄にくっついてしまう。 だからノリで取得して保有していた「keep-out.net」というドメインに画像やらCSSを移しました。もっててよかった独自ドメイン。
あとついでに、ディレクトリ検索で使用している各カテゴリのアイコンでCSS Spriteを導入してみた。 CSS Spriteってのは、アイコンなんかの画像をまとめて一つの画像にして、使う場所によって画像のこの部分と指定して使うこと。 こうすると、細かい画像で沢山リクエストをするより、まとめて一つにしてリクエストをした方が速いらしい。 試しに林檎の木のTOPのアイコンで右クリック→画像だけを表示とやってみてください。アイコンが全部くっついた画像が出るでしょ？ Googleとかでも使っているテクニック。
総仕上げに、画像の最適化をして画像のダイエット。YslowのComponentsからYahoo！のsmush.itという画像最適化サービスを使って 画像の最適化を出来るのでやったった。アイコンをまとめた画像は、1732 bytes → 1062 bytesの38.68%ダイエットと、これはなかなか効果ありそう。

はい、結果発表〜結果発表〜。読み込み時間平均は、Firebugの接続タブで5回計測して平均を取ったものです。

旧林檎の木
Grade: D（69点）
総読み込みサイズ：48.7 KB
読み込み時間平均：537.4 ms

新林檎の木
Grade: B（81点）
総読み込みサイズ：45.4 KB
読み込み時間平均：410.8 ms

おおおお、DからBですよ。頑張った甲斐があった。数値として表してくれると嬉しいですね。 サイズは、わずか3.3KBの減量。まあ元々、うちのトップは軽いはずなので乾いたぞうきんを絞ったって事でしょうか。 そんでもって、読み込み時間1.3倍速となりました。おめでとう！林檎の木おめでとう！ 当初の1.3倍〜1.5倍という目標もパス出来て胸をなで下ろしています。いやーよかった。

管理人おすすめ度：

( 2009/07/20 )