Gzip圧縮 mod_deflateとmod_expiresでwebサイト高速化大成功！

Gzip圧縮でWebサイト高速化してみる
WP HTTP Compressionプラグインを導入
mod_deflateとmod_expiresを使って速度改善

Gzip圧縮でWebサイト高速化してみる

日1000ページビュー行った時から時間があるときにPageSpeed Insightsでこのサイト(Bey.jpの速度を早くするように改善してます。ちなみに日1000ビュー行った5日後に日1700ページビューいきました(^^) ページビュー数が上がると嬉しいです。

現在のサイトのスピード　↓　はまだまだ遅いので改善が必要です。

今回はGzipとdflateを使ってCSS,JS,HTMLを圧縮してみます。

WP HTTP Compressionプラグインを導入

WP HTTP Compressionが圧縮してくれるプラグインのようなので試してみます。

ワードプレスのプラグイン＞新規追加でWP HTTP Compressionと検索窓に入れて検索します。

このプラグインは有効化するだけで設定は必要なさそうです。

WP HTTP Compressionを有効化してもう一度PageSpeed Insightsを分析してみます。

モバイル　結果 41　1ポイント上昇

パソコン　結果 54　1ポイント上昇

モバイル・パソコン両方共1ポイントずつしか上がりませんでした。

これはHTMLとTXTだけ圧縮するようなので、CSSとJSはまったく圧縮してなくてまだ「圧縮を有効にする」が「修正が必要」にあります。

これだとCSS,JSが改善されないので使わないようにします。

mod_deflateとmod_expiresを使って速度改善

調べていくとApacheのmod_deflateとmod_expiresを使えばサイトの表示速度を改善できるようです。幸いこのサイトのサーバーエックスサーバーはmod_deflateとmod_expires両方共使えるようなので早速設定してみます。

参考にしたサイトは、WordPressサイト用の.htaccess例とmod_deflate, mod_expires を使用してHTTP通信データ量を削減

mod_deflateの設定

mod_deflateはコンテンツを圧縮するApacheモジュールです。エックスサーバーのApacheは有効になっているので使ってみます。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系古いブラウザで無効/MSIEは除外
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gif,jpg,png画像ファイル圧縮済みの場合再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#好きなの圧縮 text,html,xml,cssなど
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
</IfModule>

こんなふうに設定してみました。設定は他のサイトでたくさん紹介されていますので参考にしました。ほとんど同じような設定でした。

この設定をエックスサーバーの /ドメイン/public_html/.htaccess に追加します。

キャッシュを操作するmod_expiresの設定

Apacheのモジュール mod_expiresはキャッシュを利用して転送量を減らしてくれます。

mod_expiresもエックスサーバーでApacheで有効になっているので.htaccessに設定するだけで使えます。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/x-icon "access plus 30 days"
ExpiresByType text/css "access plus 20 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
ExpiresByType application/x-shockwave-flash "access plus 1 years"
</ifModule>