エス技研

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


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

      2017/03/07

mod_expiresを使って高速化する

 
この記事では「mod_expires」を使って、キャッシュの処理を定義することで、画像やフォント、JavaScriptなどを再度読み込むことがないようにすることでスピードを高速化しよう、という対応の解説を行います。
このブログが WordPressでできていますので WordPressを想定して書いていますが、WordPressに限らず、ほとんどの Webサイトに内容をコピペして「.htaccess」に追記することで高速化できるでしょう。
 
 

mod_expiresとは?

 
「mod_expires」は、キャッシュ(cache)を設定することで同じファイルを何度も読み込む必要がなくなることで、画面表示を高速化するための仕組みを提供する Apacheのモジュールです。
 
「キャッシュ」は Web業界にいるとよく聞く言葉の一つでありつつも、それを正確に理解している人は多くない言葉でもあると思うわけですが、キャッシュについては下記のサイトに分かりやすく説明がありましたので参考にしてみてください。
 http://www.atmarkit.co.jp/ait/articles/0305/10/news002.html
 
ここで設定するのは、「クライアントマシン(ユーザのPC)上のブラウザ」にキャッシュを保存させて、再度のアクセスがあった際に表示スピードを向上させるための方法になります。
 
なので、初めてアクセスするサイトの場合は早くはならないわけですけどね。
 
 

.htaccessに mod_expiresを設定

 
「mod_expires」は Apacheのモジュールですので、まず Apacheに基本的な設定を行って、.htaccessでサイト単位で最適なキャッシュの設定をファイルの種類単位での設定を行うことが一般的です。
 
どんなファイルも区別することなくキャッシュしてしまうと、情報を更新したのに見ているユーザの画面は更新されていないという事態も起こりますので、頻繁に更新する可能性があるものと、基本的に更新がないものとに分けて設定を行っていきます。
 
 

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

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

 
「『86400 seconds』は 1日です」といった解説をしているサイトもありますが、上記の通り、「years」「months」「weeks」「days」「hours」「minutes」「seconds」が使えますので、秒で表現する必要があるわけではありません。
 
使う機会はないかもしれませんが、「"access plus 15 days 2 hours"」のような表現も可能です。
 
 

mod_expiresの設定方法の解説

 
上記のソース内にコメントを書いていますので、基本的にそれ以上の解説はないのですが、
2行目:<IfModule mod_expires.c>
モジュールの有無を確認し、設置されている場合のみ処理を実行します。
 
3行目:ExpiresActive On
mod_expiresのモジュールを使うことを宣言します。
 
6行目:ExpiresDefault "access plus 1 seconds"
デフォルトの設定として、一度すべての MIME Typeのキャッシュを 1秒に設定します。
そして、9行目以降の各 MIME Typeで設定されているキャッシュの指定があるものについては、その指定に従ってブラウザにキャッシュする期間が設定されていきます。
 
ここに設定されていない MIME Typeのファイルを使っている場合でキャッシュの設定をしておきたいものがあれば追加をしていきます。
 
 


 

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

 

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

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

スピード改善の確認

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

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

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

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

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

 
【X Server・Lazy Loadを不使用】
       元   適用後
  モバイル 36 →  37
  パソコン 42 →  45

 
ロリポップ、X Serverともに微増という感じで、期待していたほどの効果はなかったのが実情です。残念ですね。
 
そもそも、初めてサイトにきてくれたユーザには役に立たない施策ですので、評価としてはこんなものかもしれないですね。
ただ、リピーターのユーザが多いサイトは、リピーターには嬉しい施策ですので是非とも対応しておきましょう。
 
 
ちなみに、3つ目の「X Server・Lazy Loadを不使用」は、画像などを事後読み込みする Lazy Load系のプラグインを Offにして実験をした結果です。
 
Lazy Loadを使用しないと読み込む画像が増えますので、それをキャッシュすることでレスポンスの向上が期待できる、言うことでスコアの上昇幅は Lazy Loadを使っているときより大きいのだと思われます。
ただ、だからといって Lazy Loadを使わない理由にはなりませんので、あんまり意味がある実験ではないですが...
 
また、各種レンタルサーバでのスピード測定の実験結果はは現在記事を作成中ですので乞うご期待!
 
また、Lazy Load系のプラグインについては下記に記事を書いていますので、参考してください。
SEO効果絶大!PVもアップするWordPressの高速化プラグイン元祖Lazy Load
SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load
SEO効果絶大!PVもアップするWordPressの高速化プラグインUnveil Lazy Load
 
 

mod_expiresを使う上での注意点

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

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

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

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

さらなる高速化に向けて

 
さらに表示スピードを上げる方法として、Apacheの「mod_deflate」というモジュールを使って送信するファイルを gzip圧縮することで送信する際のボトルネックを小さくするという仕組みを利用する方法があります。
そちらについては「SEO対策!.htaccessのmod_deflateでファイル圧縮送信で高速化」に書いていますので参考にしてください。
 
同じように .htaccessに記述すれば OKです。
「mod_deflate」と「mod_expires」の記述の順番は試してはいませんが、どちらを先に書いてもよさそうです。
 
 
また、ページ表示の高速化施策として「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

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

GoogleAdwords

GoogleAdwords

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

Message

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

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

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

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

  関連記事

FTPでダウンロード時にファイルが重複するため上書きしますか?と表示される問題

FTPでファイルをダウンロードする際に「ファイルが重複しています。上書きしますか?」というメッセージが出る場合がありますが、これの原因と対策、解決策の記事です。

Apacheの起動しているかの確認方法と起動、再起動、終了のコマンド
Apacheの起動しているかの確認方法と起動、再起動、終了のコマンド

Apacheが起動しているかを確認する方法の解説に加え、Apacheの起動、停止、再起動のコマンドを解説。再起動のコマンドには restart、condrestart、reload、gracefulがあり、違いを解説。

サイト更新、引越時に.htaccessでリダイレクトする方法解説

サイト更新,引越しなどでサイトのURLが変わった場合のリダイレクトを.htaccessのRewriteEngineを使って処理する方法の解説です。

借りてはいけないレンタルサーバ実例4社・アルファメール・WEBアリーナ

餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、具体例 4サービスを例にこんなサーバはNGと紹介しています。

Beautiful Soupを利用してPythonでスクレイピングを行う環境構築方法の解説

BeautifulSoupはPythonでスクレイピングを行う際に便利なツール。インストール方法も簡単。ただ、事前にpipのインストールが必要でその解説もしてます。

日本語は2バイト文字?3バイト文字?

日本語は2バイトという理解でしたが、UTF-8では事情が違います。その説明です。

エックスサーバーで独自SSLは永久無料で取り放題。利用方法と理由を解説!

エックスサーバーでは独自SSLが無料でいくつでも設置できるように!しかも、国、都道府県などの数項目の入力と数クリックだけという超簡単!SSL化しない理由がない!

mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製

mod_pagespeedをデフォルトのまま使っていませんか?mod_pagespeedはデフォルトのままでも速い!でも仕組みを理解し設定し直せばより速くなる!

SyntaxHighlighterを導入してソースコードを見やすくしてみました

PHP、HTMLなどのソースコードをブログで紹介するとき、SyntaxHighlighterを利用することで見やすく提供することが出来ます。

WordPress、Webサイトの表示高速化!画像を軽くする基本的な考え方

画面表示の高速化には画像のファイル容量を小さくする方法があります。ツールを使わなくても小さくするための基本的な考え方を解説します。