CDN Caching Improvements for Better App Performance with AWS Amplify Hosting

AWS Amplify Hosting is excited to announce significant improvements to caching efficiency, offering customers optimized caching rules and an increased cache hit ratio by excluding cookies from the cache key. We are also providing access to additional headers which unlocks use cases like the Next.js localization (i18n) support. These changes allow end users to receive content faster and more efficiently for more performant user experiences.

Improvement Highlights

• Optimized caching policies
• Ability to remove cookies from the cache key
• Forwarding of additional CloudFront headers
• Next.js internationalization (i18n) supported
• Brotli compression enabled

Performance Improvements

Additional Cache Policies

Amplify Hosting leverages the Amazon CloudFront Global Edge Network to distribute content with low latency by serving requests using a network of edge locations around the world. Amazon CloudFront ensures that end-user requests are served by the closest edge location. As a result, web requests travel a shorter distance, improving performance. For files not cached at the edge locations, Amazon CloudFront maintains logic so that those files can be fetched from the origin servers as quickly as possible. Cache policies determine the cache key, which governs when cached content is served, while origin request policies specify which cookies, query strings, and headers are forwarded to the origin server upon a cache miss.

Optimizing cache strategies for specific types of content, along with increasing time to live (TTLs), leads to higher cache hit ratios, providing end users with faster response times. Now, Amplify Hosting implements the following caching strategies for static content, server-side rendered content, and image optimization content. To see how these changes compare to the previous version, please refer to our documentation for a detailed chart comparison.

The cache is invalidated after every deployment and when custom headers or basic authentication settings are updated. Refer to our caching documentation to learn more about these caching strategies.

Remove Cookies from the Cache Key

You can now remove cookies from the cache key, a unique identifier used by a Content Delivery Network (CDN) to store and retrieve cached content efficiently, ensuring users receive the correct version of an application quickly. This is crucial because cookies in web requests from services like Google Analytics can interfere with caching strategies as each cookie contains a unique hash. For example, if a URL request is constructed as follows:

www.amplify.com
Cookie: ga-session-id=abcdef

By removing cookies from the cache key, unique hashes per user are eliminated, which significantly increases cache hits This optimization results in a higher cache-hit ratio, allowing more content to be served directly from edge locations. The outcome is enhanced performance, faster content delivery, and reduced latency for users.

Existing and new apps can benefit from this improvement starting today. For existing apps, from the Overview pane select Hosting, then select Custom headers and cache → Cache key settings to enable or disable keeping cookies in the cache key. For new apps, you can configure this setting in Advanced settings. This configuration is also available through our API.

Benchmarking

We benchmarked these performance improvements using a Next.js 14 hello world app that contains both static and SSR routes. Since SSR routes typically forward a no-cache header, which prevents them from being cached, we focused on benchmarking the improvements related to static assets. To simulate real customer behavior, we introduced unique cookies from Google Analytics for every request. With these CDN improvements enabled, we observed a remarkable ~98% improvement in both the p95 and average response times, along with a 99.99% cache hit rate. While every application varies in complexity and framework, this basic hello world app provides a strong indication of the significant performance gains that can be achieved with these CDN cache optimizations enabled, particularly for static assets.

For a real-world example, we analyzed performance on the Amplify framework documentation site, https://docs.amplify.aws/, which uses Next.js SSG and is open-sourced on GitHub. As a static site, it has shown dramatic improvements, with significantly lower latency and a cache hit ratio consistently above 90%.

Additional Features

CloudFront Headers

Amplify Hosting will now forward additional headers provided by CloudFront. A detailed list of headers can be found in CloudFront’s documentation. Making these headers available enables additional use cases, such as:

• user-agent header allows customers to understand info about their end user’s device potentially for content optimizations or personalization
• referer header indicates the origin of a request, allowing websites to track traffic sources
• cloudfront-viewer-* headers to capture the end users geographical information (for example: cloudfront-viewer-city)

Accessing some of these headers may require server-side access. For example the User-Agent header, in a Next.js Amplify app can be obtained by using the headers() function from Next.js. This allows developers to retrieve header information server-side and implement custom logic based on the client’s device or browser. The below code snippet demonstrates how to grab this header.

import { headers } from 'next/headers'
export default function Page() {
const headersList = headers()
const userAgent = headersList.get('user-agent')
return <div>User Agent: {userAgent}</div>
}

Next.js Internationalization (i18n)

Next.js internationalization (i18n) is now supported natively. By forwarding the accept-language header to the origin server, Next.js applications can detect the user’s preferred language directly from the browser request. This enhancement significantly improves the user experience for multilingual sites.

Brotli Compression

With this release, Brotli compression is now enabled on for Amplify Hosting apps, bringing significant benefits to application performance. Brotli compression is a highly efficient algorithm that reduces file sizes, offering superior compression for data transfer, which leads to faster web page load times and lower data usage. This enhancement improves user experience, particularly for mobile users or those on slower connections, and helps reduce bandwidth costs. Faster load times also contribute to better SEO rankings, as search engines favor quicker websites. Additionally, modern browsers support Brotli, ensuring compatibility and maximizing performance improvements. This is enabled for all apps automatically.

Conclusion

New apps will see these changes applied immediately. Existing apps must trigger a new build to apply these caching improvements. Information about the cache changes that are being applied will be displayed in the build logs for the app.

To learn more about these improvements visit our documentation.

About the Authors