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



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

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

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

 

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

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

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

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

 

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

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

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

 

gzip確認ツール

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

GIDZipTest

 

gziptest
当サイトでは、このような結果になっています。結果はもちろん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さん

 

使えないサーバーもあります。

【mod_deflate】の部分で、コンテンツや画像などをgzip圧縮処理をして、転送速度を上げ、【mod_expires】の部分でブラウザキャッシュ設定する関数見たいです。

この2つの関数が、利用できるサーバーでなければ利用できないようですね。ちなみに、さくらインターネットはmod_deflateに対応していないらしく、この方法では圧縮出来ないので注意して下さい。ほかにも出来ないサーバーがあるかも知れないので、ご自身の環境でテストしてみて下さい。

 

出来てる~!

gziptest1

上記ソースコードを追記した後のGIDZipTestでの結果がこちらです。ちゃんとYesになっており、gzip圧縮されているようです^^Conpression%も76.2になっており、かなり圧縮されてるのがわかりますね。

 

ポイントの向上は果たせたのか?

とりあえず、施策前のパソコンのインサイトでのポイントです。
pc-page-speed-insights

 

そして、これがモバイルのポイント。
mb-page-speed-insights

 

 

施策後のパソコンポイント。

pc-gzip-pagespeed-after

施策後のモバイルポイント。

mb-gzip-pagespeed-after

 

結果的に

パソコン、モバイルともポイントが上がってます。修正が必要のところ部分の、圧縮を有効にするとブラウザのキャッシュを活用するが消えています^^

ただいかんせん、モバイルの数値はまだまだ低く、更なる改善が必要ですね。

 

まとめ

一定の満足感は得られたものの、モバイルのポイントがまだまだ低く、改善の余地が有ると思います。これは、サーバーやテーマによるところも多く。大幅に改善していくのは難しい部分がある事は致し方ないとは思いますが、それでもできるだけの施策はしていかないといけないと思っています。

更にテストを繰り返し、都度サイトで公表していきたいと思います。がんばるぜ~!!

次回はCSSとJavaScriptを改善 ⇒ 「Autoptimize」CSSとJavaScriptを縮小し最適化するプラグイン。

関連記事(提供リンク)

ページ上部へ戻る