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を分析してみます。
モバイル・パソコン両方共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>
各タイプのファイルを年月日時分おきにリロードしてくれてそれ以外はキャッシュに保存して読み込むので動作が早くなります。
このように設定してみました。「days」や「seconds」の前の数字の部分を自由に変更して設定してみてください。
mod_deflateとmod_expiresを設定した結果
またPageSpeed Insightsで分析してもらいます。
この2つの設定で劇的に効果がありました!パソコンは黄色ビックリマークになって、ほとんど改善しなくて良さそう?なくらい改善できました。
ただ、モバイルのほうはまだ60点なのでまだまだ改善する余地がありそうです。
様子をみてもう少し改善していきます。
コメント