6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

WordPressのブラウザーキャッシュとコンテンツキャッシュの違いは?キャッシュについての知識まとめ

13680_wordpress-cash

WordPressでCSSをいじって見た目のカスタマイズをして反映されない!なんてことがよくありますよね

そして、そんな時に「キャッシュをクリアして!」とアドバイスされるのですが、WordPressやサーバーのによっては何箇所もキャッシュが作成されてしまって、いったいどこをクリアしたら良いのか迷ってしまいますよね?

本記事では、自分なりにWordPressのキャッシュについて調べたことをまとめました。

すいみん

キャッシュの役割を把握できると無駄なキャッシュを止めて、効率よく運用できるようになります!

目次

キャッシュとは

キャッシュとは、一度アクセスしたサイトのデータをブラウザで一時的に保存して、次回から同じページにアクセスした時の表示を速くする仕組みです。

そしてよく耳にするキャッシュの種類は2つありまして、それがブラウザーキャッシュコンテンツキャッシュです。

ブラウザーキャッシュとコンテンツキャッシュの違い

ブラウザキャッシュとは、各ユーザーがアクセスした場合にキャッシュを作成し、使いまわします。

コンテンツキャッシュとは、ユーザー全体でキャッシュを作成し、使いまわします。

ブラウザーキャッシュとコンテンツキャッシュの作成される場所

  • サーバー側で作成するブラウザーキャッシュ
  • プラグイン側で作成するブラウザーキャッシュ
  • サーバー側で作成するコンテンツキャッシュ
  • テーマによるコンテンツキャッシュ
  • プラグインによるコンテンツキャッシュ
すいみん

役割が重複しているといったいどこで制御できるのか?わけわからなくなります!

WordPressの5つのキャッシュの実例

自分のWordPress環境で使われているキャッシュを実例に書いてみました。

  • サーバー「ConoHa WING」のブラウザーキャッシュ
  • プラグイン「WP ROCKET」のブラウザーキャッシュ
  • サーバー「ConoHa WING」のコンテンツキャッシュ
  • WordPressテーマ「SWELL」のコンテンツキャッシュ
  • プラグイン「WP ROCKET」のコンテンツキャッシュ

サーバー「ConoHa WING」のブラウザーキャッシュ

ConoHa WINGでは以下の種類のファイルを1週間キャッシュする設定になっています。
※.htaccess(エイチティアクセス)に記述されます。

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType application/javascript "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 "access plus 1 weeks"
  ExpiresByType image/x-icon "access plus 1 weeks"
</IfModule>

プラグイン「WP ROCKET」のブラウザーキャッシュ

WP ROCKETの場合、プラグインをインストールしてアクティブにするだけで自動でブラウザーキャッシュされます。※.htaccess(エイチティアクセス)に記述されます。

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/ttf "access plus 4 months"
ExpiresByType font/otf "access plus 4 months"
ExpiresByType font/woff "access plus 4 months"
ExpiresByType font/woff2 "access plus 4 months"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

サーバー「ConoHa WING」で作成するコンテンツキャッシュ

ConoHa WINGを契約するとコンテンツキャッシュという項目があります。

ConoHa WING独自にチューニングした強力なコンテンツキャッシュ機能を搭載、Webサイトの表示を高速化できます。

仕組みとしてはキャッシュサーバー上にキャッシュデータが設置され、そちらでWebサイトへのアクセスが処理されるため
表示速度の向上が見込まれるものとなります。
※ConoHa WINGのはCDNとは仕組みが異なるものらしいです。

WordPressテーマ「SWELL」のコンテンツキャッシュ

WordPressテーマ側で設定できるキャッシュです。

プラグイン「WP ROCKET」のコンテンツキャッシュ

プラグイン側で生成されるコンテンツキャッシュです。

wp-content/cache/wp-rocketにページデータ(基本的には.htmlと.gz)がまるっと保存されています。

WordPressのキャッシュについてまとめ

本記事では「WordPressのブラウザーキャッシュとコンテンツキャッシュの違いは?キャッシュについての知識まとめ」について書きました。

キャッシュといっても、様々な場所で生成されるので注意しておきましょう。

  • サーバー側で作成するブラウザーキャッシュ
  • プラグイン側で作成するブラウザーキャッシュ
  • サーバー側で作成するコンテンツキャッシュ
  • テーマによるコンテンツキャッシュ
  • プラグインによるコンテンツキャッシュ

ちなみに現在デザノマではブラウザーキャッシュとコンテンツキャッシュともにプラグイン「WP ROCKET」だけでキャッシュしています。他の部分はOFFにして、クリアしたいときはプラグイン側だけクリアすれば最新の状態になります。

またどのコンテンツキャッシュが一番はやいかは比較するしかないので、地味ですがON/OFFして計測してみることをおすすめします。

すいみん

一度、自分のキャッシュ環境を把握しておくとよいですよ!

目次
閉じる