PWAのキャッシュとSEO…なんか関係あるの？
うーん、なんかね、PWAのキャッシングって速くなるからSEOに良い！ってみんな言うじゃないですか。🤔 確かにCore Web Vitalsとか、表示速度が上がるのは間違いない。それは事実。 でも、それだけじゃないんだよな…って、最近よく考えるんです。
正直、設定をミスると、せっかく更新したコンテンツがGoogleに全然見てもらえなくて、「あれ、なんで検索結果が古いまんまなの？？」ってなる、ちょっと怖い話でもあるんですよね。😅 このへん、意外と語られてない気がする。
みんな言う「速さ」の裏にある、見落としがちなこと
多くの記事って、「PWAは速い！ユーザー体験最高！だからSEOも上がる！」って感じで、だいたいポジティブな話で終わるじゃないですか。 間違ってはない。間違ってはないんだけど、一番大事なことを忘れてる気がする。
それは、「キャッシュが強すぎると、Googlebotも古い情報を見ちゃう」ってリスク。 Googlebotも一人のユーザーみたいなもので、Service Workerが「はい、これキャッシュね」って古いコンテンツを渡しちゃうと、Googlebotは「ふむふむ、このページはこういう内容か」って古い情報のまま認識しちゃう。これ、結構ヤバいですよね。特にニュースサイトとか、情報の鮮度が命のサイトだと致命的。
だから、「ただキャッシュすれば良い」んじゃなくて、「どうキャッシュするか」がめちゃくちゃ大事って話です。ここをちゃんと話さないと、片手落ちだと思うんだよなあ。
じゃあ、どうすりゃいいの？ Service Workerのキャッシュ戦略
で、その「どうキャッシュするか」っていうのが、Service Workerのキャッシュ戦略ってやつ。 いろいろあるんだけど、よく出てくるのはこの３つかな。
- Cache First（キャッシュファースト）: とにかくキャッシュを先に見に行く。キャッシュがあればそれを表示。なければネットワークに探しに行く。
- Network First（ネットワークファースト）: まずはネットワークに新しい情報がないか見に行く。取れたらそれを表示してキャッシュも更新。ネットワークがダメなら（オフラインとか）キャッシュを見に行く。
- Stale-While-Revalidate（バックグラウンドで更新）: まずキャッシュをすぐ表示して、裏側でこっそりネットワークに新しい情報がないか確認しにいく。もし新しいのがあれば、次からそれを表示する。
まあ、他にもいろいろあるけど、基本はこの辺の組み合わせですね。 んで、SEOを考えるとどれがいいのかって話になる。
結局どれがいいの？ 用途別の比較
まあ、正直「これが絶対！」っていうのはないです。サイトの種類による。 でも、ざっくり個人的な見解をまとめてみると、こんな感じかなあ…。
| 戦略 | 表示速度 | 情報の鮮度 | SEOへの影響とか個人的な感想 |
|---|---|---|---|
| Cache First | 爆速。🚀 | 悪い。一度キャッシュしたら更新されない… | アプリの骨格部分（シェル）とか、ロゴとか、もう絶対変わらないでしょってファイルにはいい。でも、記事とか商品ページにこれやると、更新が反映されなくて地獄を見る。 |
| Network First | まあまあ。普通。 | 最高。常に最新。✨ | 一番確実だけど、PWAの「速さ」の恩恵は薄れるかも。絶対最新じゃないと困る！みたいな金融系のデータとか？でもそれならPWAにする意味…ってなっちゃう気も。 |
| Stale-While-Revalidate | 速い。ほぼキャッシュファースト並み。 | まあまあ良い。1回目は古いかもだけど、すぐ新しくなる。 | 個人的にはこれ一番バランスいいと思う。 ユーザーは速く表示されてハッピーだし、裏でちゃんと更新かかるからGooglebotもそのうち新しい情報見てくれる。ブログとかニュース系はこれ一択じゃないかな。 |
実装の時に気をつけること ⚠️
実際にこれを実装するときは、Googleが提供している`Workbox`っていうライブラリを使うのがほとんどだと思う。 これ使うと、さっきの戦略を結構簡単に設定できる。
例えば、記事ページ（`/articles/` 以下とか）には `StaleWhileRevalidate` を使って、CSSやJSみたいなアセットには `CacheFirst` を使う、みたいなルーティングが書けるわけです。
// これはあくまでイメージね
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
// CSS, JS, Workerはキャッシュ優先で1年保持
registerRoute(
({ request }) => request.destination === 'style' ||
request.destination === 'script' ||
request.destination === 'worker',
new CacheFirst({
cacheName: 'assets',
plugins: [
new ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 365 * 24 * 60 * 60, // 1年
}),
],
})
);
// 記事ページとかはStaleWhileRevalidate
registerRoute(
({ request, url }) => request.destination === 'document' ||
url.pathname.startsWith('/articles/'),
new StaleWhileRevalidate({
cacheName: 'content',
plugins: [
new CacheableResponsePlugin({
statuses:,
}),
],
})
);
こういう設定をちゃんとやらないと、「CSSだけ更新されて表示が崩れた！」とか、「記事は更新されるのに画像が古いまま…」みたいな悲劇が起こる。大事なのは、リソースの種類によってキャッシュ戦略をちゃんと使い分けること。 これ、基本だけど超重要。
まとめ：キャッシュは諸刃の剣
結局のところ、PWAのキャッシュは、表示速度を上げてユーザー体験を良くするっていうすごいメリットがある。 これは間違いなくSEOにも間接的に良い影響がある。
でも、その一方で、コンテンツの鮮度を損なって、Googleのクローラーに古い情報を渡しちゃうリスクも抱えてる。 だから、ただ導入するんじゃなくて、コンテンツの特性に合わせて適切なキャッシュ戦略を丁寧に設計することが、結果的に一番SEOに効くってことなんだと思うんですよね。
…と、まあ、なんか偉そうに語っちゃったけど、自分もキャッシュの更新で痛い目見たことあるんで。😅
みんなのサイト、キャッシュどうしてる？特にブログとかECサイトみたいな更新頻度高いやつ。よかったら教えてください〜。🙏
