ブラウザのキャッシュを活用してWordPressを高速化 PageSpeed Insights

2016年9月11日 2016年9月11日

花梨

WordPressブログのテーマを変えたので、PageSpeed Insifhtsで測定してみたところ、警告が出てしまいました。

ブログの表示速度がかなり遅いのです。

ブログを高速化するため、PageSpeed Insightsが提案する改善策を順番に対応することにしました。

PageSpeed Insightsの対策１では「圧縮を有効にして」、50点から66点に改善できました。

圧縮を有効にする-WordPressを高速化「PageSpeed Insights」

2016.09.08

最近ブログのテーマを変えたのですが、なんか重い。ページの表示に時間がかかります。久々に「PageSpeed Insights」で測定してみました。「PageSpeed Insi...

今回は、PageSpeed Insightsの対策２として、「ブラウザのキャッシュを活用する」に取り組みます。

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

一度アクセスしたサイトのデータをブラウザで一時的に保管し、次回より同じページにアクセスした際の表示を速くする仕組みです。

「ブラウザのキャッシュを活用する」への対応

データ（CSS、JavaScript、画像ファイルなど）をクライアントマシン（ユーザのPC）にキャッシュする設定をしていきます。

「有効期限が指定されていません」とのことなので、ファイルの種別毎でのキャッシュ期間を指定します 。

.htaccessに mod_deflateを設定する

キャッシュの処理を定義する「mod_expires」を.htaccessに追記します。

# ブラウザへのキャッシュの設定

  ExpiresActive On
 
  # キャッシュの初期化
  ExpiresDefault "access plus 1 seconds"
 
  # MIME Type ごとのキャッシュ設定
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/js "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType application/pdf "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"