SEO対策に実際に効果はあるのかどうかは全くの謎ですが、ページスピードを上げておくのはきっと無駄なことではない！！
ということで、今回のテーマはページスピードを上げるために私が実際に行ったことを列挙していきたいと思います。
実際は項目ごとに記事を分けた方がいいとも思いますが、それはまた今後気が向いたときにでも。
まずはページスピードを測定してみる
実際自分のサイト（http://project-syatiku.com/）はどれくらいのスピードで表示されているのかわからないと対策のしようもないので、まずは測定。
測定は次の2サイトで行ってみました。
GTmetrix
検索で「ページスピード 測定」とかキーワードを入れるとだいたいでてきます。
GoogleとYahoo!両方での測定結果を教えてくれるので便利です。
PageSpeed Insights
Googleが提供する、ウェブページの高速化に役立つツール。
指定したページの表示スピードの状態を診断し改善点を提示してくれます。
アップデートされてモバイルのパフォーマンスも診断できるようになったようです。
診断結果と改善点の検証をする
では早速2サイトを使って診断してみると
診断結果
GTmetrix(Google:B，Yahoo!:D)と一見まずまず。
PageSpeed Insightsは62点（今回はPCのみで検証）と今まで何もしてこなかった割にはという点数が返って来ました。
両サイトとも診断結果の下部に改善点を載せてくれているので順番に修正をかけていくことにします。
ブラウザのキャッシュを活用する（Leverage browser caching）
GTmetrixの項目を上から順番に見ていくと、まず出てきたのは「Leverage browser caching」。
PageSpeed Insightsでいうところの「ブラウザのキャッシュを活用する」に当たる項目です。
.htaccessの編集(Apache)
「ブラウザのキャッシュを活用にする」には、.htaccessにディレクティブを追加すればよいので早速これを設定。
このブラウザのキャッシュは様々な種類のものが細かく設定できるので、こちら側から変更をかけないものは有効期限を長く、頻繁に変更するものは短くということも可能です。
※サーバーがApacheモジュールの mod_expires が使えることが前提
有効期限の設定は各行の末尾ですが、使用できる単位は「seconds, days, weeks, years」とあるようなので管理上わかりやすい記述でよいかと思います。
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType image/x-icon "access plus 1 weeks" ExpiresByType text/javascript "access plus 1weeks" ExpiresByType application/x-javascript "access plus 1weeks" ExpiresByType application/x-shockwave-flash "access plus 1weeks" #フォント ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" </ifModule>
キャッシュ時間が短いと言われる
この状態で再診断を行うと、「CSSのキャッシュ時間が短い」といったようなことを言われますが、編集期間がファイルの短い場合には問題はないかと思いますし、もう変更することはないと判断した場合にはキャッシュの有効期限を延ばそうと思います。
外部ファイルの読み込み（jQuery・Twitter等）
外部から読み込んでいるJSファイルは有効期限が反映されず警告が出るため、気になる場合はファイル自体をダウンロードして自分のサーバーに置くことをオススメします。
私はFacebook用のJSファイルがダウンロード形式のため外部ファイルについては妥協しました。
CSS @importの使用をやめる
GTmetrixの項目内に現れる「Avoid CSS @import」に対しての修正。
これはPageSpeed Insights側では指摘されてはいなかったが念のため。
CSSを複数ファイルに分割している場合に使用していた@importが指摘されていたのでこれをやめる。
方法としては、それぞれのCSSファイルの読み込みを全てheader.phpに書き込んだ。だけです。
CSSやJSのバージョン表記を一括削除
GTmetrix内の「Remove query strings from static resources」に対しての修正。
CSSやJavaScriptのバージョンといった静的リソースのクエリ文字列を削除しましょうという警告なのでそれを削除する方法を紹介します。
header.phpやfooter.phpに書かれている「?ver=1.11.0」等の記述を直接削除しても良いのですが、jsファイルまで含めると面倒なので
テーマ内のfunctions.phpに直接以下を記述しました。
// css、javascriptのバージョン表記を削除
function remove_cssjs_ver( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
※ただし、font-awesome.css内のクエリに関しては上記javascriptで対処出来なかったため、直接ソース内からクエリを削除しました。
Enable Keep-Aliveの設定
GTmetrix内の「Enable Keep-Alive」に対しての修正。
まず「Keep-Alive」とは何？というとことでググってみました。
「HTTP Keep-Alive 応答ヘッダーは、サーバーに対する複数の要求間でクライアント/サーバー接続を開いたままにすることによって、Web サーバーのパフォーマンスを向上させます。」
HTTP Keep-Alive 応答ヘッダーを有効にする (IIS 7)
だそうです。
パフォーマンスが向上することに問題はないかということでいざ設定します。.htaccessに以下を追加してサクッと終了。
<IfModule mod_headers.c> Header set Connection keep-alive </IfModule>
Enable gzip compression（gzip圧縮を有効化）
GTmetrix内「Enable gzip compression」についての対応。
PageSpeed Insightsでいうと「圧縮を有効にする」に当たる項目です。
読んで字の如く、圧縮を有効にすることでネットワークで送信されるバイト数を減らすための設定です。
こちらも.htaccessに以下を記述することで設定可能です。
<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip #DeflateCompressionLevel 4 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml </IfModule>
簡単に記述の流れを説明すると
gzip 圧縮転送に対応しているか確認
↓
画像ファイルなどの gzip 圧縮転送しても、サイズが小さくならないファイルに対するアクセスの場合は対象外になるように設定
↓
実際に gzip 圧縮転送の対象になるファイルの mime タイプを指定
となっています。
サイトに合わせて自分なりにカスタマイズしてください。
gzipが設定されているかの確認はこちら（GIDZipTest）
※php-fpmを使用してる場合、mod_deflateが使用できない場合があります。
HTML，CSS，Javascriptを縮小する（MinifyHTML，Minify CSS，Minify Javascript）
GTmetrix・PageSpeed Insightsに共通する項目「ファイルの圧縮」。
今まではできるだけプラグインを使わずに対応してきましたが、これはプラグインを使用して一括対応していきたいと思います。
Autoptimizeで一括圧縮
使用するプラグインは「Autoptimize」。
ページスピードについて考えるまでは耳にしたこともないプラグインでしたが、一括でファイル圧縮してくれるので非常に便利！！
※Javascriptによっては動かなくなるものもあるのでJavascriptについては設定を外す方が良い場合もあります。
画像を最適化（ロスレス圧縮）
GTmetrix内「Optimize images」についての対応。
PageSpeed Insightsでいうと「画像を最適化する」に当たる項目です。
記事内に画像を使うことは見栄え・内容わかりやすさの点で非常に有効だと思います。
しかし、画像がいかにきれいであっても読み込みのスピードに影響してしまっては何の意味もありません。
そこで、画像を最適化しストレスなくページを読み込ませる必要があります。
今回はプラグインとフリーの圧縮サイトの2パターン紹介します。
EWWW Image Optimizerで随時圧縮
使用するプラグインは「EWWW Image Optimizer」
プラグインの新規追加で検索すると見つかるので探してみてください。
EWWW Image Optimizerの設定
まずはプラグインの設定から
「設定」→「EWWW Image Optimizer」と進み、「Optimization Settings」の項目内「Remove metadata」にチェックを入れます。
この設定を行うことで画像に埋め込まれているExif情報を画像から取り除きます。1つ1つのExif情報は大したものではありませんが、画像が多い記事では効果を発揮するようです。
EWWW Image Optimizerで一括圧縮
このプラグインは過去の画像も一括で圧縮できるので、プラグインをインストールした後は1度実行しておきましょう。
「メディア」→「Bulk Optimize」に移動し、「Import images」をクリック。
まずは重複を防ぐためにメディアライブラリの画像を取り込みます。
終了後、再度「メディア」→「Bulk Optimize」に移動し、「Start optimizing」をクリック。
画像の最適化が始まればあとは待つだけです。もちろん画像の量により処理の長さは左右されるので早めの導入をオススメします。
一度プラグインをインストールすると、それ以降メディアにアップロードした画像は自動で最適化されます。
Webツールを使用して最適化（http://kraken.io）
メディアにアップロードしたファイルについてはEWWW Image Optimizerを使用して最適化できますが、FTPを使用して独自で作成したフォルダに画像をアップロードした場合は、アップロードする前に最適化をしておく必要があります。
そういった場合に便利なサイトが「Kraken.io」です。
ロスレス圧縮するために、設定2を「LOSSLESS」にする必要がありますが、それ以外は特に設定する必要はなく、ファイルをドロップするだけで画像を最適化できます。
あとは最適化された画像をダウンロードするだけです。
圧縮だけでなく画像は最適な大きさに
GTmetrix内「Specify image dimensions」についての対応。
サイト内で画像を使用する場合、表示の方法としてCSSで「width/height」を指定している人は多いと思います
もちろん私もその一人です。
理由としては「アップロードした画像と実際の表示サイズが異なるための調整」です。
ですが、これがまさか指摘されるとは…。
適したサイズで画像を使用する
CSSで指定したサイズと同じの大きさのサイズを使用するというのがスピードアップに必要らしく、「大きなサイズは小さくすれば問題ない」というのは大雑把すぎてダメなようです。
そこで適したサイズに画像をリサイズするためにプラグイン「Regenerate Thumbnails」を使用します。
まずは必要サイズの設定を
WordPressのデフォルトのメディアの設定は以下の通りになっておりサムネイル、中サイズ、大サイズ、フルサイズが生成され “wp-content/uploads/YYYY/MM/”に格納されます。
またこの値を全て0にすることでフルサイズのみ生成することも可能です。
ここで設定したサイズに、過去の画像を全て再生成してくれるのが「Regenerate Thumbnails」です。
Regenerate Thumbnailsでリサイズ
「ツール」→「Regen.Thumbnails」→「Regenerate All Thumbnails」をクリックすると上記で設定したメディアのサイズに全てリサイズされます。
これで実際に必要なサイズに画像がリサイズされ、適切な表示をすることができます。
あとがき
今回はページスピードを上げるために必要なことというテーマで記事を書きましたが、基本はSEO対策用です。
サーバー本体のスペックにより、逆に処理が重くなったりする可能性もあるのですべての設定が有効であるとは言えませんが、ある程度のスペックが保証されているのであれば効果は現れるのではないかと思います。
上記の設定をすべて適用したあとの結果を載せるとこうなりました。
結果的には全て改善されたと言っていいのではないかと思います。
ただ、Facebookやgoogleからjsファイル・CSSを読み込んでいるため、すべてを改善することはこのブログに関してはできませんでした。
すべてのファイルを自サーバーに置くことができればより改善される可能性は大いにありえますので自分なりにやってみてはいかがでしょうか。