AWS Amplify Hosting でのアプリのパフォーマンスを向上させるための CDN キャッシュの改善

AWS Amplify Hosting は、キャッシュの効率性の大幅な改善を発表することを喜ばしく思います。最適化されたキャッシュルールと、キャッシュキーからクッキーを削除することによる高いキャッシュヒット率をお客様に提供します。また、Next.js の国際化 (i18n) サポートなどのユースケースを可能にする、追加のヘッダーへのアクセスも提供しています。この変更により、エンドユーザーはコンテンツを高速かつ効率的に受け取れ、より優れたユーザーエクスペリエンスが実現できるようになります。

改善ハイライト

最適化されたキャッシュポリシー
キャッシュキーから Cookie を削除する機能
追加の CloudFront ヘッダーの転送
Next.js 国際化 (i18n) をサポート
Brotli 圧縮を有効化

パフォーマンス改善

追加のキャッシュポリシー

Amplify Hosting は、世界中のエッジロケーションのネットワークを利用して、低レイテンシーでコンテンツを配信する Amazon CloudFront Global Edge Network を活用しています。
Amazon CloudFront は、エンドユーザーのリクエストが最も近いエッジロケーションから返されるようにします。その結果、Web リクエストが短い距離を移動するため、パフォーマンスが向上します。エッジロケーションにキャッシュされていないファイルの場合、Amazon CloudFront はオリジンサーバーからファイルを可能な限り速く取得できるロジックを維持しています。キャッシュポリシーによってキャッシュキーが決まり、キャッシュされたコンテンツがサービスされるかどうかが判断されます。一方、オリジンリクエストポリシーは、キャッシュミスの際にどの Cookie、クエリ文字列、ヘッダーをオリジンサーバーに転送するかを指定します。

特定の種類のコンテンツに最適なキャッシュ戦略と Time To Live (TTL) の延長により、キャッシュヒット率が高くなり、エンドユーザーにより早い応答時間を提供できるようになります。現在、Amplify Hosting は、静的コンテンツ、サーバーサイドレンダリングされたコンテンツ、画像の最適化コンテンツに対して、次のキャッシュ戦略を実装しています。
これらの変更が以前のバージョンとどのように比較されるかについては、ドキュメントの詳細な表を参照してください。

コンテンツタイプ	キャッシュ期間	キャッシュキーに含まれるもの
静的コンテンツ	最大 1 年	Authorization および Host ヘッダー Cookie – なしクエリ文字列 – なし
SSR コンテンツおよびリバースプロキシ	最大 1 年	Accept、Authorization、CloudFront-Viewer-Country、および Host ヘッダー Cookie – すべてクエリ文字列 – すべて
画像最適化コンテンツ	最大 1 年	Accept、Authorization、および Host ヘッダー Cookie – なしクエリ文字列: すべて (詳細)

キャッシュは、デプロイ後や、カスタムヘッダーまたは Basic 認証設定が更新されるたびに無効化されます。これらのキャッシュ戦略の詳細については、キャッシュに関するドキュメントを参照してください。

キャッシュキーから Cookie を削除

キャッシュキーから Cookie を削除することができるようになりました。キャッシュキーは、コンテンツデリバリーネットワーク（CDN）がキャッシュされたコンテンツを効率的に保存および取得するために使用する固有の識別子で、ユーザーがアプリケーションの正しいバージョンを迅速に受け取れるようにします。キャッシュキーからCookieを削除する機能は非常に重要です。なぜなら、Google Analytics などのサービスからのウェブリクエストに含まれる Cookie は、各 Cookie に固有のハッシュが含まれているため、キャッシング戦略を妨げる可能性があるからです。

例えば、URL リクエストが次のように構築される場合は以下のようになります。

www.amplify.com
Cookie: ga-session-id=abcdef

キャッシュキーから Cookie を削除することで、ユーザーごとの固有のハッシュが排除され、キャッシュヒット率が大幅に向上します。この最適化により、キャッシュヒット率が高まり、より多くのコンテンツをエッジロケーションから直接配信できるようになります。その結果、パフォーマンスが向上し、コンテンツの配信が高速化され、ユーザーの待ち時間が短縮されます。

既存のアプリと新しいアプリは、本日からこの改善を活用できます。既存のアプリでは、概要ペインから Hosting を選択し、次に Custom headers and cache → Cache key settings を選んでキャッシュキーに Cookie を保持するかどうかを有効または無効にしてください。新しいアプリの場合は、Advanced settings でこの設定を構成できます。この構成は API からも利用できます。

Screenshot of the cache key setting

ベンチマーキング

これらのパフォーマンス改善を評価するために、静的および SSR ルートの両方を含む Next.js 14 hello world アプリをベンチマークしました。SSR ルートは通常キャッシュされないため、静的アセットに関連する改善点にフォーカスしました。実際のお客様の動作をシミュレートするため、Google Analytics からリクエストごとにユニークな Cookie を導入しました。これらの CDN の改善を有効にすると、応答時間の 95 % タイルと平均の両方で約 98 %の改善と、99.99 %のキャッシュヒット率の大幅な改善を確認しました。アプリの複雑さとフレームワークによってはさまざまですが、このベーシックな hello world アプリでは、特に静的アセットに対してこれらの CDN キャッシュの最適化を有効にすることで、大幅なパフォーマンス向上が得られる可能性があることを強く示しています。

実際の例として、Next.js の SSG を使用し、GitHub でオープンソース化されている Amplify フレームワークのドキュメントサイト https://docs.amplify.aws/ のパフォーマンスを分析しました。静的サイトでありながら、著しく低いレイテンシと 90 % を超えるキャッシュヒット率という劇的な改善がみられました。

Caching Perf

追加機能

CloudFront ヘッダー

Amplify Hosting は、CloudFront が提供する追加のヘッダーを転送するようになりました。ヘッダーの詳細なリストは CloudFront のドキュメントでご確認いただけます。これらのヘッダーを利用可能にすることで、以下のようなさまざまなユースケースが可能になります。

user-agent ヘッダーは、コンテンツの最適化やパーソナライズのために、エンドユーザーのデバイス情報を把握することをユーザーに許可します。
referer ヘッダーは、リクエストの発信元を示すため、ウェブサイトはトラフィックソースを追跡できます。
エンドユーザーの地理情報を取得するための cloudfront-viewer-* ヘッダー (例: cloudfront-viewer-city)

これらのヘッダーの一部にアクセスするには、サーバー側からのアクセスが必要になる可能性があります。たとえば、Next.js Amplify アプリの User-Agent ヘッダーは、Next.js の headers() 関数を使用して取得できます。これにより、開発者はサーバー側でヘッダー情報を取得し、クライアントのデバイスやブラウザに基づいてカスタムロジックを実装することができます。以下のコードスニペットは、このヘッダーを取得する方法を示しています。

import { headers } from 'next/headers'
export default function Page() {
	const headersList = headers()
	const userAgent = headersList.get('user-agent')
	return <div>User Agent: {userAgent}</div>
}

Next.js の国際化 (i18n)

Next.js の国際化 (i18n) が現在ネイティブにサポートされています。accept-language ヘッダをオリジンサーバに転送することで、Next.js アプリケーションは、ブラウザリクエストから直接ユーザの言語設定を検出できます。この機能強化により、多言語サイトのユーザーエクスペリエンスが大幅に向上しました。

Brotli 圧縮の有効化

このリリースにより、Brotli 圧縮が Amplify Hosting アプリで有効化され、アプリケーションのパフォーマンスが大幅に向上します。Brotli 圧縮は、非常に効率的なアルゴリズムで、ファイルサイズを縮小し、データ転送用に優れた圧縮を提供します。これにより、Web ページの読み込み時間が短縮され、データ使用量が削減されます。この機能強化により、特にモバイルユーザーや低速回線の接続環境でユーザー体験が改善され、帯域幅コストも削減できます。高速な読み込みにより、検索エンジンに優先されるため、SEO 順位も向上します。さらに、最新のブラウザーが Brotli をサポートしているため、互換性が確保され、パフォーマンス改善が最大化されます。この機能は、すべてのアプリで自動的に有効になります。