.htaccessでgzip圧縮とキャッシュを行ってページスピードインサイトのポイントが向上！？ |

2014-10-22
Update 2018-5-7
Wordpress
munchen

圧縮とキャッシュ対策をする。

みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！前回の記事Googleページスピードインサイトでの修正アドバイスを受けたので、少しでもポイントを上げる為、実行に移していこうと言う今回の企画。

しかし、前回でも言ったように、全く持ってどう修正すればいいかが分からないので、Google先生にて検索する事数時間。ちょっと試してみようかな？と言う記事が見つかったので、参考にさせていただきました。

gzip化して表示速度を上げる。

ウェブサイトは、ブラウザから閲覧要請があった場合に、その都度サーバーとのやり取りを行っているのですが、そのファイル容量が大きければそれだけ表示速度が遅くなってしまいます。

その、ファイルを圧縮してサーバーとのやり取りをスムーズにしてやろうというものです。この方法には、「WP HTTP Compression」等のプラグインが出ていますが、Google検索はやっぱすごいですね。

暫く調べていると、.htaccessにソースを追記するだけでgzip化で出来るようで、プラグインをあまり増やしたくない方にとっても良い方法ではないかと思います。

プラグインではなく.htaccessで対策。

今まで、わからないところは、すぐにプラグインに頼るようにしていたのですが、修正項目に私の大嫌いなキャッシュしなさいと言うのがあったのですが、悩みに悩みぬいた末に「プラグイン使わね～。」という方向で行ってみたいと思います。

今回は参考にさせていただいたソースは、.htaccessを使って静的ファイルのキャッシュとgzip圧縮ができるようですので、大変助かります^^

gzip確認ツール

まずは、サイトがgzip化されているかを調べるために、以下のサイトでURLを入力して調べてみましょう。すでになっていたら意味ないですからね。

GIDZipTest

当サイトでは、このような結果になっています。結果はもちろんNoですね。施策していないんだもん当たり前といえば当たり前。これがどうなるか楽しみです^^

.htaccessに追記するソース。

ffftpツールなどで、.htaccessをダウンロードし、以下のソースを追記し、アップロードしてあげれば完成という簡単設定です。簡単と言っても出来上がったソースを追記するだけなので簡単というだけで、ソースの作成者の方には本当に頭が下がりますm(__)m

.htaccessダウンロードする前に、TeraPadを使えるようにしておくと、編集作業がしやすいと思います。

こういった作業をする前には必ずバックアップをとってからやるようにして下さい。不具合がおきても当サイトでは責任を負えませんので、慎重に作業して下さい。

AddType image/x-icon .ico

<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
</IfModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

FileETag none

<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>

上記のソースコードを、.htaccessにコピペするだけの簡単設定です。どの関数が、どういった意味を持つのかはご紹介されているブログに詳細説明されていますのでご覧ください。

WordPressサイト用の.htaccess　dogmap.jpさん