WordPressサイトに関わるキャッシュを理解する

Slide for my presentation at WordCamp Kansai 2024 (2024-02-24)
WordCamp Kansai 2024 (2024年2月24日) 登壇スライド。

https://kansai.wordcamp.org/2024/session/understand-the-cache-involved-in-a-wordpress-site/

----

## 概要

キャッシュは WordPressはもとより、どのようなウェブサイトを開発する際に誰もが行き当たる技術です。しかしキャッシュは「ウェブサイトを速くするもの」であり、問題が生じた（っぽい）場合はともかく「フラッシュする！」とざっくりとしか理解されていないのが現状ではないでしょうか。特にWordPressサイトの場合はキャッシュについてよく理解しないまま「全てをよしなにやってくれるオススメプラグイン」を求めがちです。

このセッションでは、キャッシュの解説と、なぜキャッシュが複雑になりがちなのかを解き明かそうと思います。そして、WordPressサイトに関わるさまざまなキャッシュについて話します。

## セッション動画

https://wordpress.tv/2024/02/26/undestand-the-cache-involved-in-a-website-using-wordpress/

Transcript

2. WordPress サイト に関わるキャッシュ を理解する Toru Miki WordCamp Kansai 2024
3. キャッシュは ウェブサイトを 速くする …強すぎ？ …効き過ぎ？
4. 1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する
5. 1. キャッシュとは？ “キャッシュにより、以前に取得 または計算されたデータを効率的 に再利⽤できるようになります。” – キャッシュの概要、AWS https://aws.amazon.com/jp/caching/
6. 取得 or 計算 データ 遅いかもしれない！ もしくはデータを再 利用する？ この処理を改 善する？ 1. キャッシュとは？
7. 1. キャッシュとは？ 取得 or 計算 データ キャッシュ キャッシュがある場合、この処理をス キップする！ 再利用する ために保存！ より速く応える！ キャッシュの保存処理・取得処理 ＝キャッシング
8. 1. キャッシュとは？
9. • リクエストに対するレスポンスがより速くなるよう助けてくれ る 👉 パフォーマンスを助ける • より多くのリクエストを同時に処理できるよう助けてくれる 👉 スケーリングを助ける • 構成によってはサーバー費⽤を節約できる場合がある。 もたらさない効果 • 根本的なパフォーマンスの問題は解決してくれない。 もたらす効果 1. キャッシュとは？
10. 1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する
11. • しかし、実際のサイト開発と運⽤保守では： ◦ 難しく感じる（よくわからない） ◦ ややこしい ◦ 困ったらとりあえずフラッシュ（Flush）または パージ（Purge）を連打 なぜムズカシイ？ 「データの再利⽤」というシンプルなコンセプト 2. ムズカシイを紐解く
12. 2. ムズカシイ＆ややこしい キャッシュには種類 も数も複数ある システム全体で複雑化 設計と実装時に考慮 しなければならない 事柄が増える ※ あやふやな⽤語の使い⽅、マーケティング⽬的の誇張、コンテキスト不明な 説明、等も全く助けになってない！
13. • 種類 ◦ 保存される場所 ◦ 利⽤されている技術 ◦ インフラ側の構成‧仕様 ◦ WordPress のコアが関わるのか？ ◦ カスタムのキャッシングなのか？（プラグイン等） • 同じ種類につき複数のキャッシュが存在しうる キャッシュには種類も数も複数ある 2. ムズカシイを紐解く
14. 2. ムズカシイを紐解く
15. ブラウザキャッシュ CDN キャッシュ HTTP キャッシュ ページキャッシュ WP オブジェクト キャッシュ WP トランジェントキャッシュ フラグメントキャッシュ PHP OPcache 永続なメモリキャッシュの場合 例：Redis、Memcached、APCu → WP オブジェクトキャッシュの永続化 → WP トランジェントキャッシュの⾼速化 2. ムズカシイを紐解く
16. • キャッシュのインバリデーションと⽣成の戦略 ◦ キャッシュの助けを借りる上でのトレードオフ ◦ 最適な戦略はサイトによって違う場合もあり、何が正解と いうものがない。 • エラーではないので、デバッグが難しい • データベースとキャッシュの整合性 • コスト 設計と実装時に考慮しなければならない事柄が増える …等々 2. ムズカシイを紐解く
17. • キャッシュが stale な（新鮮ではない）状態であると判定し、 取り除くなどにより無効化すること。 • ムズカシイのは「いつ」「どのように」新鮮ではないと判定 するのか？ 取り除く処理、⽣成する処理にどう繋げる？ キャッシュの⽣成 • キャッシュが無い‧無効…では、いつ (再) ⽣成する？ • ⽣成処理の負荷は？（＝根本的なパフォーマンスの問題） インバリデーション（Invalidation） 2. ムズカシイを紐解く
18. ⽣わさび しゃり マグロ柵 マグロ ⽶ ⿂屋‧⿂市場‧ 卸売市場 野菜屋‧野菜市 場‧卸売市場 ⽶屋、卸売市場 漁師 わさび農家 ⽶農家 ⿂の冷凍 ⿂の冷凍移動 ⿂の解凍‧冷蔵 2. ムズカシイを紐解く
19. 1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する
20. • キャッシュの理解⼒を上げるには「急がば回れ」 ◦ WordPress 独⾃の概念ではないので、基礎から理解を積み 上げていく。 ◦ 学ぶ → 実践してみる → 理解度を深める（繰り返す） • 「ともかくプラグインを探す」から離れましょう。 ◦ 特に、多機能な「⾼速化を全てやりますよ」と謳っている プラグインに丸投げするのはおすすめしません。 3. 学びつつ実践する
21. 1. オリジンサーバーの外なのか？内なのか？ 2. キャッシングされるデータの粒度は⼤きいか？⼩さいか？ 3. インフラ側のキャッシング機能か？それは WordPress の キャッシングを助けるのか？ それとも独⾃の機能か？ 4. プラグインやテーマがキャッシュ機能と謳っているのは具体 的にどのキャッシングの事なのか？ キャッシュのコンテキストを整理するポイント 3. 学びつつ実践する ※ 3と4 → マーケティング⽬的で別の名称が付けられていることがあるので注意
22. 1. HTTP キャッシュ 2. ページキャッシュ 3. WP オブジェクトキャッシュと永続化 （永続オブジェクトキャッシュ / Persistent Object Cache） 3. 学びつつ実践する ここから始めてみよう
23. • HTTPプロトコルの仕様の⼀つ。 ◦ WordPress の技術ではない。 ◦ キャッシュはネットワーク上に置 かれます。つまり、オリジンサー バーの外側。 • 外側にあることの難しさ 👉 インバリデーションと再⽣成をオ リジンから指⽰できない。 3.1. HTTPキャッシュ ブラウザキャッシュ CDN キャッシュ HTTP キャッシュ
24. • サーバーからのレスポンスで得られたリソースがキャッシュ される 👉 WordPress サイトの場合：静的、動的 • 新鮮（Fresh）と古い（Stale）の2つの状態があり、age を判 断基準として古くなったかどうかの判定が⾏われる。 • 基本的にはネットワーク上で「よしなに」やってくれるが、 HTTPレスポンスヘッダーの Cache-Control フィールドで指⽰ できる。 3.1. HTTPキャッシュ Cache-Control: max-age=300, public Cache-Control: no-cache, must-revalidate,max-age=0 Cache-Control: s-max-age=300, max-age=180, public
25. • 静的ファイル ◦ インフラ側（Apache、nginx）で設定する必要がある。 ◦ ホスティングサービスの中にはサービスの管理画⾯から⾏ える場合もある。なるべくこれを活⽤する。 ◦ ない場合、Apache の場合は .htaccess に記述 （注意：プラグイン） • 動的コンテンツ ◦ 投稿、固定ページ、robots.txt、など ◦ アプリ側（PHP）でレスポンスヘッダーに付け⾜すことが できる。 3.1. HTTPキャッシュ
26. • HTTPキャッシュ⼊⾨の⼊⾨ https://blog.xcir.net/?p=2806 • mdn web docs_ ◦ HTTP キャッシュ https://developer.mozilla.org/ja/docs/Web/HTTP/Caching ◦ Cache-Control https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control • 書籍：Web 配信の技術 https://gihyo.jp/book/2021/978-4-297-11925-6 • CDNキャッシュ向けレスポンスヘッダーCache-Control:s-maxage を触ってみた https://dev.classmethod.jp/articles/play-with-shared-cache-response-header-s-m axage/ 3.1. HTTPキャッシュ
27. • WordPress サイトの場合： ◦ HTML形式のテキストを毎回動的に⽣成しているが、その 最終的な出⼒、つまりページ単位のキャッシュです。 ◦ オリジンサーバー内で置けるキャッシュの中で⼀番粒度が ⼤きく、概ね全てのリクエストに対して効果がある。 ▪ 👉 パフォーマンスとスケーリング両⾯でのプラス効果 が⾮常に⼤きい。 ▪ 👉 誤った利⽤で起きる事故の影響度も⼤きい。 3.2. ページキャッシュ
28. • WordPress サイトの場合は同じページキャッシュでも複数の 種類があり、ややこしいです。 ◦ CDN でのみキャッシュするやり⽅ 👉 動的リソースのHTTPキャッシュ ◦ オリジンサーバーでキャッシュするやり⽅ ▪ インフラ側の機能（＋専⽤のプラグイン） ▪ プラグインによる独⾃実装 ◦ 組み合わせるやり⽅ 3.2. ページキャッシュ
29. 3.2. ページキャッシュ インフラ側のページキャッシュ機能 例：nginx Fast-CGI、nginx reverse-proxy、Varnish、等 プラグイン実装のページキャッシュ機能 例：WP Super Cache、等
30. • キャッシュをしてはNGなページがある。 ◦ ログイン画⾯（wp-login.php） ◦ 管理画⾯（/wp-admin/） ◦ ログインしている状態の全てのページ（cookie） ◦ ユーザーによって表⽰すべき内容が違うページ ▪ ショッピングサイト、会員サイト、等 • インフラ側にページキャッシュ機能がある場合は禁⽌されて いるプラグインやカスタマイズがあるので注意する。 3.2. ページキャッシュ
31. • インフラ側のページキャッシュ機能を使うのがベター ◦ 特定なケースのサイト以外は全てのパターンが網羅されて おり、⼤抵の場合サポートの範囲だから。 ◦ WordPress 専⽤に作られたマネージド WordPress ホス ティングサービスを利⽤する。 • 独⾃実装のプラグインを利⽤する場合： ◦ なるべくページのキャッシングのみを⾏うプラグインを選 択して、切り分けができるようにしておく。 ◦ 過度な期待はしない… 3.2. ページキャッシュ
32. • WordPress が⾏う⼀連の処理の中でコストが⾼い処理を キャッシュするための仕組み。 ◦ 特に、データベースへのクエリ。 ◦ コアに実装されており、コアが利⽤している。 • キャッシュはメモリーに保存される。 • オブジェクトキャッシュはリクエストに対しての処理が終了 すれば破棄される。 • ただし永続化されていればリクエストを跨いで保持される。 3.3. WPオブジェクトキャッシュ＆永続化
33. 3.3. WPオブジェクトキャッシュ＆永続化 削除 永続ではない 永続 ※ Persistent = 永続/永続化。
34. • WordPress 6.0 以降の「パフォーマンス改善」には多くのオブ ジェクトキャッシュ絡みの改善が含まれています。 ◦ Performance Field Guide for WordPress 6.1 https://make.wordpress.org/core/2022/10/11/performance-field-guide-for-wordpress-6-1/ ◦ WordPress 6.2 Field Guide https://make.wordpress.org/core/2023/03/09/wordpress-6-2-field-guide/ ◦ Improvements to the Cache API in WordPress 6.3 https://make.wordpress.org/core/2023/07/17/improvements-to-the-cache-api-in-wordpress-6-3/ ◦ IImprovements to Object Caching in WordPress 6.4 https://make.wordpress.org/core/2023/10/17/improvements-to-object-caching-in-wordpress-6-4/ • 特に、6.1 にやっと実装された WP_Query をオブジェクト キャッシュする実装 ◦ https://make.wordpress.org/core/2022/10/07/improvements-to-wp_query-performance-in-6-1/ 3.3. WPオブジェクトキャッシュ＆永続化
35. • 開発者は Cache API を利⽤することで WP オブジェクト キャッシュをレバレッジできる。 • class WP_Object_Cache https://developer.wordpress.org/reference/classes/wp_object_cache/ • ⽐較的難しくはない API ですが、インバリデーションと⽣成 の設計は各⾃で⾏う必要がある。 • ⼀般向けに配布しているプラグインは、永続あり‧なし関係 なく正常に動作するように実装することが求められる。 3.3. WPオブジェクトキャッシュ＆永続化
36. 3.3. WPオブジェクトキャッシュ＆永続化
37. 3.3. WPオブジェクトキャッシュ＆永続化
38. 1. インフラが対応している必要がある。 ◦ APCu、Memcached、Redis、など。 ◦ WordPress ホスティングサービス… 2. WordPress がその機能を使えるようにするための drop-in プ ラグインも必要。 ◦ 例： Redis + Redis Object Cache プラグイン ※本当に必要なのか？ 3.3. WPオブジェクトキャッシュ＆永続化 永続化するには
39. まとめ
40. • キャッシュは処理をスキップすることにより、パフォーマン スとスケーリングの両⽅を助けてくれる。解決ではない。 • トレードオフは、インバリデーションと⽣成の設計と実装が 必要であること。 • WordPress サイトの場合、様々な技術のキャッシングが関 わっており、サイトによって適切な利⽤と設計は違う。 • HTTP キャッシュ、ページキャッシュ、WP オブジェクト キャッシュを学び、実践で利⽤することで理解度を深める。 • インフラ側のキャッシング機能を理解し、適切に利⽤するこ とで、より安全に最⼤限の効果を得られることが多い。 まとめ
41. https://profiles.wordpress.org/toru https://tarosky.co.jp/
42. Thank you! ありがとうございます ! 三⽊徹 / Toru Miki https://twitter.com/waviaei https://profiles.wordpress.org/toru/ https://torumiki.com/
43. • WordPress のキャッシュに関する⽇本語の解説とノウハウは CapitalP の記事にいくつかありま す。 ◦ WordPressキャッシュプラグインを選ぶために知っておくべきこと https://capitalp.jp/2017/03/14/what-you-ought-to-know-about-cache/ ◦ 【WV.1】リソース配信最適化のためのサーバー設定 https://capitalp.jp/2021/07/05/browser-cache-and-gzip/ ▪ ブラウザキャッシュとさくらインターネットでの設定例あり ◦ 【WV.3】TTFBとページキャッシュ https://capitalp.jp/2021/07/06/wordpress-and-ttfb/ ◦ 【WV.4】動的WordPressサイトでどこまでTTFBを下げられるか https://capitalp.jp/2021/07/07/dyanamic-page-and-ttfb/ ▪ オブジェクトキャッシュ、フラグメントキャッシュ、ページキャッシュなでについて ◦ 動的な会員制サイトにダイナミックページキャッシュを導⼊する  https://capitalp.jp/2019/06/05/dynamic-page-cache/ おまけ
44. • 英語の記事など。 ◦ A look at WordPress page caching with a CDN https://blog.ymirapp.com/wordpress-page-caching-cdn/ ▪ Cloudflareを利⽤するページキャッシュや、CDNキャッシュのインバリデーション問 題など。 ◦ WordPress, Object Cache, and Redis https://felipeelia.dev/wordpress-object-cache-and-redis/ • ホスティングサービス側にキャッシング機能が実装されており、WordPress に関わるキャッシュ の解説をしつつ「キャッシュプラグインは必要ありません、利⽤しないでください」としている例 ◦ [Kinsta] WordPressキャッシュとKinstaのキャッシュ機能（プラグイン不要） https://kinsta.com/jp/blog/wordpress-cache/ ◦ [SpinupWP] Caching in SpinupWP https://spinupwp.com/doc/caching-in-spinupwp/ おまけ #2