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

Last updated: 2020-06-29

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. How can I troubleshoot this?

Short description

To troubleshoot the latency in loading your website's static content, identify which of the following events contributes to the latency. Then, implement ways to optimize these events:

  1. When the client sends a DNS query for the domain name (the DNS lookup process).
  2. When the client sends the request to the web server (CloudFront content delivery network), including the SSL/TLS negotiation.
  3. When 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 depend 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 which event 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.

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

Consider these ways of optimizing the DNS lookup process:

  • Enable 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.

When the 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 to CloudFront largely depends on the local network, bandwidth from the internet service provider, and the 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 enables 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, you can 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. You can use the Amazon S3 console to set a cache-control header.
  • If you already have a local caching HTTP forward proxy, you can specify a cache size large enough for your website content. This can reduce the number of requests sent through the internet, because frequently accessed pages are stored in the local proxy cache, which then serves the content to browsers when requested.

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

You can reduce the latency in loading your website by serving more content from the cache and reducing requests for content from the origin. Consider these ways of optimizing your CloudFront configuration so that your web content is served mostly from the cache:

  • Increase the minimum cache time of static content on CloudFront. Or, you can 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, so that 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 all set to None (Improves Caching). However, if you must forward or cache based on some of these values, then be sure that only specific headers and query strings are forwarded or cached.
    Note: Don't configure CloudFront to forward cookies to an Amazon S3 origin. Amazon S3 doesn't process cookies.
  • Enable compression on your CloudFront distribution. When you enable compression, CloudFront automatically compresses objects at the edge or POP location, and then serves the compressed objects. This can reduce 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. You can 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. For Cache Based on Selected Request Headers, select None (Improves Caching) to optimize caching. If you must forward certain headers, select Whitelist, and then add only the required headers.
  6. For Object Caching, to use the cache-control header on the Amazon S3 objects, select Use Origin Cache Headers. To override the cache-control header from the Amazon S3 origin, select Customize. Then, set Minimum TTL to the minimum cache duration that you want.
    Warning: The distribution behavior's Minimum TTL, Maximum TTL, and Default TTL values interact with cache headers set on the object from the origin.
  7. For Forward Cookies, select None (Improves Caching).
  8. For Query String Forwarding and Caching, select None (Improves Caching) to optimize caching. If you must forward certain query strings, select Forward all, cache based on whitelist, and then add only the required query strings.
  9. For Compress Objects Automatically, select Yes.
  10. Choose Yes, Edit to save your changes.