こうして改善、Google のスコア (3) キャッシュを利用した表示速度改善 - ホームページ・Web制作全般 - 専門家プロファイル

井上 みやび子
すぐ使える株式会社 代表取締役
東京都
Webエンジニア

注目の専門家コラムランキングRSS

対象:ホームページ・Web制作

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

- good

  1. 法人・ビジネス
  2. ホームページ・Web制作
  3. ホームページ・Web制作全般
やさしいWebサイト管理 SEO対策

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

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

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

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

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

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

特に、ロゴなどの画像ファイルは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日以上を設定しないとスコアに反映されません。

このコラムに類似したコラム

こうして改善、Google のスコア (4) ページを圧縮して表示速度改善 井上 みやび子 - Webエンジニア(2013/10/22 07:00)

これからの時代に求められるSEO 瀧内 賢 - Webプロデューサー(2015/08/10 10:00)

こうして改善、Google のスコア (6) JavaScript の最適化 井上 みやび子 - Webエンジニア(2013/11/05 07:00)

こうして改善、Google のスコア (2) 表示速度のチェック 井上 みやび子 - Webエンジニア(2013/10/08 06:00)