𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗶𝗻𝗴 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 𝗨𝘀𝗶𝗻𝗴 𝗖𝗗𝗡 𝗮𝗻𝗱 𝗖𝗮𝗰𝗵𝗶𝗻𝗴 𝗛𝗲𝗮𝗱𝗲𝗿𝘀

Googleは、サイトの速度と安定性を測定するためにCore Web Vitalsを使用しています。スコアが高ければ、SEOとユーザーエクスペリエンスが向上します。

以下の3つの主要な指標を追跡する必要があります： • Largest Contentful Paint (LCP): 2.5秒未満を目標にします。 • Interaction to Next Paint (INP): 200ms未満を目標にします。 • Cumulative Layout Shift (CLS): 0.1未満を目標にします。

コンテンツ配信ネットワーク（CDN）とスマートなキャッシュヘッダーを組み合わせることは、これらのスコアを改善するための最も速い方法です。

CDNが役立つ理由：

  • ユーザーに近い場所からファイルを配信することで、レイテンシを低減します。
  • エッジでAPIレスポンスをキャッシュし、サーバーを保護します。
  • オリジンサーバーがダウンした場合でも、古い（stale）コンテンツを配信します。
  • 画像のリサイズや圧縮を自動的に行い、画像を最適化します。

次のキャッシュ戦略を使用してください： • 静的アセット：ファイルハッシュを使用して、キャッシュ期間を長く設定します。 • HTMLページ：更新頻度に基づいて、特定のキャッシュヘッダーを設定します。 • APIレスポンス：エッジでコンテンツをキャッシュし、オリジンの負荷を軽減します。

画像の最適化はLCPにとって極めて重要です。LCPの問題の多くは、サイズの大きなヒーロー画像に起因します。CDNは、これらの画像をWebPやAVIF形式に変換し、最も近いサーバーから配信できます。これにより、モバイルページのデータ量を最大70%削減できます。

モダンなツールを使えば、更新管理は簡単です。Webhookを使用してキャッシュのパージ（削除）をトリガーします。コンテンツを更新すると、CDNは古いデータのみを削除します。これにより、古い情報を表示することなく、サイトの高速性を維持できます。

実施すべきステップ：

  • エッジコンピューティングを備えたモダンなCDNを使用する。
  • すべてのリソースタイプに対して、適切なcache-controlヘッダーを設定する。
  • エッジで画像を最適化する。
  • APIレスポンスをキャッシュする。
  • 更新時にWebhookを使用してキャッシュをクリアする。
  • 進捗を確認するために、実際のユーザー指標を監視する。

ファイルの配信方法における小さな変更が、検索順位の向上とコンバージョン率の増加につながります。

出典: https://dev.to/sohanaakbar7/optimizing-core-web-vitals-using-cdn-caching-headers-2lfd