It's important to save your users' time and data for a better user experience. Here are steps to make your AWS S3 / CloudFront websites load significantly faster even if you finished deploying and you don't want to make changes to your project.
1. Compress Objects
Compressing script files before sending them to users makes a significant difference to loading time.Go to your CloudFront and choose a distribution.
As shown in the image below, click on "Behaviors", check the default behavior and click on "Edit". Then you should see the option of "Compress objects automatically", check it.
Next you have to configure your S3 CORS to accept compressed objects.
Go to S3, choose a bucket. Click on "Permissions", then go to "CORS configuration".
Copy and paste the configuration below into the editor and click on "Save".
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Now your script files should be compressed.
2: Cache Control
Do you have many images slowing down your website? Make sure that images load instantly when users re-visit your website.In your S3 bucket, go to the folder that contains images. Select all images, under "Actions", click on "Change metadata". Select "Cache Control" and put a value (i.e. max-age=604800 to save cache for 7 days).
3: Invalidation
It's important to delete all the old settings and objects after making the above changes to have your users enjoy your faster website right away.In your CloudFront distribution, click on "Invalidations" then "Create Invalidation". Here you're going to select all the paths (i.e /* and /images/*) you want to force update. Then click on "Invalidate".
After about a minute... BAM!
Your website will load much faster without any disruption to your users' experience!