エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


.htaccessのmod_deflateでファイル圧縮送信で高速化でSEO対策!

      2017/03/08

mod_deflateを使って高速化する

 
この記事では「mod_deflate」を使って、ファイルを圧縮して通信にかかるスピードを高速化しよう、という対応の解説を行います。
このブログが WordPressでできていますので WordPressを想定して書いていますが、WordPressに限らず、ほとんどの Webサイトに内容をコピペして「.htaccess」に追記することで高速化できるでしょう。
 
 

mod_deflateとは?

 
「mod_deflate」は、コンテンツファイルを圧縮することで、通信するファイルの容量を減らし、画面表示を高速化するための仕組みを提供する Apacheのモジュールです。
 
20150324_web_01
 
この「mod_deflate」モジュールを使うことで、上記の画像の説明の様に
  サーバ上のファイルを送信 → 通信 → ブラウザで表示
となっていたものを
  サーバ上のファイル・圧縮 → ファイルを送信 →
    通信 → ブラウザ側で解凍 → ブラウザで表示

といった感じの処理に変わります。
 
最近のサーバ、パソコンなどは CPUの処理スピードが驚異的に向上していますので、サーバでファイルを圧縮する時間、ブラウザでファイルを解凍する時間を考慮しても、ファイルをそのまま送信するのにかかる時間の方が大きいであろう、という判断からこのモジュールを使うことになります。
 
そのため、サーバの環境や表示するパソコンなどの端末の環境によっては、このモジュールを使うことで表示スピードが遅くなる場合もありますが、少なくとも一般的に提供されているレンタルサーバであれば、サーバ側の CPUの処理スピードが問題で遅くなるということを心配する必要はないでしょう。
 
 

.htaccessに mod_deflateを設定

 
「mod_deflate」の設定は、Apacheのモジュールですので、Apacheの設定を変更する方法もありますが、レンタルサーバではその方法を使えるところはほとんどないため、より一般的な .htaccessで設定を行います。
 
 

.htaccessに mod_deflateを設定を追記する

 
WordPressのルートフォルダにある .htaccessに下記のコードを追記します。
WordPressはデフォルトの設定で .htaccessを生成して利用していますので、その .htaccessファイルに追記します。
 
「#」で始まる個所はコメントですので、その部分は削除しても問題ありません。
 
 

 
 

mod_deflateの設定方法の解説

 
上記のソース内にコメントを書いていますので、基本的にそれ以上の解説はないのですが、
 
2行目:<IfModule mod_deflate.c>
モジュールの有無を確認し、設置されている場合のみ処理を実行します。
 
3行目:SetOutputFilter DEFLATE
DEFLATEのモジュールを使うことを宣言します。
 
6行目~8行目
ユーザーエージェントでブラウザを確認し、
Mozilla4.06、Mozilla4.07、Mozilla4.08はエラーがあるので「no-gzip」で圧縮をしない設定にします。
古いブラウザである Mozilla4系は「gzip-only-text/html」で HTMLだけ圧縮します。
ただし、Mozilla4系でも Internet Explorerは対応しているため、IE7、IE8は上記の指定を適応しない設定にします。
 
11行目
すでに圧縮してある画像ファイルは再圧縮してもファイル容量は小さくならず、CPU資源を消費するだけなので対象外の指定をします。
 
13行目
プロキシサーバが間違ったコンテンツを配信していないことを確認するための処理です。
 
16行目~
HTML、CSS、JavaScriptのファイルなどを圧縮する設定です。
また、上記のサンプルでは 1行に 1つの MIME Typeの設定を記述していますが、下記の様に 1行ごとに書く方法もありますし、スペースで区切ってまとめて書く方法もあります。

 
 


 

.htaccessで設定した mod_deflateの確認方法

 

HTMLのレスポンスヘッダーの確認

 
まず、.htaccessで設定した mod_deflateが有効になっていることの確認方法を説明します。
 
ここでは Google Chromeの「デベロッパーツール」で説明をしますが、IEの「開発者ツール」や FireFoxの「開発ツール」や Firebugなどの HTMLヘッダー情報が確認できるツールがあれば確認ができます。
 
20150324_web_02
 
Chromeに mod_deflateを設定したサイトの URLを入力し、画面を表示させて、「デベロッパーツール」を開きます。
「デベロッパーツール」は、Chromeの右上の「三」のようなアイコンをクリックし、「その他ツール」-「デベロッパーツール」で起動できます。
ショートカットでは「Ctrl+Shift+I」か、「F12」で起動します。
 
20150324_web_03
 
デベロッパーツールが起動したら、メニューから「Network」を開きます。
確認する画面をリロードさせます(ブラウザ側でもデベロッパーツール側でもどちらでリロードしてもOK)。
 
サーバからのレスポンスの情報が表示されますので、一番上の HTMLの情報をクリックします。
 
タブは「Headers」を選びます。
表示される「Response Headers」を表示させると、その中に「Content-Encoding:gzip」があれば正しく設定が反映されていることが確認できます。
 
似たような「Request Headers」というものもありますので注意が必要です。
ブラウザからのリクエストに対して、サーバが「gzipで圧縮しています」というレスポンスを返している、ということを確認していることになります。
 
 

スピード改善の確認

 
続いて、実際にスピードが改善しているかの確認です。
mod_deflateの設定が正しく反映されていても結果スピードが改善していなければ意味がありませんね。
 
そんなわけで、上記のデベロッパーツールを使わずともスピードが改善していれば OKってことであればこちらの確認だけで OKですね。
 

 
 
「PageSpeed Insights」は、Googleの WebMasterToolsの中にありますので、ご存知の方は多いと思いますが、「GTmetrix」もメジャーな測定ツールですので併せて利用するといいでしょう。
 
 

mod_deflateを使ってのスピード評価の変化について

 
このエス技研の技術ブログで実際に試してみた「PageSpeed Insights」の結果は以下の通りです。
 
20150324_web_04
 
【ロリポップ】
       元   適用後
  モバイル 58 →  58
  パソコン 70 →  70

 
【X Server】
       元   適用後
  モバイル 56 →  60
  パソコン 65 →  72

 
この実験をしてみて知ったことですが、ロリポップのサーバは Apacheの設定で mod_deflateが有効になっていますので、.htaccessでわざわざ設定する必要なく mod_deflateが有効になっています。
そのため、すでに高速化されているわけですので値に変化がありません。
 
X Serverの場合は、mod_deflateを設定することで 1割ほどポイントがよくなっていることが確認できます。
ただ、「mod_deflate」を設定しないとロリポップサーバより遅いと言うことが分かります。このサーバ毎の比較実験結果は現在記事を作成中ですので乞うご期待!
 
 

mod_deflateを使う上での注意点

 
最初に書くべきであったかもしれませんが、この「mod_deflate」が利用できないサーバではこの高速化処理は利用できません。
 
「mod_deflate」が利用できるかどうかは、phpinfoの環境確認コマンドで確認することもできます。
 

 
下記の 1行を記述した「phpinfo.php」ファイルを作成し、サーバにアップして、そのファイルにアクセスをしてみてください。
そうすると PHPに関するサーバの設定情報が表示されますので、「deflate」で検索を行って何かしらヒットすれば、「mod_deflate」がインストールされていることが分かります。
 
 
まぁ、おおよそ有名どころのレンタルサーバは対応していますので、気にする必要はない状況ですが。
(さくらインターネットでは使えないと書かれている記事も見かけましたが、現在は使えるようになったという記事もありました。)
 
 

mod_deflateを使う上での注意点・その2

 
ここで紹介してる「mod_deflate」「mod_expires」の設定は、WordPressのキャッシュ設定のプラグイン「W3 Total Cache」も同様の処理を追加する機能があります。
そのため、それらを同時に使用するとキャッシュが機能しない場合も出てきますので、「W3 Total Cache」を使うのであれば、ここで解説した .htaccessへの設定を止める方がよさそうです。
 
 

さらなる高速化に向けて

 
さらに表示スピードを上げる方法として、Apacheの「mod_expires」というモジュールを使ってブラウザに画像やフォント、JavaScriptなどのファイルをキャッシュさせる仕組みを利用する方法があります。
そちらについては「SEO対策!.htaccessのmod_expiresでブラウザキャッシュで高速化」に書いていますので参考にしてください。
 
同じように .htaccessに記述すれば OKです。
「mod_deflate」と「mod_expires」の記述の順番は試してはいませんが、どちらを先に書いてもよさそうです。
 
 
また、ページ表示の高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

 - プログラミング・Web関連技術

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

Webサイト公開時に重複コンテンツを排除する.htaccessのリダイレクトの設定のまとめ

サイトを公開する際にはURLの正規化は必須です。正規化とは何かを解説し、.htaccessに設定すべきリダイレクトの設定を具体的に説明します。

Gitで「fatal: Authentication failed for 'https://example.com/git_repositories/example.git/'」のエラーが出た場合の対処方法の一つ
Gitで「fatal: Authentication failed for ‘https://example.com/git_repositories/example.git/’」のエラーが出た場合の対処方法の一つ

Gitのリモートリポジトリにアクセスする際、Authentication failedのエラーが。しかし、ID、PASSが間違っているのではなく、リモートリポジトリのURLが間違っている場合もあるので再度確認を。

PythonでMySQLへの接続ライブラリMySQL-pythonの簡単インストール方法

PythonはMySQLに接続するライブラリは別途インストールが必要。なのでMySQL-pythonライブラリのインストール方法とサンプルスクリプトで動作検証までを解説。

So-netのレンタルサーバHSはヤバイ・借りてはいけないレンタルサーバリスト

餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、単独でSo-netを紹介。OEMでサービスの提供を受けているだけなので何とも残念すぎる内容。

.gitignoreを更新しても反映されないときは「git rm -r --cached .」でキャッシュを削除
.gitignoreを更新しても反映されないときは「git rm -r –cached .」でキャッシュを削除

gitの.gitignoreを変更しても記述内容が反映されない時がある。それはGitのキャッシュが残っているため。そんなときは「git rm」コマンドを使ってキャッシュを削除すれば解決する。

XSERVERにCakePHP3をインストール。コマンドラインのPHPのバージョンを変更する方法で解決

XSERVERにCakePHP3をインストールするときに問題となるのはサーバーパネルとSSH接続の時とで認識されるPHPのバージョンの違いがあるため。その解消方法を解説する。

chromedriver.exe - ディスクがありませんと出てSeleniumの設定が上手くいかない
chromedriver.exe – ディスクがありませんと出てSeleniumの設定が上手くいかない

Selenium WebDriverを使ってChromeを自動操作する仕組みを作る際、chromedriver.exeを利用しますが、ディスクがありません、というエラーが発生する場合があります。その対処方法を解説します。

X Serverへの引越しの注意点まとめ。ロリポップとの違いと対処方法 6事例

ロリポップからX Serverに引越し。ロリポップとX Serverの違いに注目することでX Serverの設定方法を明確にします。またX Serverならではの設定ポイントなども解説。

.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策!

Page Speed Insightsの指摘事項のファイルのブラウザキャッシュの設定方法。解説もしてるけど、.htaccessにコピペするだけの簡単設置で効果抜群!SEOにも威力を発揮!

PythonでURLの有無、存在をチェックするスクリプト

PythonでURLが存在するか否かのチェックスクリプト。ライブラリ「urllib2」を使い、指定のURLにアクセスしそのレスポンスコードを判別するという仕組み。