/*icomoon*/

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

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

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

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

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

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

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

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

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

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

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

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

PageSpeed Insifhts

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

.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"

「ブラウザのキャッシュを活用」した結果は?

.htaccessに追記後、再度「PageSpeed Insights」で検証してみました。

ブラウザのキャッシュを活用する
  • PCでは66点→73点↑
  • モバイルでは50点→54点↑

UPしました。成功です。

明日は「画像を最適化」してwordpressのさらなる高速化を目指します。

ピックアップ記事

関連記事一覧