今日の人気記事

  1. 管理画面にログイン・ログアウト
  2. 1ページに表示する最大投稿数を変更 - posts_per_page
  3. WordPressのSEO対策プラグインAll in One SEO Pack
  4. Googleウェブマスターツールの登録

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

スポンサーリンク

ウェブサイトの高速化を支援してくれる「PageSpeed Insights」の提案「ブラウザのキャッシュを活用する」についてとその対処方法を解説します。

Google Developersが提供するウェブページのコンテンツ解析をしてくれるWebサービス「PageSpeed Insights」の使い方はこちらを参考にしてください。
» PageSpeed Insightsの使い方

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

browser-cache-0

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザが以前にダウンロードしたリソースをネットワークからではなくローカル ディスクから読み込むようになります。

とのことなので、データ(CSS、JavaScript、画像ファイルなど)をブラウザにキャッシュする設定をしていきます。これで、サイトを再び訪れてくれるリピーターにストレスなくサイトを閲覧してもらうことができますね。

それでは、設定してみましょう。

スポンサーリンク

.htaccessの編集 - Apache

「ブラウザのキャッシュを活用する」には、.htaccessにディレクティブを追加すればOKです。例えば、画像ファイル(pngファイル)をブラウザにキャシュしたい場合には、以下のディレクティブを.htaccessに記述します。「ExpiresActive On」で有効期限の設定をONにし、pngファイルをキャッシュする有効期限を設定します(ここでは10日キャッシュを保持しています。)。

ExpiresActive On
ExpiresByType image/png "access plus 10 days"

pngファイル以外もブラウザキャッシュする場合、以下のディレクティブを記述すればOKです。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"

ディレクティブは必要に応じて、変更してください。ここではスタイルシートは、1日しかキャッシュしないように設定しています(サイトデザインを変更する可能性があるので)。

.htaccessを編集したら、適切に設定されているかを確認しましょう。

browser-cache-1
右上の「更新」をクリックします。

browser-cache-2
クリックすると「提案の概要」が表示されるので、「ブラウザのキャッシュを活用する」をクリックします。

browser-cache-3
ページ中央の「このページに関する読み込み時間の短縮方法」をみてみましょう。

http://connect.facebook.net/ja_JP/all.js (18.6分)
https://apis.google.com/js/plusone.js (30分)
http://vps-karuma.net/wp-content/themes/simple/style.css (60分)
… 略 …

有効期限が1週間以上のファイルは表示されなくなります。画像ファイルやJavascriptファイルは、ブラウザキャッシュの有効期限を10日に設定したので表示されていません。訳あってブラウザキャッシュの有効期限を1日に設定したcssファイルと外部から読み込んでいるファイルが表示されています。これでOKです。

以上、「ブラウザのキャッシュを活用する」方法でした~。

スポンサーリンク

関連記事(一部広告含む)