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

ここでは実際にYSlowを使ってWebページの表示パフォーマンスを測定し、ひとつひとつチューニングを実施していく方法を紹介する。用意したのは9つの画像を表示する単純なHTMLファイルだ。複数のファイルに分割されたCSSファイルも指定してある。画像を9つ用意した理由は、後で1つの画像に統合して改善効果がみられるかどうか確認するためだ。

まず次の結果をみてほしい。これが初期状態だ。Expires、Deflate、ETagのすべてをデフォルトに設定してある。測定結果は2、3、13がF評価という状況だ。統合得点は67点。2はCDNを使えということなのでここでは無視するとして、3から改善していく。

3ということはExpiresの設定をすればいいわけだから、HTTPdサーバにExpiresの設定を追加する。たとえば次のような設定を追加すればいい。キャッシュ期間が3日間未満の場合はキャッシュが十分に有効だと判断されずに評価が変化しないこともあるため注意されたい。ファイルを置き換えてもキャッシュ期間が過ぎるまでは再読み込みが発生せずに結果に反映されないことがある。これを解決するために、画像やCSS/JavaScriptファイルのファイル名にバージョン番号をつけて管理したうえで、キャッシュ期間を長くして運用することもある。

リスト1 Expiresの設定を追加する(Apache HTTPd Serverの場合) - 3日未満にしておくとキャッシュが有効だと判断されないこともある

<IfModule expires_module>
  ExpiresActive On
  ExpiresDefault "access plus 1 hours"
  ExpiresByType image/jpeg "access plus 3 days"
  ExpiresByType image/gif "access plus 3 days"
  ExpiresByType image/png "access plus 3 days"
  ExpiresByType text/css "access plus 3 days"
</IfModule>

HTTPdサーバの設定変更後の結果が次の画像だ。3.の項目がA評価に変化していることがわかる。Expiresの設定はもっともわかりやすい評価結果だ。総合評価も一気に84点までアップした。