ChromeのPageSpeedを使ってWEBページの最適化をしてみました。ページ全体の転送サイズを少しでも減らしましょうということで、それほど劇的に変わる話ではないし、体感はほとんど違いがないですけどね。
分析する
以前、YSlow というツールでやってみましたが（ YSlow の評価値を上げる ） 、今回は Chromeについている PageSpeedで分析しました。
Chrome でツール>デベロッパーツールを起動し、PageSpeedタブから”分析”をクリック でOK。
ブラウザのキャッシュを活用する
高い優先度で修正すべき内容として、いくつかのリソースでキャッシュの有効期限が指定されていないと指摘されました。
HTTPヘッダの Expires か Cache-Control max-age のどちらか、および Last-Modified かETagのどちらかを設定すればいいらしいのですが、どうやら、さくらインターネットのレンタルサーバではできないことのようなのであきらめました。
圧縮を有効にする
中間の優先度で実施すべきこととして、gzip や deflate を使用してリソースを圧縮せよと指摘されました。以下のページを参考にして、.htaccess の記述で対応する方法を採用。実施後に分析しなおすと指摘が消えていたのでうまくいったようです。
http://web.tvbok.com/web/server/css_js_gzip.html
いくつかのリソースについてやってみただけなので、すべてのページで指摘がなくなったわけではないです。でも、多くのページで共通に読み込まれるサイズの大きなリソースについて圧縮をかけたので効果はありそうです。以下の5行を .htaccess に追加しました。
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} “.(css|js|html?|xml|ttf)$”
RewriteCond %{REQUEST_FILENAME} !”.gz$”
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
画像を最適化する
PNGやJPEGなどの画像を最適化するとさらにサイズが小さくなるんだとか。簡単に最適化するツールがあるのでサーバ上にインストールしました。jpegoptim と OptiPNG です。これらを使ってサーバ上の画像を一気に最適化しました。
CSS/JavaScript を縮小する
別々のファイルになっているCSS、JavaScriptをまとめて圧縮する機能が、もともと Drupal についていて有効にしてあります。環境設定>開発>パフォーマンス の設定ページから ”CSSファイルをまとめて圧縮する” と ”JavaScriptファイルをまとめる” にチェックをいれるだけでOK。
