Implementing Caching strategies for a website helps to increase performance by reducing load times of a web page and the load on the server.
Although caching can offer substantial advantages in terms of performance and resource optimization, there are instances where disabling caching is necessary.
Like for certain use-cases where users consistently need to receive the most current and precise content available. By disabling caching, users are guaranteed to see real-time updates without encountering outdated or cached content. This ensures a seamless and up-to-date user experience, free from any potential confusion or inaccuracies.
Below are the steps to disable caching for a webpage hosted on AWS Cloudfront and AWS S3 bucket.
How to Disable caching on AWS CloudFront
I. Navigate to AWS CloudFront in Console.
-> Select the specific CloudFront which you want to disable to stop caching.
II. Click on CloudFront ID.
III. Click on Create Behavior.
IV. In a Path Pattern provide a file name starting with “/”.
Note: If the file is index.html, the path pattern will be “/”.
V. Choose Origin and origin group from the dropdown.
The DNS domain name of the HTTP server or Amazon S3 bucket from which you want CloudFront to obtain objects for this origin.
VI. Allowed HTTP methods based on the requirement.
Viewer protocol policy: Both protocols are available to viewers, but HTTP requests are automatically routed to HTTPS requests.
Allowed HTTP Methods: Specify the HTTP methods CloudFront can be used to get, add, update, delete, and get object headers.
VII. Choose Caching Disable from the Cache key and Origin Requests
VIII. Click on Create behavior.
Why do we need to disable caching on the S3 bucket?
A caching header specifying a content’s time-to-live (TTL) value is applied by default to S3, allowing browsers to cache the content for a predetermined time.
However, if the origin server has updated the content but the browser continues to use the cached version, this caching behavior can result in outdated content being served to end users.
How to Disable caching on S3 Bucket
I. Navigate to the S3 bucket in the Console
II. Search the bucket from the search bar & click on the bucket
Enter the bucket name where you have hosted your static website.
III. Select the file from the list.
Note: In my case, I am selecting all the files.
IV. Click on Actions & Choose Edit Meta Data from the dropdown.
V. Click on Add-Metadata
VI. Choose a System defined by the type.
Choose Cache-Control from the Key and value “no-cache”.
VII. Click on Save Changes.
Disable caching on the Browser
I. Open Browser.
II. Open Developer Tool.
III. Navigate to Network Tab & click on Disable cache
Conclusion
Disabling caching completely on a webpage could lead to missed opportunities for performance optimization and resource savings.
So it is crucial to carefully evaluate your website’s requirements and user expectations before deciding whether to disable caching entirely or implement specific strategies to cater to the unique needs of your content and audience.
For more references please check this article on How to Disable AWS CloudFront
