Serving Gzipped CSS and JavaScript from Amazon CloudFront via S3

While developing web applications, every byte matters. Compressing CSS and JavaScript files can significantly improve your application’s performance. This tutorial will guide you on how to serve gzipped CSS and JavaScript from Amazon CloudFront via S3.

Serving Gzipped CSS and JavaScript from Amazon CloudFront via S3

While developing web applications, every byte matters. Compressing CSS and JavaScript files can significantly improve your application’s performance. This tutorial will guide you on how to serve gzipped CSS and JavaScript from Amazon CloudFront via S3.

What is Gzip Compression?

Gzip is a file format and a software application used for file compression and decompression. When applied to CSS and JavaScript files, Gzip significantly reduces the file size, resulting in faster network transfers.

Why Use Amazon S3 and CloudFront?

Amazon S3 (Simple Storage Service) is a scalable object storage service. It’s perfect for storing and retrieving any amount of data from anywhere on the web. On the other hand, Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to your users globally with low latency and high transfer speeds. Combining these two services allows you to efficiently serve compressed static files.

How to Serve Gzipped CSS and JavaScript from CloudFront via S3

Step 1: Gzip Your Files

First, you need to compress your CSS and JavaScript files. You can do this using the gzip command in the terminal:

gzip -k -9 yourfile.css
gzip -k -9 yourfile.js

The -k option will keep your original files, and -9 optimizes the compression level.

Step 2: Upload to Amazon S3

Next, upload the gzipped files to your S3 bucket. Make sure to set the Content-Encoding metadata to gzip and ContentType to text/css or application/javascript accordingly.

aws s3 cp yourfile.css.gz s3://your-bucket --content-encoding gzip --content-type text/css
aws s3 cp yourfile.js.gz s3://your-bucket --content-encoding gzip --content-type application/javascript

Step 3: Set Up CloudFront

Create a new CloudFront distribution with your S3 bucket as the origin. Make sure to forward the Accept-Encoding header. By forwarding this header, CloudFront only serves compressed content to clients that can handle it.

Step 4: Test Your Setup

Now, everything is set up to serve your gzipped CSS and JavaScript files. You can verify by using online tools like Google’s PageSpeed Insights or curl command:

curl -I -H "Accept-Encoding: gzip" https://your-cloudfront-url/yourfile.css

You should see the Content-Encoding: gzip header in the response.

Conclusion

Serving gzipped CSS and JavaScript from Amazon CloudFront via S3 is a great way to optimize your web applications. It reduces file sizes, speeds up data transfer, and improves user experience. Remember always to test your setup and check the Content-Encoding response header to ensure everything works correctly.

Remember, every byte matters in web development. So, start compressing and see the difference!

References

  1. Amazon S3 Documentation: https://aws.amazon.com/s3/
  2. Amazon CloudFront Documentation: https://aws.amazon.com/cloudfront/
  3. Gzip Compression: https://en.wikipedia.org/wiki/Gzip
  4. Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

About Saturn Cloud

Saturn Cloud is your all-in-one solution for data science & ML development, deployment, and data pipelines in the cloud. Spin up a notebook with 4TB of RAM, add a GPU, connect to a distributed cluster of workers, and more. Join today and get 150 hours of free compute per month.