.htaccess（ブラウザキャッシュ高速化・無効化）制御による表示速度UP

更新頻度が低く量量が大きいファイルは.htaccessにブラウザキャッシュを設定して高速化しましょう。

逆に更新頻度が高いファイルはユーザーのためにキャッシュをさせないでおくべき（無効化）ですね。

ブラウザキャッシュ以外にgzip圧縮やmod_paegspeedが併用できれば、より表示速度UPにつながります。

ブラウザキャッシュ制御で表示速度UP

WEBサイトは表示速度が命

WEBサイトの表示速度を上げることはSEO対策にとって重要な項目であり、アクセス数アップにつながります。

実際に表示速度が遅いWEBサイトはユーザーの半数以上が離脱するというデータもあると言います。

人は瞬時に映るサイトに対して高評価を持つのですね。

そしてサイトの表示速度が速ければ速いほど、ユーザーの滞在時間が長くなる傾向にあると覚えておきましょう。

キャッシュ機能を利用する

では少しでもWEBページの表示を早くするためにはどうすれば良いのでしょうか。

最近のHTML（Wordpress）のテンプレートはレスポンシブルデザインへの対応を中心としたその汎用性の高さが絡み、WEBサイトの構成量が増える傾向にあります。

その増えたWEB構成ファイルをいかに早く通信・処理するか、その方策としてブラウザキャッシュの方法があります。

更新頻度の低いファイルをブラウザへ記録

CSS・JSファイル、各種画像ファイル、WEBフォントなど、容量が大きい割に更新頻度が低いファイルはブラウザに記録させる考え方ですね。

別のページに移動した際や再訪問した際にも、読込ファイル数を減らす事で通信速度を向上させ、サーバーのリクエスト負荷を軽減する事ができます。

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

ブラウザキャッシュとは、ブラウザで一度表示したWEBページのデータをパソコン内に保存しておく機能です。

また同じページを表示する時に、保存したデータをパソコンから読み込ませて表示速度を速くさせる事ができるのですね。

WEBサーバーから毎回毎回情報を取得する必要がないので、サーバーへのリクエスト数が減ってWEBページの表示速度が速くなります。

.htaccessを使用したキャッシュ制御方法

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

上記以外にもWEBページに使われている色々なファイルを指定することが可能です。

mod_expiresヘッダーとは

mod_expiresヘッダーは指定された期間は更新日に左右されず、強制的にブラウザのキャッシュを適用させる命令です。

mod_expiresはキャッシュ機能の優先度が高く、サーバーへの問い合わせ自体をキャンセルするのでログ自体も残りません。

expiresを指定しない方が良い場合

有効期限について

上記の記述ではそれぞれの画像・css・JSファイルについて、個別でキャッシュ保存する有効期限（例では1ヶ月）が設定されています。

ブラウザにキャッシュをさせるには、WEBページをキャッシュする「有効期限」を指定する必要があります。

ブラウザキャッシュには有効期限の設定が必須

キャッシュの有効期限を指定していない場合は「期限切れ」として扱われます。

その場合は常にWEBサーバーから情報を逐一ダウンロードするようになってしまいます。有効期限は設定をしましょう。

キャッシュが設定されているかの確認

.htaccessファイルを記述してアップロードしたら、実際にブラウザにキャッシュされているか確認しましょう。

最近のWEBブラウザであれば、デフォルト機能の「開発者向けツール」などを使えば簡単に確認することができます。

ディベロッパーツールによるブラウザキャッシュの確認方法

Google Chromeを開いてF12を押しましょう。ディベロッパーツールが開きます。これでキャッシュがされているかどうかの確認ができます。

Chromeの開発者ツール「ディベロッパーツール」

「Network」のタブを開いた後に、キャッシュを確認するWEBページを再度開き直します。

新たに「Name」の欄に読込んだリストが表示されます。その中から画像ファイルやCSSファイルをクリックしてみましょう。

「Name」の隣にある「Headers」の情報が表示されるので、Stats Codeのところを見てみます。

ここに「from memory cache」か「from disk cache」と表示されていたら、キャッシュが表示されている事を意味します。

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

実際にブラウザキャッシュを設定したら表示速度が速くなったのかを確認する必要がありますね。

確認するには、GTmetrixやGoogleのPageSpeed Insightsを利用しましょう。

ブラウザキャッシュを設定する前に点数を確認して、設定前と設定後を比較すると良いでしょう。

.htaccessでキャッシュをさせない方法（無効化）

更新をすぐに反映させる場合

WEBサイトの構成データの中で比較的更新頻度が高いファイルについては、逆にキャッシュをさせるべきではないと考えます。

例えばhtmlファイルやjpg等の画像ファイルで頻繁に情報の差替えをする箇所、それから情報更新が頻繁に起こるpdfなどがそれにあたりますね。

キャッシュを残してしまうと、画像やPDFを更新してもすぐに反映がされません。ユーザーがすぐに新しい情報見る事ができませんよね。

つまりファイルによってはこれまでと逆で.htaccessでキャッシュを無効にする設定が必要になります。

.htaccessキャッシュを無効にする記述例

主要ファイルのキャッシュをさせない設定

<Files ~ "¥.(html|php|jpe?g|gif|png|css|js|pdf)$"> Header add Pragma "no-cache" Header set Cache-Control no-cache </Files>

この場合、主要なWEBサイトの構成ファイルがキャッシュされなくなります。

これはキャッシュ自体を消すのではなく、キャッシュを無効にする設定です。

そのため前回分のキャッシュが消えるまで古いデータが表示される場合があります。

更新頻度が高いファイルのみキャッシュしない

このような場合は以下のような限定した記述になります。

<Files ~ "¥.(html|jpe?g|gif|png|pdf)$"> Header add Pragma "no-cache" Header set Cache-Control no-cache </Files>

ブラウザキャッシュをクリア削除する方法

上記の方法は「キャッシュをさせない」方法になります。では既にあるキャッシュを消す（クリアする）方法をご紹介しましょう。

Google Chromeのキャッシュクリア

Google Chromeを開きましょう。

キーボードによるキャッシュクリア

通常の更新はホームボタンの隣の矢印アイコンを押すか、キーボードのF5を押します。

この時、Shiftキーを押しつつF5を押すと、キャッシュをクリアした更新となります。

ディベロッパーツールによるキャッシュクリア

F12を押してディベロッパーツールを表示させた状態で、更新ボタンを長押しすると以下のような表示が出ます。

3段目の「キャッシュの削除とハードの再読み込み」をクリックするとキャッシュがクリアできます。

ディベロッパーツールを表示させていないと長押しできません。

Firefoxのキャッシュクリア

Firefoxを開きます。右上にある三本線のマークを押してオプションをクリックしましょう。

オプションをクリック

左のメニューから「プライバシーとセキュリティ」の鍵マークを押して少し下に行くと、「Cookieとサイトデータ」の欄があります。

そこでデータを消したり、管理をしたりキャッシュデータを利用するサイトを選択したりする事ができます。

あわせて読みたい参考記事

キャッシュ以外の表示速度UPの方法

ブラウザキャッシュ以外にもWEBサイトの表示速度をUPさせる方法があります。

それは、gzip圧縮（mod_deflate）を使用してリソースを圧縮することです。これはブラウザキャッシュと併用できます。

WEBページの表示速度を向上させる事ができ、サーバーで処理される通信量を減らす事ができます。

mod_deflateによる圧縮について

mod_deflateを使ったファイルの圧縮による表示速度UPについては、「.htaccessによるgzip圧縮の仕方について」をご覧ください。

mod_pagespeedによる圧縮について

mod_pagespeedはモジュールをインストールする必要があります。モジュールが入っていないWEBサーバーでは使えません。

モジュールが入っているサーバーを使うか、root権限が使えるVPSサーバー等でモジュールをインストールして利用する必要があります。

mod_pagespeedによる圧縮命令の例

<IfModule pagespeed_module> ModPagespeed on # JSは圧縮ON ModPagespeedEnableFilters rewrite_javascript # JSの結合 ModPagespeedEnableFilters combine_javascript # 画像圧縮はOFF ModPagespeedDisableFilters rewrite_images # 画像のインライン化 ModPagespeedDisableFilters inline_images </IfModule>

mod_pagespeedが使える様であれば。あとはgzip圧縮とブラウザキャッシュも併用設定してやればかなりの表示速度UPになるかも知れませんね。

一押し人気コーナー紹介