こうして改善、Google のスコア (3) キャッシュを利用した表示速度改善

さて、今までご紹介したページの表示速度を上げる方法の中で、簡単な割に効果が高いものからどんどん設定していきましょう。

まずは「ブラウザのキャッシュを活用する」方法です。

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

「ブラウザのキャッシュ」とは、ブラウザが、閲覧した事のあるホームページのコピーを一時的にパソコン内に保存する機能の事です。保存したファイル自体もキャッシュと呼びます。キャッシュを利用すると、一度見たページを再度ブラウザで表示した場合は、サーバにアクセスする事無く、パソコン内に保存したファイルを表示してくれます。

キャッシュを使うメリット

ホームページにはどのページにも含まれるロゴやメニューなどが必ず含まれていますので、これらの共通のファイルについては、パソコンに保存したキャッシュを使えば毎回サーバにアクセスする手間を節約し、結果として、ページの表示速度を上げる事ができます。

特に、ロゴなどの画像ファイルはHTMLページに比べて容量が大きく通信に時間が掛かる上に、そんなにしょっちゅう更新するものでもないので、このキャッシュをうまく使うと劇的に表示速度が上がります。

キャッシュを使う方法

キャッシュの機能を持っているのはパソコンにインストールされているブラウザ側なのですが、ホームページの方に適切な設定をしておく事により、画像やJavaScript、CSSなどの更新頻度が低いファイルについてだけ、キャッシュを利用するように促して速度改善をする事ができます。

キャッシュ利用のための .htaccess の設定

ではキャッシュ利用の具体的な方法です。以下の内容をホームページの .htaccess ファイルに書き込んで下さい。

#----ここから----

ExpiresActive On
ExpiresDefault "access plus 1 day"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/rss+xml "modification plus 30 minutes"
ExpiresByType text/html "modification plus 30 minutes"

#----ここまで----

なお、サーバによっては .htaccess の設定を許可してない場合がありますので、何か問題があったら引き戻せるように、変更前の状態のバックアップを取ってから作業を始めて下さい。

キャッシュ設定によるGoogleスコアの改善

具体的にキャッシュ設定の前後でGoogle PageSpeed Insightsでのスコアがどう変化したのか見てみましょう。テストをしたサイトでは、設定前はモバイル74、パソコン81だったのが、設定後はそれぞれ83と89まで上がりました。

【上級者向け】キャッシュの期間はどのくらい？

上の設定では、一度閲覧したファイルを保存して使い回す期間を、ファイルの種類によって以下のようにしています。

- 画像とJavaScript、CSSはアクセスから7日間
- HTMLページとRSS(※)はサーバで更新された後30分
- それ以外のファイルはアクセスから1日間

ユーザ向けの速度改善としては、どのファイルも1日（その日分の閲覧）程度の設定で良いのではないかと思いますが、Googleのスコアを向上させたい場合は、画像とJavaScript、CSSについては7日以上を設定しないとスコアに反映されません。