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

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

キャッシュからより多くのコンテンツを提供し、オリジンからのコンテンツに対するリクエストを減らすことで、ウェブサイトのロードのレイテンシーを減らすことができます。ウェブコンテンツの大部分がキャッシュから提供されるように CloudFront 設定を最適化する以下の方法を検討してください。

• 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 Based on Selected Request Headers] で、[None (Improves Caching)] を選択してキャッシュを最適化します。特定のヘッダーを転送する必要がある場合は、[Whitelist] を選択し、必要なヘッダーのみを追加します。
6. [Object Caching] で、Amazon S3 オブジェクトでキャッシュコントロールヘッダーを使用するには、[Use Origin Cache Headers] を選択します。Amazon S3 オリジンからのキャッシュコントロールヘッダーを上書きするには、[カスタマイズ] を選択します。次に、[Minimum TTL] を目的の最小キャッシュ期間に設定します。
   警告: ディストリビューション動作の [Minimum TTL]、[Maximum TTL]、[Default TTL] の各値は、オリジンからのオブジェクトに設定されたキャッシュヘッダーとやり取りします。
7. [Forward Cookies] で、[ None (Improves Caching)] を選択します。
8. [Query String Forwarding and Caching] では、[None (Improves Caching)] を選択してキャッシュを最適化します。特定のクエリ文字列を転送する必要がある場合は、[Forward all, cache based on whitelist] を選択してから、必要なクエリ文字列のみを追加します。
9. [Compress Objects Automatically] では、[Yes]をクリックします。
10. [Yes, Edit] をクリックして変更を保存します。