.htaccessファイルのブラウザキャッシュ設定方法！最適化してページを高速表示させる

最終更新日:

SEO
.htaccessファイルのブラウザキャッシュ設定方法

ウェブサイトの表示速度をチェックできるGoolgeのPageSpeed Insightsで「ブラウザのキャッシュを活用する」「有効期限が指定されていません」と表示されていませんか？ ブラウザキャッシュを設定することで転送量を減らし、ウェブページの表示速度も速くでき、SEO対策として非常に有効です。今回は、.htaccessファイルを使用してブラウザキャッシュの有効期限を設定する方法をご紹介します。

目次

ブラウザキャッシュとは？

ブラウザキャッシュとは、ブラウザで一度表示したページのデータを一旦パソコン内に保存し、再度同じページを表示する時に、その保存したデータをパソコンから読み込ませ表示速度を速くさせる仕組みです。毎回サーバーから大量の情報を取得する必要がないので、サーバーリクエスト数が減りページをより速く表示することができると言う訳です。

.htaccessを使用したブラウザキャッシュ設定方法

ブラウザにキャッシュをさせるには、ウェブページに対してキャッシュの有効期限を指定する必要があります。キャッシュの有効期限を指定していない場合は有効期限切れとして扱われ、常にサーバから情報をダウンロードするようになっています。

ブラウザキャッシュの有効期限の指定方法はいくつかありますが、今回は比較的簡単な.htaccessに記述を追加する方法を解説します。

mod_expiresの記述を追加

ルートディレクトリにある.htaccessファイルに、mod_expiresの以下のような記述を追加すれば、ブラウザキャッシュの設定ができます。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months" 
ExpiresByType image/jpeg "access plus 1 months" 
ExpiresByType image/png "access plus 1 months" 
ExpiresByType image/x-icon "access plus 6 months" 
ExpiresByType text/css "access plus 1 months" 
ExpiresByType text/javascript "access plus 1 months" 
ExpiresByType application/javascript "access plus 1 months" 
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>

※念のため.htaccessをバックアップしてから作業をするようにして下さい。すでに記述してある他の部分を削除したり、上書きしないように十分注意して作業を行って下さい。
※.htaccessファイルが存在しない場合は、新規に.htaccessファイルを作成して下さい。

ファイルの種類

ブラウザにキャッシュするデータは、ウェブページを構成する画像やcss、JavaScriptファイルなどがあり、保存する期間をそれぞれの種類によって個別で設定することができます。

上記以外にも、svg（image/svg+xml）、pdf（application/pdf）、音声（audio/mpeg）、動画（video/mpeg）、フォント（application/x-font-woff）などのウェブページに使われている色々なファイルを指定することが可能です。

指定する期間

各種ファイルにキャッシュさせる期間を指定する際に使える単位は以下になります。

秒seconds
分minutes
時hours
日days
週weeks
月months
年years

どの位の期間が適正なの？

Googleで推奨する期間の設定は少なくとも1週間以上で、静的で更新頻度の少ないものに関しては最大で1年となっています。

ただし、更新頻度の高いファイルは1週間よりも短い設定でも問題ありません。ウェブサイトによって更新頻度が異なるので、頻繁に更新するようなファイルは短めに設定して、ほとんど更新されないようなファイルは長めに設定すると良いでしょう。

キャッシュされているかブラウザで確認

.htaccessファイルにmod_expiresの設定が完了したら、サーバーにアップロードして、実際にブラウザにキャッシュされているか確認しましょう。大抵のウェブブラウザであれば、デフォルト機能の「開発者向けツール」などを使えば簡単に確認することができます。

Chromeの場合

  1. メニュー > その他のツール > デベロッパーツールを立ち上げます
  2. 『Network』タブを選択して調べたいファイルを選択
  3. 『Header』タブを選択
  4. その中にあるResponse Headers > Cache-Controlで確認

Firefoxの場合

  1. Ctrl + Shift + E を押す（開発ツール > ネットワークへのショートカット）
  2. 「再読み込み」をクリックしてリロード
  3. 一覧表示された中から、調べたいファイルを選択
  4. 応答ヘッダー > Cache-Controlで確認

表示速度がアップしているか確認

実際にブラウザキャッシュを設定したら表示速度が速くなったのか確認するには、GTmetrixやGoogleのPageSpeed Insightsを利用します。ブラウザキャッシュを設定する前に点数を確認して、設定前と設定後を比較すると良いでしょう。

タグ：
, ,