Amazon S3 でホストされ、CloudFront を介して提供される静的ウェブサイトで発生するレイテンシーをトラブルシューティングするにはどうすればよいですか?

簡単な説明

ウェブサイトの静的コンテンツの読み込み時のレイテンシーをトラブルシューティングするには、次のうち、レイテンシーに寄与するイベントを特定します。

1. クライアントはドメイン名の DNS クエリを送信します (DNS ルックアッププロセス)。
2. クライアントは SSL/TLS ネゴシエーションを含む、ウェブサーバー (CloudFront コンテンツ配信ネットワーク) にリクエストを送信します。
3. CloudFront がリクエストを処理してキャッシュからコンテンツを提供するとき、または CloudFront がリクエストをオリジン (Amazon S3) に転送します。

これらのイベントのパフォーマンスは、以下に依存します。

• ローカルシステムのウェブブラウザとリソース。
• ローカルネットワーク。
• ローカル DNS サーバー。
• ローカルルーター、ファイアウォールやプロキシ。
• アップストリーム DNS サーバー。
• インターネットサービスプロバイダー。
• Amazon S3 と CloudFront。

解決方法

レイテンシーの原因となっているイベントを特定します。ウェブブラウザのデベロッパーツールを使用して、ウェブサイトのコンテンツのリクエスト内の各コンポーネントのパフォーマンスを確認します。たとえば、Mozilla Firefox を使用している場合は、MDN ウェブドキュメントウェブサイトの Firefox デベロッパー用ツールとネットワークリクエストの詳細をご覧ください。

レイテンシーに影響しているイベントを特定したら、これらのイベントにかかる時間を短縮するための以下の考慮事項を確認してください。

クライアントはドメイン名の DNS クエリを送信します (DNS ルックアッププロセス)

DNS ルックアッププロセスを最適化する以下の方法を検討してください。

• クライアント側の DNS キャッシュを有効にするか、増やします。
• ローカル DNS サーバーの DNS キャッシュを設定または増やします。
• インターネットサービスプロバイダーからのリゾルバー DNS サーバーがレイテンシーを引き起こしている場合は、パブリック DNS サーバーの使用を検討してください。

クライアントは、SSL/TLS ネゴシエーションを含むリクエストをウェブサーバー (CloudFront コンテンツ配信ネットワーク) に送信します

クライアントとサーバー間の接続時間を短縮するには、次の方法を検討してください。

• ウェブキャッシュ、インターネットサービスプロバイダー、またはネットワークルートを変更することで、ローカルネットワークのパフォーマンスを最適化します。ウェブブラウザと CloudFront 間の接続は、以下の変数に依存します。

• ローカルネットワーク。
• インターネットサービスプロバイダーからの帯域幅。
• クライアントに最も近い CloudFront Point of Presence (POP) ロケーションに必要なネットワークルートまたはホップ。

• ウェブリソースへの最適化されたパスを設定するのがベストプラクティスです。さらに、正しい DNS リゾルバーを使用すると、ウェブブラウザは最も近く正しい POP ロケーションを見つけることができます。
• ローカルキャッシュを使用して、サーバー (CloudFront) からのリソースについてのリクエストを減らします。ローカルキャッシュは、CSS、JavaScript、イメージなど、頻繁に変更されない静的オブジェクトに特に有益です。Amazon S3 でホストされている静的コンテンツの場合、キャッシュコントロールヘッダーをオブジェクトに追加します。キャッシュコントロールヘッダーは、ウェブサイトのコンテンツをブラウザのメモリまたはローカルディスクに一定期間保持するようにウェブブラウザに指示します。その間、ウェブブラウザはインターネット経由でコンテンツをリクエストするのではなく、ローカルメモリからコンテンツをロードします。Amazon S3 コンソールを使用して、キャッシュコントロールヘッダーを設定します。
• ローカルキャッシュ HTTP フォワードプロキシがすでにある場合は、ウェブサイトのコンテンツに十分な大きさのキャッシュサイズを指定します。これにより、頻繁にアクセスされるページはローカルプロキシキャッシュに保存されるため、インターネット経由で送信されるリクエストの数が減ります。

CloudFront がリクエストを処理してキャッシュからコンテンツを提供するか、CloudFront がリクエストをオリジン (Amazon S3) に転送します

キャッシュからより多くのコンテンツを提供し、オリジンからのコンテンツのリクエストを減らすことで、ウェブサイトの読み込みの待ち時間を減らします。以下の手順を実行して、ウェブコンテンツがほとんどキャッシュから配信されるように CloudFront の設定を最適化します。

• Amazon S3 から静的コンテンツを提供するキャッシュ動作のために、AWS Managed CachingOptimized キャッシュポリシーを使用します。
• CloudFront の静的コンテンツの最小キャッシュ時間を長くします。または、CloudFront ディストリビューションのデフォルト動作の最小キャッシュ時間を増やします。ディストリビューションのデフォルト動作の最小キャッシュ時間を増やす方法の 1 つは、最小 TTL 値を増やすことです。最小 TTL 値を増やすと、CloudFront では Amazon S3 オリジンからオブジェクトをリクエストする代わりに、より長い時間オブジェクトをキャッシュします。
• ヘッダーまたはクエリ文字列の転送またはキャッシュ設定を確認します。CloudFront キャッシュでは、Cache Based on Selected Request Headers および Query String Forwarding and Caching の値が **None (Improves Caching)**に設定されている場合に最適化されます。これらの値に基づいて転送またはキャッシュする必要がある場合は、影響を受けるヘッダーとクエリ文字列を必ず指定してください。
  注意: Cookie を Amazon S3 オリジンに転送するように CloudFront を設定しないでください。Amazon S3 は cookie を処理しません。
• CloudFront ディストリビューションで圧縮を有効にします。圧縮を有効にすると、CloudFront はエッジまたは POP ロケーションでオブジェクトを自動的に圧縮し、その圧縮されたオブジェクトを提供します。これにより、ダウンロード時間が短縮され、ページ読み込みのパフォーマンスが向上します。
• 静的コンテンツには個別のキャッシュ動作を使用します。静的コンテンツと動的コンテンツに異なるキャッシュ動作を使用することがベストプラクティスです。

静的コンテンツの最適なキャッシュ設定を行うには、以下の手順に従ってください。

1. CloudFront コンソールを開きます。
2. ディストリビューションのリストから、ウェブサイトの静的コンテンツを提供するディストリビューションを選択します。
3. [Behaviors] (動作) タブを選択します。
4. 静的コンテンツ用の新しい動作を作成するか、静的コンテンツのパスパターンの既存の動作を編集します。既存の動作を編集するには、動作を選択し、[Edit] (編集) を選択します。
5. [Cache key and origin requests] (キャッシュキーとオリジンリクエスト) で、[Cache policy and origin request policy] (キャッシュポリシーとオリジンリクエストポリシー) を選択します。
6. [Cache policy] (キャッシュポリシー) で、[CachingOptimized] を選択します。
7. [Origin request policy] (オリジンリクエストポリシー) で、[None] (なし) を選択するか、空白のままにします。オリジンリクエストポリシーはオプションであり、S3 オリジンのベストプラクティスではありません。
8. [Save changes] (変更を保存) をクリックします。

---

関連情報

Dynamic whole site delivery with Amazon CloudFront

キャッシュの最適化と可用性

コンテンツがキャッシュに保持される期間 (有効期限) の管理

圧縮ファイルの供給

AWS サポートからリクエストされた Amazon S3 リクエスト ID の値を収集する方法を教えてください