- 井上 みやび子
- すぐ使える株式会社 代表取締役
- 東京都
- Webエンジニア
対象:ホームページ・Web制作
- 原島 洋
- (Webプロデューサー)
- 井上 みやび子
- (Webエンジニア)
こうして改善、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日以上を設定しないとスコアに反映されません。
このコラムに類似したコラム
こうして改善、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)