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

YSlowで「Stats」ボタンを押すとキャッシュの状況が、「Components」ボタンを押せばコンポーネントごとの状態が表示される。それぞれの設定変更でどの程度の効果がでたのかをみてみよう。まず次の画像がExpires設定なし、Deflate設定なしの状態のStatsの表示情報だ。

ここでDeflate設定を有効にすると次のようになる。キャッシュ期間が短い場合やそもそも指定されてない場合はPrimed Cacheの表示がEmpty Cacheと同じか、さほど変わらない値となる。しかしながら同設定を実施することでHTMLやCSSファイルが圧縮され、転送量が抑えられていることを確認できる。

さらにExpiresの設定を有効にする。キャッシュが十分に効いている場合は不要なHTTPリクエストを発行しないため、転送量、リクエスト回数共に大幅に減少していることがわかる。先ほどの設定では、HTMLファイルのキャッシュ期間がExpiresDefault "access plus 1 hours"であるため、キャッシュが有効でないと判断されていることもわかる。