Optimizing Static Site Performance on CloudFront
I recently migrated a static site to AWS CloudFront and immediately received a big speed boost - the TTFB was 20x faster compared to a Windows Server on EC2 . It’s neat to see that if you view a page from your CloudFront hosted site, clear your browser cache and reload the same page it’ll download faster thanks to the page being cached on its nearest Edge server (in my case Tokyo) rather than the origin (in my case US).
There were a few performance related issues I noticed though which I’ll cover in this blog post.
Static Assets do not have a ‘cache-control’ header #
Files stored on CloudFront use the same HTTP headers as the files on Amazon S3. So if you want to set a long cache-life for assets (365 days is recommended), you’ll need to add that.
Text-based assets are not gZipped #
By default gZip compression isn’t enabled for text-based assets (e.g. HTML, CSS, JS, XML, SVG) from an S3 origin. You first need to check the ‘Compress Objects Automatically’ radio button in CloudFront.
Next, in S3 settings open the properties for the bucket and edit the CORS configuration and add
Content-Length as an allowed header.
<?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>
Finally you’ll need to update your CloudFront distribution to be sure that the newly updated files are available.
Once you’ve done that, run your site through Google PageSpeed Insights again and your site should get a higher score.