WEBサイト高速化・ページの表示速度改善!ブラウザキャッシュの有効期限を設定する方法

車のスピードメーター

前回の記事でPageSpeed InsightsやThink with Googleといったサイトのパフォーマンスを測定するWEBサービスを使いましたが、モバイルページが55点パソコンページが73点という散々な結果になりました。

これはいかんでしょと思いましたが改善方法がよくわかりません。より詳しい改善方法を示してくれるPageSpeed Insightsを参考に今回から表示速度の問題を1つ1つ解決していきたいと思います。

SPONSORED LINK

▼目次

  1. ブラウザのキャッシュ
  2. .htaccessとは
  3. .htaccessの書き方
  4. mod_expires
  5. キャッシュ設定がうまくいかない場合
  6. 設定前と設定後の比較
  7. まとめ

ブラウザのキャッシュ

PageSpeed Insightsにアクセスして確認してみましょう。改善提案を一覧で確認してみると真っ先に目につくのが「ブラウザのキャッシュを活用する」という項目です。

ブラウザのキャッシュを活用する - PageSpeed Insights

ちなみにこれはモバイルだけでなくパソコンにも共通している改善提案ですので今回対処していこうと思います。

ブラウザのキャッシュとはブラウザで一度表示したHTMLやCSS、画像といったページデータを一時的に保存しておくための機能です。次に同じページにアクセスするときに保存したキャッシュを使うことで素早くページを読み込むことができます。

訪問ユーザーからしたらこのように表示速度を速くできるということと、サーバーにとってもリクエストする回数が減るのでサイト運営者は適切なキャッシュを設定することでサイトのパフォーマンスアップにつながるわけです。

それ以外の特徴としては以前アクセスしたときのデータを再利用するわけですからキャッシュが残っている間は当然古い情報が表示されることもあります。更新した情報をいち早く伝えることができない場合があるのです。

また、ブラウジングのし過ぎでキャッシュやクッキーがたまり過ぎるとユーザー側のブラウザ環境が重くなったりすることもあります。これはキャッシュをクリアすることで改善できます。

キャッシュはこういったデメリット面もありますが、やはりサイトのパフォーマンスアップにつながるのでしっかり適切な設定をしておきたいところです。実際どのような設定をするのかというと、キャッシュに有効期限を設定するのです。

.htaccessとは

キャッシュの設定に変更を加えるには

.htaccessはそのままだとヘタクセスと読んで呼んでしまいそうですが違います。エイチティーアクセスが正解です。

サーバーのApacheを制御するための特殊なファイルで、ディレクトリ単位で設定を行うことができます。リダイレクトの設定を行うときに編集するのがこの.htaccessです。

.htaccessの編集方法

WordPressの場合は.htaccessが自動的に作成されるようです。使っているレンタルサーバーによっては管理画面から.htaccessの編集が可能ですが、今回はFTPソフト「FileZilla」を使い編集してみました。

FTPを開くとドメイン直下のルートディレクトリに.htaccessファイルがあります。

FTP .htaccessの場所

これをローカルに移して編集作業を行います。.htaccessのままでは開くことができないようなので、一旦htaccess.txtというファイル名に変えてメモ帳として開きます。

.htaccessの書き方

.htaccessの書き方には一定のルールがあり、書き方を誤ってしまうとエラーと認識されページが表示されないなんてことにもなってしまいます。万が一エラーになってしまったら追記した部分を消してしまえば問題ありませんが、このファイルを扱う前に最低限覚えておきたいことを紹介します。

BOMなしで保存する

文字コードのUTF-8には「BOMあり」と「BOMなし」の2種類あります。例えばローカルに移して編集した.htaccess(htaccess.txt)をメモ帳などのテキストエディタで保存するとBOMありで保存することになります。

私自身一度経験がありますが、FTPソフトとローカルを使いファイルを編集するとこのBOMありがエラーの元になるわけです。TeraPadとったBOMなしに対応しているエディタではない限りメモ帳などでは表面上ではBOMあり・BOMなしの見分けがつかないのでBOMを知らなければなかなかエラーに気づくことができません。

そこでFTPソフトを使いローカルで編集保存する場合はメモ帳を使うのは避けるべきです。TeraPadはBOMなし(UTF-8N)で保存することができるので、BOMが原因のエラーになることはありません。

UTF-8 BOMあり
UTF-8N BOMなし

TeraPad公式ページ
TeraPad公式ページ
http://www5f.biglobe.ne.jp/~t-susumu/

編集方法

.htaccessはメモ帳で気軽に編集することができます。ただし.htaccessは前述したように頭に「.」がつく特殊ファイルなのでそのままで開くことができません。メモ帳で開くときは一度htaccess.txtにして編集しましょう。

また、BOMの問題もあるのでメモ帳でなくTeraPadで保存します。

作ったファイルをFTPソフトでサーバにファイルをアップロードするわけですが、この場合一度htaccess.txtのままアップしてその後に.htaccessにファイル名を変更します。このファイル名変更を忘れると動作しないので気を付けましょう。

ディレクトリ別に設定

.htaccessは下の階層に設定効果が及ぶファイルです。全体に設定したいのなら一番上階層のルートディレクトリでいいでしょう。下の特定階層だけに設定したいという場合は設定したい一番上の階層に.htaccessを置きます。

例えば、下の階層に.htaccessがある場合でその上階層にも.htaccessがある場合2つの下階層には上階層の設定も引き継がれます。同じような設定が競合してしまう場合は下階層の設定が優先されるようです。

mod_expires

キャッシュの設定を行うために使うのがApacheのモジュールmod_expiresです。mod_expiresを使うことでキャッシュに有効期限を設定することができます。

.htaccessにmod_expiresの設定をするというとなんだか難しく感じてしまいますが、ルールに沿った書き方を.htaccessにコピペするだけです。

今回このように書きました。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 10 days”
ExpiresByType text/js “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
</IfModule>

最初の1行目「<IfModule mod_expires.c>」でmod_expiresの有無を確認、3行目の「ExpiresActive On」でキャッシュ機能を有効化します。

その下の「ExpiresByType」で各箇所のデフォルトの有効期限を設定できます。「access」が訪問ユーザーがアクセスしてからの時間です。

指定できる時間の分類は以下になります。

years
months
weeks
days
hours
minutes
seconds

秒で全てを設定することもできますが、わかりづらいのでdaysやweeksなどを使い有効期限を表します。

適切な有効期限

当サイトは有効期限を10日に設定しましたが、この辺は人によってまちまちのようです。一体どう設定すれば適切なのかわからないのでこれについてはGoogleのPageSpeed Insightsのヘルプを確認してみましょう。

推奨される解決方法

サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティ リソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:

Expires を 1 週間以上、できれば最大で 1 年間先に設定します(より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします)。RFC のガイドラインに違反するので、1 年以上先には設定しないでください。
リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもかまいません。ただし、すぐに変更される可能性があるものの、変更時期がわからない場合は、長い有効期間を設定して、URL フィンガープリント(後述)を使用してください。

出典 : ブラウザのキャッシュを活用する | PageSpeed Insights

1週間以上を推奨しているようです。最大でも1年といったところでしょうか。例えばデザイン重視でCSSを頻繁に変更するサイトであればCSSのキャッシュだけ1日にしてもいいかもしれません。

キャッシュ設定がうまくいかない場合

上記の方法でうまく行くかと思いますが、キャッシュの有効期限が設定できないこともあります。

当サイトがそうでした。PageSpeed InsightsやGTmetrixといったツールで何度確認しても「キャッシュの有効期限が設定されていません」と表示されてしまうのです。すぐ反映されないのかと1日置いたり、少し書き方を変えて色々試してみたのですが全くだめでした。

キャッシュの初期化

.htaccessの2行目に「ExpiresDefault “access plus 1 seconds”」を付け加えて試してみました。これはキャッシュを初期化するための記述です。

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/css “access plus 10 days”
ExpiresByType text/js “access plus 10 days”…

この初期化で有効期限が設定されたようですが、設定が反映された期間が1秒という短いものだったのでこれではあまり意味がありません。おそらく初期化の「1 seconds」が有効期限として反映されてそれより下の記述が無視されているのでしょう。

有効期限が設定できない場合の対処法

これについては他にこういった事例がないかネットを調べたところあるじゃないですか。「ExpiresDefault “access plus 1 seconds”」による初期化の1秒だけ有効期限に反映されてそれより下の設定が反映されていないという事例が。

.htaccessのキャッシュ設定が反映されない

出典 : .HTACCESSでのJAVASCRIPTキャッシュの有効期限が上手く設定できない時の対処 | aoringo works

以下の書き方でうまくいったようなので試してみたら今度はしっかり有効期限が設定できました!

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “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/js “access plus 216000 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 216000 seconds”
</ifModule>

「x-icon」(ファビコン?)や「x-shockwave-flash」の記述を加えた方が良かったのでしょうか。それとも全て秒に置き換えた方が良かったのでしょうか?さすがに単位は秒でも週でも変わりないかもしれませんが今回ばかりはほとんど諦めかけていたので本当助かりました。こればかりはありがとうございましたといいたい気分です。

ちなみにレンタルサーバーのwpX管理画面から行うことができるキャッシュ設定は予め無効化してあります。216000秒は1か月とのことです。

設定前と設定後の比較

それではキャッシュの有効期限設定前と設定後の比較をしてみましょう。サイトのパフォーマンス測定にはPageSpeed InsightsだけでなくGTmetrixも使います。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

GTmetrix
https://gtmetrix.com/

キャッシュ設定前

PageSpeedからです。前日計測した55点から1点上がり56点になっていますが何か対処しているわけではないですしほとんど変わらないでしょう。改善提案の中に「有効期限が設定されていません」という文字がズラっと並んでいます。

サイトの速度を測定 めちゃログ - PageSpeed Insights

パソコンの方は73点という結果に。

続いてGTmetrixです。ページスピードが76%とPageSpeed Insightsよりはましな結果になりましたが、これはおそらくモバイルとデスクトップを合算した計測なのでしょう。
サイトの速度を測定 めちゃログ - GTmetrix

その下の各項目詳細を見るとやはりキャッシュの評価が0とさんざんな結果です。

キャッシュ設定後

これがどう変わったのか見ていきましょう。まずはPageSpeed Insightsです。

なんとモバイルが56点→63点のパソコンが73点→82点までアップしました。

「ブラウザのキャッシュを活用する」という項目が消えていませんが、CSSやJPG、JSといった指摘がなくなりFacebookやアナリティクスといった外部的なキャッシュの指摘だけになりました。

サイトの速度を測定2 めちゃログ - PageSpeed Insights

まだまだ100点まではほど遠いですし、問題個所は山積みですがとりあえず有効期限は設定できましたし点数も多少改善されたので今回は良しとしましょう。

続いてGTmetrixです。こちらも76%→81%にアップです。

サイトの速度を測定2 めちゃログ - GTmetrix

まとめ

今回は.htaccessにキャッシュの有効期限を設定する方法を紹介しました。有効期限を有効化するために少し手こずりましたが、コピペだけでできるので設定は難しいわけではありません。

これだけでWEBページのスピードが改善されるかと思いますので試してみたらどうでしょうか。


SPONSORED LINK



この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでMechalogをフォローしよう!



トップへ戻る