速度測定ツールでWordPressサイトの速度をテストすると、「Expiresヘッダーが必要です」というような警告を目にすることがあります。
Expiresヘッダーは、ブラウザキャッシュを活用し、サイトの表示速度を改善するのに役立ちます。このヘッダーは、Firefoxの拡張機能であるYSlowのパフォーマンス推奨事項の一部であり、GTmetrixのようなツールのパフォーマンススコアにも影響します。
そこで今回は、Expiresヘッダーを取り上げます。Expiresヘッダーの概要とサイトに与える影響をご説明し、WordPressサイトにExpiresヘッダーを追加する方法をいくつかご紹介します。
まずは、ブラウザキャッシュについてご説明します。
ブラウザキャッシュとは
Expiresヘッダーについて掘り下げる前に、まずはブラウザキャッシュの概念を押さえておきましょう。Expiresヘッダーはブラウザキャッシュを制御・実装する役割を担います。
簡単に言うと、ブラウザキャッシュは、ページを読み込むたびにデータをサーバーからダウンロードするのではなく、訪問者のローカルコンピュータに特定のファイルを保存し、2回目以降の訪問時にこのファイルを読み込むように、サイトが訪問者のブラウザに指示するものです。
これにより、毎回ファイルをダウンロードする必要がなくなるため、サイトの読み込み時間が短縮され、帯域幅の使用量も減らすことができます。
たとえばサイトのロゴ画像は、基本的にどのページにも共通する要素。ページを読み込むたびに訪問者のブラウザに同じファイルをダウンロードする必要はありません。ブラウザキャッシュを利用すれば、訪問者のローカルコンピュータにロゴファイルを保存することが可能です。初回訪問時にロゴ画像をダウンロードしたら、それ以降はローカルブラウザキャッシュから読み込まれるようになります。
Expiresヘッダーとは
Expiresヘッダーは、訪問者のブラウザに（上でご説明したように）ローカルブラウザキャッシュからリソースを読み込むか、サーバーから新たなバージョンをダウンロードするかを指示します。
具体的には、異なるファイルタイプのキャッシュバージョンに対して、そのファイルが「期限切れ」（Expire）となり、サーバーからの再ダウンロードが必要になるまでの期間を設定することができます。
例えば、サイトのPNG画像ファイルのブラウザキャッシュ動作を制御したいとします。PNGファイルのExpiresヘッダーを1ヶ月に設定すると、訪問者のブラウザは以下のようになります。
- 最初のアクセス（ダウンロード）から1ヶ月間は、ダウンロード済みバージョンをキャッシュから読み込む
- 1ヶ月後、ファイルをサーバーから再ダウンロードする
ファイルタイプごとに異なるExpiresヘッダーを設定することで、サイトのブラウザキャッシュを細かく制御することが可能です。
ExpiresヘッダーとCache-Controlヘッダーの違い
Expiresヘッダーの使用は、WordPressサイトでブラウザキャッシュを制御する方法の1つですが、他にもCache-Controlと呼ばれるHTTPヘッダーがあります。
Cache-ControlヘッダーはExpiresヘッダーよりも新しく、キャッシュ制御の柔軟性に優れています。この理由から、多くのサイトではCache-Controlヘッダーが使用されており、Kinstaでも独自のNginx設定を採用しています。
とはいえ、Expiresヘッダーにもサイトに必要なすべての機能があり、ブラウザキャッシュの制御に問題なく使用することができます。併用することも可能ですが、通常Cache-Controlヘッダーが優先されます。併用する際には、それぞれに同じ期限を設定してください。
WordPressサイトにCache-Controlヘッダーを実装する方法はこちらをご覧ください。
WordPressサイトにExpiresヘッダーを実装する方法
ここからは、WordPressサイトにExpiresヘッダーを設定する方法をご紹介します。
なお、Kinstaのお客様は、サーバーおよび組み込みのコンテンツデリバリネットワーク（CDN）の両方がブラウザキャッシュを使用するようにデフォルトで設定されているため、Expiresヘッダーの実装は不要です。
Kinsta以外をご利用の場合は、以下の手順を参考にExpiresヘッダーを追加してください。サーバーレベル（NginxまたはApache）で独自のコードを使用するか、WordPressプラグインを使用します。
Apacheの.htaccessでExpiresヘッダーを追加する
ご利用のホスティング会社がApacheウェブサーバーを使用している場合、サーバーのルートフォルダ（wp-config.phpファイルと同じもの）にある.htaccessファイルを使用してExpiresヘッダーを追加します。
手順は以下のようになります。
- 任意のFTPクライアントでFTPを使用してサーバーに接続する
- ルートフォルダにある.htaccessファイルを見つける
- .htaccessファイルのバックアップコピーをローカルコンピュータにダウンロードする（万が一問題が発生してもバックアップを復元できる）
- 以下のコードをファイルの先頭付近に追加する
## Expiresヘッダーのキャッシュ ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## Expiresヘッダーのキャッシュ ##基本的にはデフォルト値で問題ありませんが、必要に応じて各ファイルタイプの期限を調整することができます。
Nginxの設定ファイルでExpiresヘッダーを追加する
ご利用のホスティング会社がNginxウェブサーバーを使用している場合、サーバーの設定ファイルを編集して、Expiresヘッダーを制御します。この編集方法は、ホスティング会社によって異なります。サポートが必要であれば、ホスティング会社に問い合わせてみてください。
Kinstaでは、Nginxウェブサーバーを採用していますが、必要な設定はすでに行われているため、コードを追加する必要はありません。
以下のコードを使用します。
location ~* .(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* .(pdf|css|html|js|swf)$ {
expires 2d;
}必要に応じて、各ファイルタイプの期限を調整してください。
WordPressプラグインでExpiresヘッダーを追加する
コードでExpiresヘッダーを実装するのが面倒、または抵抗がある場合は、WordPressプラグインを使用する手も。ExpiresヘッダーまたはCache-Controlヘッダーのいずれもプラグインで追加可能で、ブラウザキャッシュの制御を行うことができます。
ご利用のホスティングサービスにキャッシュ機能がない場合、キャッシュプラグインを利用することもできます。おすすめはWP Rocket（Kinstaと互換性あり）で、有効にするだけですぐにブラウザキャッシュが実装されます。
有用なその他のキャッシュプラグインには、以下のようなものが挙げられます。
すでにキャッシュ機能があり、より的を絞ったプラグインをお探しの場合は、以下2つの無料プラグインがおすすめです。
Leverage Browser Cachingの場合は設定不要で、有効化するだけでOKです。
Add Expires Headersでは、各ファイルタイプのExpiresヘッダーを制御可能です。WordPress管理画面の左側メニューから「Add Expires Headers」を開いて設定を行います。
Expiresヘッダーが機能しているかをテストする方法
Expiresヘッダーの設定後は、GiftOfSpeedの無料ツールを使用して、適切に機能しているかどうかを確認することができます。サイトのURLを貼り付けると、以下の2つの情報が表示されます。
- サイト上のすべてのファイルのキャッシュ期間
- キャッシュの種類（Expiresヘッダーが表示されるはずだが、設定によってはCache-Controlヘッダーの場合もある）
また、GTmetrixのような速度測定ツールを使って、「Expiresヘッダーが必要です」という旨の警告が表示されないかどうかを確認することもできます。
ターミナルでExpiresヘッダーをテストする
より技術的な方法でExpiresヘッダーをテストするには、ターミナルでサイト上の静的アセットにcurlリクエストを行い、HTTPヘッダーを検証します。例えば、expiresまたはcache-controlルールがCSSファイルを網羅している場合は、以下のようなcurlリクエストを実行します。
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssstyle.min.cssファイルへのcurlリクエストは、以下のようなレスポンスを返します。
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63ご覧の通り、レスポンスにはexpiresとcache-controlヘッダーが含まれています。特にcache-controlヘッダーは、max-ageが315360000秒、つまり有効期限が1年であることを示しています。
外部スクリプトにExpiresヘッダーを追加する方法
上でご紹介した方法で、WordPressサイトのサーバー上のファイルのExpiresヘッダーを制御することができますが、Google FontsやGoogle アナリティクスなどのサードパーティスクリプトのExpiresヘッダーは制御できません。
このため、上記の方法でExpiresヘッダーを実装していても、速度測定ツールによっては問題があると判定されることがあります。
最後に、一般的なサードパーティスクリプトにExpiresヘッダーを追加する方法もご紹介します。
Google FontsにExpiresヘッダーを追加する
多くのWordPressサイトでは、カスタムフォントにGoogle Fontsを使用しています。これはGoogleのCDNからフォントを読み込むことを意味し、サーバーの設定でExpiresヘッダーを追加することができません。
この場合、GoogleのCDNを使用する代わりに、フォントファイルをローカルでホストするというのが簡単な解決策になります。これには、無料プラグインのOptimize My Google Fonts（OMGF）が便利です。
この方法の詳細については、WordPressでフォントをローカルにホスティングする方法をご覧ください。
Google アナリティクスにExpiresヘッダーを追加する
ブラウザキャッシュとGoogle アナリティクスに関連する問題が見られる場合は、Google Fontsの場合と同じように、Google アナリティクスのスクリプトをローカルにホスティングすることもできます。
これには、以下のようプラグインが役に立ちます。
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- Google Trackingアドオンを含むWP Rocket
まとめ
Expiresヘッダーは、WordPressサイトの様々なファイルタイプに対してブラウザキャッシュの動作を制御するのに役立ちます。
今日は、多くのサイトがCache-Controlヘッダーを使用していますが、現在もExpiresヘッダーは問題なく使用でき、併用も可能です。
一部の速度測定ツールでは、Expiresヘッダーの実装がない場合、サイトのパフォーマンススコアに影響を与えます。
KinstaのWordPress専用マネージドホスティングをご利用の場合は、デフォルトで必要な設定が行われているため、Expiresヘッダーの追加は不要です。Kinsta以外をご利用の場合は、今回ご紹介したコードまたはWordPressプラグインを使用して、Expiresヘッダーを実装してみてください。
