Managing performance for an Amplify application
Amplify's default hosting architecture optimizes the balance between hosting performance and deployment availability. For most customers, we recommend that you use the default architecture.
If you require finer control over an app's performance, you can manually set the HTTP
Cache-Control
header to optimize for hosting performance by keeping content
cached at the content delivery network (CDN) edge for a longer interval.
Using the Cache-Control header to increase app performance
HTTP Cache-Control
header's max-age
and s-maxage
directives affect the content caching duration for your app. The max-age
directive tells the browser how long (in seconds) that you want content to remain in the
cache before it is refreshed from the origin server. The s-maxage
directive
overrides max-age
and lets you specify how long (in seconds) that you want
content to remain at the CDN edge before it is refreshed from the origin server.
Apps hosted with Amplify honor the Cache-Control
headers that are sent by the
origin, unless you override them with custom headers that you define. Amplify only applies
Cache-Control
custom headers for successful responses with a 200 OK
status
code. This prevents error responses from being cached and served to other users that make the same request.
You can manually adjust the s-maxage
directive to have more control over
the performance and deployment availability of your app. For example, to change the length
of time that your content stays cached at the edge, you can manually set the time to live
(TTL) by updating s-maxage
to a value other than the default 31536000 seconds
(one year).
You can define custom headers for an app in the Custom headers section of the Amplify console. For an example of the YAML format, see Setting Cache-Control custom headers.
Use the following procedure to set the s-maxage
directive to keep
content cached at the CDN edge for 24 hours.
To set a custom Cache-Control header
-
Sign in to the AWS Management Console and open the Amplify console
. -
Choose the app to set custom headers for.
-
In the navigation pane, choose Hosting, Custom headers.
-
On the Custom headers page, choose Edit.
-
In the Edit custom headers window, enter the information for your custom header as follows:
-
For
pattern
, enter**/*
for all paths. -
For
key
, enterCache-Control
. -
For
value
, enters-maxage=86400
.
-
-
Choose Save.
-
Redeploy the app to apply the new custom header.