2017年01月

AMPページのキャッシュをmax-ageヘッダーで更新する

2017-01-23 14:06 - NozawaTakeshi

前回ではGoogleにキャッシュされたAMPページを手動で削除する方法を紹介致しました。

ただ、ページを更新するたびに手動でキャッシュをクリアにしなければならないので
非常に手間がかかります。

今日はampページを表示する際にレスポンスヘッダーにmax-ageを指定することで
Googleのキャッシュを定期的に更新するようにするやり方をご紹介します。

Google Amp Cacheのページによると

It uses the origin’s caching headers, such as Max-Age, as hints in deciding whether a particular document or resource is stale. When a user makes a request for something that is stale, that request causes a new copy to be fetched, so that the next user gets fresh content.

とあります。つまり、max-ageヘッダーを送信することによってキャッシュが古いかどうかを
Googleが判断してくれるようです。古い場合は新しくオリジンページにリクエストしなおして
新しいキャッシュを生成してくれるようです。(ただし、新しいキャッシュからページを配信してくれるのは次のリクエストからになるようです。)

To limit the amount of load it generates for publisher sites, the Google AMP Cache considers any document fresh for at least 15 seconds, and any resource fresh for at least 1 minute. Note that those numbers may change in the future, as we tune the cache for optimum balance between freshness and load on publisher sites.

また、max-ageで指定できるのは15秒以上で、最低でも1分でリフレッシュされるようですので
しきい値としてはこの間を取ることになるかと思います。
ただ、将来的にはこのしきい値は見直される可能性もあるとのことでした。

Nginxでmax-ageを実装する場合

Nginxでは下記の設定を入れることでmax-ageが送信されるようになります。

この例ではnginxのconfファイルのlocationディレクティブの中で指定をしています。
もし”amp”というクエリがあったらexpresを1分に設定するというものです。
この状態で設定したページにリクエストすると下記のようになります。

このようにExpiresが指定されて、Cache-Controlにmax-ageが指定されます。
GoogleのAMPのキャッシュに関してはまだ日本語のページがないため不便ですね・・・。
ご参考になれば幸いです。

参考: Google Groupのフォーラム

update-pingを使ったAMPページのキャッシュの消し方

2017-01-20 20:17 - NozawaTakeshi

弊社のサイトでも実験的にAMPを使ったページの配信を行っております。
AMPは既にご存知の方も多いと思われますが Accelerated Mobile Pages の略で、
通信速度が安定しないスマートフォンでも高速にページを閲覧できるようにした技術で
以前このブログでもご紹介したこともあります。

AMPによって実装されたページはGoogleによってキャッシュされ
検索結果からのリンクはGoogleのドメインから
キャッシュされたページ・コンテンツが配信されます。

キャッシュは定期的に消えるようですが
急いで消したい場合にちょっと手間取ってしまったので
簡単にまとめてみたいと思います。

curlコマンドで消す

“204 No Content” が返ります。
エンジニアの方はこっちの方が安心な感じがしますね。

ブラウザを使って消す

にアクセスしてください。
CURLコマンドのURLとまったく同じです。

Chromeだと何も表示されないどころが開いたタブが自動的に閉じたりします。
“204 No Content”のレスポンスヘッダーを受け取ったときの
挙動はブラウザによるようです。

AMPのキャッシュの仕組み

cdn.ampproject.orgというホストにキャッシュが蓄積されています。
削除するのもこのホストに対して行います。

http://www.hogehoge.com/amp/hogehoge.html

がキャッシュされてgoogleの検索結果からリンクされているURLは

https://www.google.co.jp/amp/www.hogehoge.com/amp/hogehoge.html

になります。このページをデベロッパーツールで開くと

https://cdn.ampproject.org/v/www.hogehoge.com/amp/hogehoge.html&amp_js_v=6

のようなものがロードされていることが分かります。
これがキャッシュ的なもののようです。

これを削除しようとしたら、上記で紹介したようにCURLコマンドがブラウザを使って

にリクエストすれば良いようです。

“www.hogehoge.com/amp/hogehoge.html” の前についている”/c/“は
キャッシュされているコンテンツがドキュメントであることを示しています。

それに対して /update-ping/ というコマンドめいたパスを前につけてあげると
キャッシュが消えるという仕組みです。

上記のようにキャッシュされているコンテンツには
コンテンツの種類によってプレフィックスがつきます。

  • ドキュメントはc
  • 画像はi
  • フォントなどその他のリソースはr

なので

http://www.hogehoge.com/amp/img/piyopiyo.png

という画像がキャッシュされると

https://cdn.ampproject.org/i/www.hogehoge.com/amp/img/piyopiyo.png

となります。
これを削除したければ

でリクエストすればいいことが分かります。
なお、オリジナルがHTTPSの場合はちょっと話が変わるのでまたの機会に。

次回はhttpのレスポンスヘッダーを使って自動的にキャッシュが更新されるようにする設定についてご紹介したいと思います。

ご参考になれば幸いです。

参考