How can I troubleshoot latency in my static website that's hosted on Amazon S3 and served through CloudFront?

6 minute read
0

My website's static content is hosted on an Amazon Simple Storage Service (Amazon S3) bucket and served to users through an Amazon CloudFront distribution. My website's content loads slowly, or I'm seeing that the Time To First Byte (TTFB) metric is high. I want to troubleshoot the latency in loading my website's static content.

Short description

To troubleshoot the latency in loading your website's static content, identify which of the following events contributes to the latency:

  1. Client sends a DNS query for the domain name (the DNS lookup process).
  2. Client sends the request to the web server (CloudFront content delivery network), including the SSL/TLS negotiation.
  3. CloudFront processes the request and serves content from the cache, or CloudFront forwards the request to the origin (Amazon S3).

The performance of these events depends upon:

  • The web browser and resources on the local system.
  • The local network.
  • The local DNS server.
  • The local router, firewall, or proxy.
  • The upstream DNS server.
  • The internet service provider.
  • Amazon S3 and CloudFront.

Resolution

Identify the event that is contributing to the latency. Check the performance of each component within a request for your website's content by using the developer tools of your web browser. For example, if you're using Mozilla Firefox, see Firefox Developer Tools and Network request details on the MDN web docs website.

After you determine which events are contributing to the latency, review the following considerations for reducing the time of those events.

Client sends a DNS query for the domain name (the DNS lookup process)

Consider these ways of optimizing the DNS lookup process:

  • Turn on or increase the client-side DNS caching.
  • Set or increase the DNS cache on the local DNS server.
  • If the resolver DNS server from the internet service provider is causing latency, then consider using public DNS servers.

Client sends the request to the web server (CloudFront content delivery network), including the SSL/TLS negotiation

Consider the following ways to reduce the client-to-server connection time:

  • Optimize your local network performance through modifications to your web caching, internet service provider, or network routes. The connection between your web browser and CloudFront depends on the following variables:
  • Local network.
  • Bandwidth from the internet service provider.
  • Network route or hops required to the CloudFront point of presence (POP) location that's closest to the client.
  • It's a best practice to configure the most optimized path to web resources. Additionally, using the correct DNS resolver allows your web browser to find the closest and correct POP location.
  • Use local caching to reduce requests for resources from the server (CloudFront). Local caching is especially useful for static objects that don't change often, such as CSS, JavaScript, or images. For your static content hosted on Amazon S3, add a cache-control header to the objects. The cache-control header instructs web browsers to keep the website content in the browser's memory or the local disk for a certain amount of time. During that time, the web browser loads the content from local memory instead of requesting the content over the internet. Use the Amazon S3 console to set a cache-control header.
  • If you already have a local caching HTTP forward proxy, specify a cache size large enough for your website content. This will reduce the number of requests sent through the internet, because frequently accessed pages are stored in the local proxy cache.

CloudFront processes the request and serves content from the cache, or CloudFront forwards the request to the origin (Amazon S3)

Reduce the latency in loading your website by serving more content from the cache and reducing requests for content from the origin. Optimize your CloudFront configuration so that your web content is served mostly from the cache by doing the following:

  • Use the AWS Managed CachingOptimized cache policy for your cache behaviors that serve static content from Amazon S3.
  • Increase the minimum cache time of static content on CloudFront. Or, increase the minimum cache time on the default behavior of your CloudFront distribution. One way to increase the minimum cache time of your distribution's default behavior is to increase the minimum TTL value. When you increase the minimum TTL value, CloudFront caches objects for longer instead of requesting the objects from your Amazon S3 origin.
  • Review your forwarding or cache settings for headers or query strings. CloudFront caching is optimized when the values for Cache Based on Selected Request Headers and Query String Forwarding and Caching are set to None (Improves Caching). If it's necessary to forward or cache based on these values, then be sure to specify which headers and query strings are affected.
    Note: Don't configure CloudFront to forward cookies to an Amazon S3 origin. Amazon S3 doesn't process cookies.
  • Turn on compression on your CloudFront distribution. When you turn on compression, CloudFront automatically compresses objects at the edge or POP location, and then serves the compressed objects. This reduces download time and improve page-load performance.
  • Use separate cache behaviors for static content. It's a best practice to use different cache behaviors for static content and dynamic content.

Follow these steps to configure optimal cache settings for your static content:

  1. Open the CloudFront console.
  2. From the list of distributions, choose the distribution that serves your website's static content.
  3. Choose the Behaviors tab.
  4. Create a new behavior for static content, or edit an existing behavior for the path pattern of your static content. To edit an existing behavior, select the behavior, and then choose Edit.
  5. Under Cache key and origin requests, select Cache policy and origin request policy.
  6. For Cache policy, choose CachingOptimized.
  7. For Origin request policy, choose None or leave blank. Origin request policies are optional and are not a best practice for S3 origins.
  8. Choose Save changes.

Related information

Dynamic whole site delivery with Amazon CloudFront

Optimizing caching and availability

Managing how long content stays in an edge cache (expiration)

Serving compressed files

How do I gather the Amazon S3 request ID values requested by AWS Support?

AWS OFFICIAL
AWS OFFICIALUpdated a year ago