Webサイトの高速化は、スマートフォン利用者が増えてきたことでより一層顕著に求められるようになった気がします。
そこで、今回はサイトパフォーマンスツールのYSlowの評価から、主な指摘の修正方法を挙げたいと思います。
YSlowの使い方
利用するには主に以下の方法があります。
Webサービスを利用する
GTmetrixという便利なサイトがあります。
このサイトでは登録などをする必要がなく、YSlowのチェックをすることができます。
他にも、Googleが提供する「Page Speed」のチェックも合わせてすることが可能です。
firefoxの拡張機能を利用する
firefoxの拡張機能（アドオン）として、YSlowが提供されています。
他の拡張機能と同様に、firefoxのブラウザで下記のURLを開きインストールをするだけです。
（※ Firebugもインストールされている必要があります）
https://addons.mozilla.org/ja/firefox/addon/yslow/
インストール後は、再起動することでFirebugの追加機能として使うことができます。
主な指摘と対応方法
ここでは、私が指摘された内容と対応方法をご紹介したいと思います。
Make fewer HTTP requests
HTTPリクエストの数を減らしよう。ということです。
つまり、画像の数を減らしたり、cssやjavascriptの数を減らせば良いということです。
私はcssやjavascriptを削れなかったので、一部の画像ファイルをcssスプライト化することで対応しました。
画像をBASE64エンコードして埋め込むのも、方法としてはアリかもしれません。
Uses ContentDelivery Network（CDN）
CDN(Contents Delivery Network)を利用しよう。ということです。
大規模システムでない限り無視していいと思います。
個人サイトレベルだと必要ないし、お金もかかってしまって大変なので。
Addan Expires header
Expiresヘッダーを追加しよう。ということです。
これを設定することでキャッシュの有効期限が設定されるので負荷が減ります。
有効期限を長めに設定しないと、この指摘は消えませんが、長くし過ぎると今度はファイル変更時に不具合が生じる可能性があります。
とりあえず、私は「.htaccess」ファイルを以下のように設定することで対応しました。
ExpiresActive On ExpiresDefault "access plus 1 month"
Put JavaScript at the bottom
JavaScriptは下に配置しよう。ということです。
headタグの中でなく、最下部(htmlの閉じタグの直前)に記述しましょう。
ただし、素直に変更することでレイアウトが崩れるなんてことも起きかねません。
確認しながら修正する必要があります。
同様に「Put CSS at the top」という指摘も存在します。
こちらは逆に、headタグ内にcssを記述すれば問題ありません。
ReduceDNS lookups
DNS Lookupsを減らそう。ということです。
SNSボタンやブログパーツをたくさん使用していたり、アフィリエイト広告が多く貼られている場合は限度があるかもしれません。
Minify JavaScript and CSS
JavaScriptやCSSは最適化しよう。ということです。
JavascriptやCSSのファイルに、空白や改行など不要な部分が含まれている場合、まだサイズを縮小できるとして指摘されます。
これも可読性との兼ね合いや、他のWEBサービスとの兼ね合いなどがあるかと思います。
jqueryの場合「min」の方を使うなど、やれる限りの事はやっておいた方が良いかと思います。
Configure entity tags (ETags)
Etagを設定しよう。ということです。
Etagとは、ファイルの同一性を識別するためのタグとのことです。
基本的にはそのまま設定する必要はないと思うので、評価だけを見直してもらえるように対応します。
とりあえず、私は「.htaccess」ファイルを以下のように設定することで対応しました。
FileETag MTime Size
コメント