I have built and deployed React app (let's call it app A) on S3 and enabled "Static website hosting" for it. This app was earlier running on an EC2 instance using Node. Recently, someone from the team deployed another React app (B) on S3 and that's when I read that S3 can be a good option to easily deploy static content so I thought of moving app A to S3. However, after deploying the app, I see that it's taking too much time (10-15 secs) to even get the login page. After I login, the experience is not that bad but slowness is still evident. This wasn't the case when it was running on EC2 instance.
Just to clarify, all these React-based apps including app A and B, are meant to be used within the company's network only and all the users are from US region only. App A fetches images (and other data) from other React-based apps (apps B and C, both hosted on S3 only) and from other application (running on EC2 instance).
I read about performance issues and came across content-encoding and cache-control parameters that can be used while uploading the build to S3. I zipped the CSS and JS files using GZIP and also added metadata for content-encoding however, I couldn't notice any significant difference in page load. I left cache-control parameter (i had set it to max-age=31536000 because app A had hashed file names) because after adding this parameter, i was getting blank page (not sure why) after logging into the application. I also checked the site performance using GTMetrix (snapshot attached). In this report, you will notice that it's still showing that compression can be improved however, the recommendations are actually for app B that this app A connects to. I think this is an improvement area for me. I also checked with the developer and he told me that he has not used compression internally in the application (app A) although I compressed it when uploading it to S3.
I have read many articles where people used S3 with CloudFront or other CDNs. I am not sure what's the right approach to my issue as i am doing such deployment for the first time. I also have to take cost into consideration before proposing S3 as a deployment method for other environments (QA, UAT, PROD).
Considering that the application users will be within the company's network only, i have following queries:
1) Can CloudFront/CDN approach be avoided or is it the only way i can fix this performance issue?
2) If static hosting on S3 is fine, then can some modification be done to the overall setup so that images fetched (from the other S3 hosted React app C) do not get routed through the Internet, thus saving on cost?
I just checked the S3 bucket size for React app C where most of the images reside. As of now, the total bucket size is around 200 MB and the maximum file size i could see for an image was around 100 KB (most are in that range). Please let me know if more data is needed to provide a suggestion.