便利なサービス・ツール

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
ブラウザのキャッシュを活用する【PageSpeed Insights キャッシュ編】

モバイル、PCの表示速度や最適化の方法を提案してくれる無料ツール、Google PageSpeed Insights。
スピードアップデートに合わたサイトスピードの改善や表示速度の高速化、UX(ユーザー体験)の向上に欠かせない、定番のツールですね。

今回はその提案の中から「ブラウザのキャッシュを活用する」について解説していきます。
前回の「圧縮を有効にする」同様、.htaccessを利用すれば非常に簡単に最適化できますので、ぜひお試しください。

【Google PageSpeed Insights】に関する記事はこちら



Google PageSpeed Insights「ブラウザのキャッシュを活用する」とは

そもそも「ブラウザのキャッシュを活用する」とはどういうことでしょう。
Google PageSpeed Insightsのには以下のように記載があります。

要約するとこうです。
サーバーからデータをダウンロードするには処理が多く時間がかかります。
その処理はサーバーとダウンロード側で複数回行われることもあり、処理が遅延することで表示速度の妨げになります。
そこで、以前ダウンロードしたデータを再利用してよいか、また再利用するなら有効期限はいつまでにするのかをサーバーに指示することで、処理の工数を減らし表示速度を早めます。
このデータの再利用が、キャッシュの活用になります。
参照:Google PageSpeed Insights Developers

キャッシュの指定内容

  • リソース(htmlやCSS、画像など)をキャッシュしてよいかどうか
  • キャッシュの有効期限
  • 有効期限が切れた場合の指示

キャッシュの有効期限の目安

  • 基本的に、最低でも1週間
  • 更新頻度の低いリソースは最大で1年間
  • 更新頻度の高いリソースは用途に合わせ選択

推奨される方法

つまり推奨される方法としては、各リソース(htmlやCSS、画像など)に、1週間~1年間のキャッシュ期間を指定してあげれば良いことになります。
そうすることで、ブラウザ上で一度表示したページのデータをパソコン内に保存でき、再度同じページを表示する時にそのデータを再利用できるようになります。
毎回サーバーから大量の情報を取得する必要がなくなり、サーバーへのリクエスト数が減り、ページをより速く表示することができると言う訳ですね。

「ブラウザのキャッシュを活用する」方法

では、どのようにキャッシュ期間を指定をしてあげればよいのでしょうか?
結論から言うと、冒頭でも触れた「.htaccess」にディレクティブ(プログラムなどの処理方法の指示)を記述する方法が一般的です。
以前「圧縮を有効にする」方法でも触れましたが.htaccessは多くのサーバーで対応している、サーバーをディレクトリ単位で制御するためのファイルです。
※Apacheのに対応している必要がありますので不明な方はサーバー会社のWebサイトやお問い合わせでご確認ください

.htaccessは単純なテキストファイルなので編集は簡単です。
またWordPressや各CMSに対応したプラグインなどもありますので.htaccessを触りたくない方や、CMSをお使いの方はそちらをご利用ください。
※プラグインは読み込み速度に影響しますので、極力使わない方がページ速度のためには良いと言えます

<WordPressおすすめプラグイン>
WP Htaccess Editor
WordPressの管理画面上から「.htaccess」を直接編集できるプラグイン。
最終更新からだいぶ経過していますので、お使いのWPのバージョンと互換性があるか確認してから使うようにしましょう。
WP Fastest Cache
Gzip 圧縮も同時に行えて、操作も簡単なプラグイン。
設定がわかりやす初心者にも扱いやすいのが特徴。無料版は機能の一部に制限があります。く
WP Super Cache
こちらはブラウザのキャッシュを使わずに、サーバーのキャッシュを利用するでレスポンスを上げるプラグイン。
キャッシュの知識が無いと思わぬトラブルに繋がることもあるので、テスト環境などで試してから使うのがおすすめ。

.htaccessの編集 解説

有効期限の設定を許可する

これを記述することでファイルをキャッシュする有効期限を許可できるように設定します。

<ifModule mod_expires.c>
ExpiresActive On

有効期限を設定するファイルと時間を決める

これを記述することでファイルの種類と、キャッシュする有効期限を設定します。

ExpiresByType image/gif "access plus 1 months"

「image/gif」や「image/png」、「text/html」などでファイルを決めます。
下記.htaccessの記述例に、スタンダードなファイルを掲載していますので、必要に応じて書き換えください。

期間は次のような書き方があります。
「access plus 1 seconds」=1秒間キャッシュを保持
「access plus 1 hours」=1時間キャッシュを保持
「access plus 1 days」=1日間キャッシュを保持
※他にも「minutes」「weeks」「months」「years」などの記述が可能です
※数字が「1」でも、表記の単位は複数形の記述で問題ありません

.htaccessの記述例

それでは早速、ルートディレクトリにある.htaccessファイルをダウンロードし、下記の追記していきましょう。
具体的には下記の内容を.htaccessに追記するだけです。
なるべく.htaccessの上の方に記述すると良いでしょう。
コピペして使用する際には、余分なスペースなどが入らないようご注意ください。
※念のため.htaccessのバックアップは忘れずに!
※1週間~1年間のキャッシュ期間を推奨されていますが、更新頻度が高いものは短く設定しても構いません
※更新頻度少ないものや不定期なものは、1ヶ月程度で設定している人が多いようですが、更新頻度に合わせ調節しましょう。あまり長いとリソースを更新した時にキャッシュの影響でサイトに反映されなくなります
※「x-icon」はファビコンを表します。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
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がおすすめです。
簡単にできるので、「圧縮を有効にする」記述と併せて記載すると良いでしょう。

これまで4回に渡り、Google PageSpeed Insightsの提案する最適化の方法をご紹介しましたがいかがでしたか?
一見難しそうに見えますが、実際の作業自体は簡単と思いますので、早急にサイトスピードの改善・表示速度の高速化をしたい方は是非試してみてください。
これらを行うだけで、Google PageSpeed Insightsのスコアは大きく改善することがほとんどです。

サイトスピードの改善は、運営を続けているうちに遅くなってしまったサイトの改善や、ユーザー体験・ユーザービリティ向上にも繋がります。
そのためGoogle PageSpeed Insightsは定期的に利用し、サイトスピードに注意していきましょう。

【Google PageSpeed Insights】に関する記事



  • このエントリーをはてなブックマークに追加
  • LINEで送る

コメントを残す

*