No content

WordPress サイト に関わるキャッシュ を理解する Toru Miki WordCamp Kansai 2024

キャッシュは ウェブサイトを 速くする …強すぎ？ …効き過ぎ？

1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する

1. キャッシュとは？ “キャッシュにより、以前に取得 または計算されたデータを効率的 に再利⽤できるようになります。” – キャッシュの概要、AWS https://aws.amazon.com/jp/caching/

取得 or 計算 データ 遅いかもしれない！ もしくはデータを再 利用する？ この処理を改 善する？ 1. キャッシュとは？

1. キャッシュとは？ 取得 or 計算 データ キャッシュ キャッシュがある場合、この処理をス キップする！ 再利用する ために保存！ より速く応える！ キャッシュの保存処理・取得処理 ＝キャッシング

1. キャッシュとは？

● リクエストに対するレスポンスがより速くなるよう助けてくれ る 👉 パフォーマンスを助ける ● より多くのリクエストを同時に処理できるよう助けてくれる 👉 スケーリングを助ける ● 構成によってはサーバー費⽤を節約できる場合がある。 もたらさない効果 ● 根本的なパフォーマンスの問題は解決してくれない。 もたらす効果 1. キャッシュとは？

1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する

● しかし、実際のサイト開発と運⽤保守では： ○ 難しく感じる（よくわからない） ○ ややこしい ○ 困ったらとりあえずフラッシュ（Flush）または パージ（Purge）を連打 なぜムズカシイ？ 「データの再利⽤」というシンプルなコンセプト 2. ムズカシイを紐解く

2. ムズカシイ＆ややこしい キャッシュには種類 も数も複数ある システム全体で複雑化 設計と実装時に考慮 しなければならない 事柄が増える ※ あやふやな⽤語の使い⽅、マーケティング⽬的の誇張、コンテキスト不明な 説明、等も全く助けになってない！

● 種類 ○ 保存される場所 ○ 利⽤されている技術 ○ インフラ側の構成‧仕様 ○ WordPress のコアが関わるのか？ ○ カスタムのキャッシングなのか？（プラグイン等） ● 同じ種類につき複数のキャッシュが存在しうる キャッシュには種類も数も複数ある 2. ムズカシイを紐解く

2. ムズカシイを紐解く

ブラウザキャッシュ CDN キャッシュ HTTP キャッシュ ページキャッシュ WP オブジェクト キャッシュ WP トランジェントキャッシュ フラグメントキャッシュ PHP OPcache 永続なメモリキャッシュの場合 例：Redis、Memcached、APCu → WP オブジェクトキャッシュの永続化 → WP トランジェントキャッシュの⾼速化 2. ムズカシイを紐解く

● キャッシュのインバリデーションと⽣成の戦略 ○ キャッシュの助けを借りる上でのトレードオフ ○ 最適な戦略はサイトによって違う場合もあり、何が正解と いうものがない。 ● エラーではないので、デバッグが難しい ● データベースとキャッシュの整合性 ● コスト 設計と実装時に考慮しなければならない事柄が増える …等々 2. ムズカシイを紐解く

● キャッシュが stale な（新鮮ではない）状態であると判定し、 取り除くなどにより無効化すること。 ● ムズカシイのは「いつ」「どのように」新鮮ではないと判定 するのか？ 取り除く処理、⽣成する処理にどう繋げる？ キャッシュの⽣成 ● キャッシュが無い‧無効…では、いつ (再) ⽣成する？ ● ⽣成処理の負荷は？（＝根本的なパフォーマンスの問題） インバリデーション（Invalidation） 2. ムズカシイを紐解く

⽣わさび しゃり マグロ柵 マグロ ⽶ ⿂屋‧⿂市場‧ 卸売市場 野菜屋‧野菜市 場‧卸売市場 ⽶屋、卸売市場 漁師 わさび農家 ⽶農家 ⿂の冷凍 ⿂の冷凍移動 ⿂の解凍‧冷蔵 2. ムズカシイを紐解く

1. キャッシュとは？ 2. ムズカシイを紐解く 3. 学びつつ実践する

● キャッシュの理解⼒を上げるには「急がば回れ」 ○ WordPress 独⾃の概念ではないので、基礎から理解を積み 上げていく。 ○ 学ぶ → 実践してみる → 理解度を深める（繰り返す） ● 「ともかくプラグインを探す」から離れましょう。 ○ 特に、多機能な「⾼速化を全てやりますよ」と謳っている プラグインに丸投げするのはおすすめしません。 3. 学びつつ実践する

1. オリジンサーバーの外なのか？内なのか？ 2. キャッシングされるデータの粒度は⼤きいか？⼩さいか？ 3. インフラ側のキャッシング機能か？それは WordPress の キャッシングを助けるのか？ それとも独⾃の機能か？ 4. プラグインやテーマがキャッシュ機能と謳っているのは具体 的にどのキャッシングの事なのか？ キャッシュのコンテキストを整理するポイント 3. 学びつつ実践する ※ 3と4 → マーケティング⽬的で別の名称が付けられていることがあるので注意

1. HTTP キャッシュ 2. ページキャッシュ 3. WP オブジェクトキャッシュと永続化 （永続オブジェクトキャッシュ / Persistent Object Cache） 3. 学びつつ実践する ここから始めてみよう

● HTTPプロトコルの仕様の⼀つ。 ○ WordPress の技術ではない。 ○ キャッシュはネットワーク上に置 かれます。つまり、オリジンサー バーの外側。 ● 外側にあることの難しさ 👉 インバリデーションと再⽣成をオ リジンから指⽰できない。 3.1. HTTPキャッシュ ブラウザキャッシュ CDN キャッシュ HTTP キャッシュ

● サーバーからのレスポンスで得られたリソースがキャッシュ される 👉 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

● 静的ファイル ○ インフラ側（Apache、nginx）で設定する必要がある。 ○ ホスティングサービスの中にはサービスの管理画⾯から⾏ える場合もある。なるべくこれを活⽤する。 ○ ない場合、Apache の場合は .htaccess に記述 （注意：プラグイン） ● 動的コンテンツ ○ 投稿、固定ページ、robots.txt、など ○ アプリ側（PHP）でレスポンスヘッダーに付け⾜すことが できる。 3.1. HTTPキャッシュ

● 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キャッシュ

● WordPress サイトの場合： ○ HTML形式のテキストを毎回動的に⽣成しているが、その 最終的な出⼒、つまりページ単位のキャッシュです。 ○ オリジンサーバー内で置けるキャッシュの中で⼀番粒度が ⼤きく、概ね全てのリクエストに対して効果がある。 ■ 👉 パフォーマンスとスケーリング両⾯でのプラス効果 が⾮常に⼤きい。 ■ 👉 誤った利⽤で起きる事故の影響度も⼤きい。 3.2. ページキャッシュ

● WordPress サイトの場合は同じページキャッシュでも複数の 種類があり、ややこしいです。 ○ CDN でのみキャッシュするやり⽅ 👉 動的リソースのHTTPキャッシュ ○ オリジンサーバーでキャッシュするやり⽅ ■ インフラ側の機能（＋専⽤のプラグイン） ■ プラグインによる独⾃実装 ○ 組み合わせるやり⽅ 3.2. ページキャッシュ

3.2. ページキャッシュ インフラ側のページキャッシュ機能 例：nginx Fast-CGI、nginx reverse-proxy、Varnish、等 プラグイン実装のページキャッシュ機能 例：WP Super Cache、等

● キャッシュをしてはNGなページがある。 ○ ログイン画⾯（wp-login.php） ○ 管理画⾯（/wp-admin/） ○ ログインしている状態の全てのページ（cookie） ○ ユーザーによって表⽰すべき内容が違うページ ■ ショッピングサイト、会員サイト、等 ● インフラ側にページキャッシュ機能がある場合は禁⽌されて いるプラグインやカスタマイズがあるので注意する。 3.2. ページキャッシュ

● インフラ側のページキャッシュ機能を使うのがベター ○ 特定なケースのサイト以外は全てのパターンが網羅されて おり、⼤抵の場合サポートの範囲だから。 ○ WordPress 専⽤に作られたマネージド WordPress ホス ティングサービスを利⽤する。 ● 独⾃実装のプラグインを利⽤する場合： ○ なるべくページのキャッシングのみを⾏うプラグインを選 択して、切り分けができるようにしておく。 ○ 過度な期待はしない… 3.2. ページキャッシュ

● WordPress が⾏う⼀連の処理の中でコストが⾼い処理を キャッシュするための仕組み。 ○ 特に、データベースへのクエリ。 ○ コアに実装されており、コアが利⽤している。 ● キャッシュはメモリーに保存される。 ● オブジェクトキャッシュはリクエストに対しての処理が終了 すれば破棄される。 ● ただし永続化されていればリクエストを跨いで保持される。 3.3. WPオブジェクトキャッシュ＆永続化

3.3. WPオブジェクトキャッシュ＆永続化 削除 永続ではない 永続 ※ Persistent = 永続/永続化。

● 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オブジェクトキャッシュ＆永続化

● 開発者は Cache API を利⽤することで WP オブジェクト キャッシュをレバレッジできる。 ● class WP_Object_Cache https://developer.wordpress.org/reference/classes/wp_object_cache/ ● ⽐較的難しくはない API ですが、インバリデーションと⽣成 の設計は各⾃で⾏う必要がある。 ● ⼀般向けに配布しているプラグインは、永続あり‧なし関係 なく正常に動作するように実装することが求められる。 3.3. WPオブジェクトキャッシュ＆永続化

3.3. WPオブジェクトキャッシュ＆永続化

3.3. WPオブジェクトキャッシュ＆永続化

1. インフラが対応している必要がある。 ○ APCu、Memcached、Redis、など。 ○ WordPress ホスティングサービス… 2. WordPress がその機能を使えるようにするための drop-in プ ラグインも必要。 ○ 例： Redis + Redis Object Cache プラグイン ※本当に必要なのか？ 3.3. WPオブジェクトキャッシュ＆永続化 永続化するには

まとめ

● キャッシュは処理をスキップすることにより、パフォーマン スとスケーリングの両⽅を助けてくれる。解決ではない。 ● トレードオフは、インバリデーションと⽣成の設計と実装が 必要であること。 ● WordPress サイトの場合、様々な技術のキャッシングが関 わっており、サイトによって適切な利⽤と設計は違う。 ● HTTP キャッシュ、ページキャッシュ、WP オブジェクト キャッシュを学び、実践で利⽤することで理解度を深める。 ● インフラ側のキャッシング機能を理解し、適切に利⽤するこ とで、より安全に最⼤限の効果を得られることが多い。 まとめ

https://profiles.wordpress.org/toru https://tarosky.co.jp/

Thank you! ありがとうございます ! 三⽊徹 / Toru Miki https://twitter.com/waviaei https://profiles.wordpress.org/toru/ https://torumiki.com/

● 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/ おまけ

● 英語の記事など。 ○ 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