Jump to content

Community

[[Template core/global/global/lkeyWarning does not exist. This theme may be out of date. Run the support tool in the AdminCP to restore the default theme.]]
The Old Man

Add Expires Headers when uploading to S3 to improve caching

Recommended Posts

Posted (edited)

I've been doing a lot of testing with S3/Cloudfront hosted files of late, trying to improve my GT Metrix Pagespeed scores.

Gzipped files in particular uploaded via IPS 4.3 to S3 are flagged by GT Metrix as lacking Specify a Vary: Accept-Encoding header - The following publicly cacheable, compressible resources should have a "Vary: Accept-Encoding" header. This results in a fairly large drop in score especially if both JS and CSS files are missing these headers.

C8E5C95E-D742-4CF5-85B2-B96F8F996B0A.thumb.png.6aa4a6b2c2186af05b06cdc40ef9f9db.png

Rather confusingly, you can't actually fix this by adding Vary: Accept-Encoding via the Cloudfront Settings as the advice suggests. I've tried every combination and method of S3/Cloudfront Settings, I can think of or find.

You CAN however fix this every time by manually adding simple Expires headers to those affected files over at S3, but you must invalidate your Cloudfront Distribution cache (and then finally at Cloudflare if using it).

384C60F7-1EDF-4C87-A14A-38DF1F2AED5B.thumb.jpeg.344f9cd6e43ab46155cf17eee3233cd3.jpeg

 

Add the missing Expires header, changing the Cache-Control header to match if necessary/you prefer:-

5EA82B89-8D26-4094-9BDC-2B2C2760D265.thumb.jpeg.0d6bb785530ac87b773cdebbb76bf039.jpeg

You can see here I've changed caching and time before Cloudfront checks for an updated file to 8 days rather than 1 year, the minimum required by GTMetrix to pass this test on a cachable static JS file.

 

Remember that you must invalidate your Cloudfront Distribution cache after editing the Expires headers either individually or via the parent folder (and also at Cloudflare if using it).

I've tested this solution on all of my sites and it works, you can get an A97 or higher Pagespeed rating depending upon what else you do and external 3rd parties aren't affecting your score.

F4F269BD-4BFF-41EC-8A53-F179E3C5D0A5.thumb.jpeg.07c8edbc1b5447fd3e814045466f8fc6.jpeg

Adlago would be proud...

 

However whilst this manual intervention works okay for longer retention files like images etc that won't change, the issue is that when and if your IPS recaches itself (or you do it via the Support Tool), IPS uploads brand new cached JS/CSS files to S3. The next time you or GTMetrix bench-tests your site, the score (and performance and hence potential SEO ranking) falls. Then you have to manually add the Expires headers back to those affected temporary cache files.

B9E4D567-3BD1-44DA-A8CF-F3B7CADFAFBE.thumb.jpeg.4ced4c8ce502fa4c5438646a2ba647a8.jpeg

We're now receiving A(100) for this recommendation!

 

3466C1B3-E8A8-4E1F-8732-27DA4127872F.thumb.jpeg.fdfe4df9cf19d2b38f55984e8bc933e2.jpeg

Now Adlago would be even prouder, A97 rating admittedly not higher, but I'll take a 50% boost in page loading speed! 

The permanent solution, aside from getting stuck in this infinite loop (or writing a Node.js script at LambdaEdge to do it automatically when triggered on every request), is if IPS would automatically add the Expires Headers to resources each time it uploads the files for us to S3, via the S3 Restful API. Secondly, have the option to add headers or amend the values would be the icing on the cake.

Edited by The Old Man

Share this post


Link to post
Share on other sites

Yes, it's a truly royal PITA. I'm so fed up of manually adding these missing headers and invalidating Cloudfront and Cloudflare caches every time the theme JS or CSS is uploaded ,and multiply that by the number of sites you have.

Have recently tried adding exposeheaders tags to the CORS setup on my S3 bucket, but it made no difference. Unless the Expires tags are manually added to the files Cloudfront or S3 won't forward them to the visitors browser. Adding them automatically when they being uploaded is still the best potential option.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...