Last-modifiedとEtagヘッダーを使ってWordPressの動的コンテンツをブラウザキャッシュする方法

以前から、AMPバリデーターの「AMPBench」でAMPページをチェックすると以下のような警告(エラーではない)が出るのが気になっていました。

If-Modified-Since and ETag Headers

[WARNING] Site does not support either “If-Modified-Since” or “ETag” headers: these make amp serving more efficient
[INFO] Header entry for If-Modified-Since not found
[INFO] Header entry for ETag not found

なんだこれ?と思って調べてみると、どうやらIf-Modified-SinceとETagの双方とも、「動的コンテンツをブラウザでキャッシュコントロールするためのHTTPヘッダーのセッティング」みたいです。

今回は既にCDNを利用している方も、利用していない方も今すぐ出来るHTTPヘッダチューニングをご紹介します HTTPヘッダのお話では、レスポンスヘッダやリクエストヘッダの中に何があり、どういう役割なのか簡単にまとめてみましたが、非常に多くのデータがWEBのやりとりで利用されていることが分かったと思います。 CDN利用時...

この、If-Modified-SinceとETagをWordpressで設定すれば、「訪問者による2回目のアクセスからは負荷軽減ができるかも」というわけで試してみました。

スポンサーリンク
レクタングル(大)広告

WordPressでIf-ModifiedとETagを利用する方法

WordPress用に、更新日を変更した時点でキャッシュが更新される仕様で書いてみました。

以下を、テーマ(子テーマ)のfunctions.phpに貼り付けます。

参考 Etag と Last-modified ヘッダを使って動的コンテンツでもブラウザキャッシュさせる – PSI Labs

設定後の動作を見る

上記のようにカスタマイズして、ブラウザーのデベロッパーツールでヘッダー情報を見てみると、要求ヘッダーには以下のように表示されます。

要求ヘッダー

応答ヘッダーはこんな感じです。

応答ヘッダー

If-Modified-SinceとIf-Modifiedの日時が違っていたらキャッシュが更新されます。

一応、これで2回目の訪問からは、サーバーから「304 (Not Modified)ステータスコード」を返されることによりブラウザのキャッシュが利用されます。

なので、多少なりとも表示の高速化は図れるかもしれません。

Etagは出るブラウザと出ないブラウザがあるみたい。詳しくは調べてません。

Last-modifiedとEtagの難点

これらキャッシュ利用の難点は、「WordPressの更新日が変更されない限りキャッシュが更新されないこと」にあると思います。

WordPressの通常ページ等に今回のカスタマイズを仕込んでおくと、投稿を更新しない限りは、キャッシュが残った状態になります。

なので、例えば以下のような「新着記事ウィジェット」を利用している場合、どんなに投稿をポストしても、新着記事リストが更新されることはありません(キャッシュが残っている限り)。

投稿に関係ない部分は変更されない

その他にも、表示が動的に変更される「関連記事」等も投稿が更新されない限りは、同じブラウザを利用して閲覧した場合、常に同じものが表示されると思います。

なので、本文以外にも動的にコードを生成するページに、今回のカスタマイズは適さないかと思います。そういったページで利用するには、「Wordpressに対して何かしらの変更があった日付」を取得してLast-Modifiedに設定してやる必要はあるかもしません。

ただ、そうすると頻繁にキャッシュが更新されるので、あまり意味のない設定になる気もします。

まとめ

今回試しに使用してみたLast-modifiedとEtagは、Wordpressで使用するには、そこまで有効ではないような気がします。

使用するとするならば、「ほとんど本文しか表示されないようなAMPページで利用する」とかしかないような。

しかし、AMPページの性質からいって、一見さんが多く、あまり再訪問者が来るようなページではないので、意味のない設定といえば意味のない設定になるかもしれません。

ということで、今回自作のテーマのAMPページとかにLast-modifiedとEtagの利用を検討してみたのですが、採用しないことにしました。