Search code examples
performancereactjsamazon-cloudfrontpagespeedcreate-react-app

React, S3, CloudFront Compression. GZip

I am trying to get my PageSpeed score as close to 100 as possible. One of the suggestions I got from https://developers.google.com/speed/pagespeed/insights is that I should enable compression.

This is where I am a bit confused. I was under the impression that I already had compression enabled. In CloudFront, I have the compress objects automatically behavior enabled.

enter image description here

Upon doing some reading here:

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html

it looks as though you need to include the header Accept-Encoding: gzip. However, when I look at my request I can see that header present.

It is serving up a React app I built using create-react-app and I can see that header present with no ejecting or extra configuration.

enter image description here

However I am still getting the following suggestion from Google's Page Speed test.

enter image description here

Is there anything more I can do? Or a way I can verify that the request is being compressed? If it is why is this suggestion still showing up?

Thanks

Solution

  • CloudFront determines whether the file is compressible:

    the file size must be between 1,000 and 10,000,000 bytes.

    https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html

    If you compress your 64 Byte file, you have no no advantages, because unzipping takes more time than transfer. Yes, Google PageSpeed Insights doesn't care, but in case of small files, they are wrong.

    If you really want to serve a gzipped file, you have to compress it in the origin (e.g AWS S3) and set the content-encoding header