Optimizing Static Site Performance on CloudFront

Posted:

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.

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.

Compress Objects Automatically

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 tour site through Google PageSpeed Insights again and your site should get a higher score.

Updated:

Leave a Comment

Your email address will not be published. Required fields are marked *

Loading...