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

最終更新日: 2021 年 9 月 14 日

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

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 接続ポイント (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 値を増やすことです。これにより、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] (変更を保存) を選択します。