Afterburner S3 Advanced Caching (Lite)

[The Old Man]

Afterburner - S3 Advanced Caching (Lite) is a plug-in which helps improve cache performance on compressed, cacheable IPS Community managed CSS and JS files (Theme Resources) stored remotely on Amazon S3.

 

 

Afterburner - S3 Advanced Caching (Lite) provides:

 

• Increased Caching Performance - Helps reduce page loading times.
• Increased Caching Efficiency - Helps reduce server load, bandwidth costs.
• Potential to boost SEO performance, since Google favours faster loading websites.
• Low cost provides a high Cost to Benefit Ratio. 
• One off price, includes free compatibility updates for current major version of IPS. 
• Easy to install. Starts working immediately in conjunction with IPS background tasks.
• Lite version requires no additional configuration in AdminCP. After installer/updater completes, just run the Support Tool to rebuild your theme cache at S3.
• Works on all installed themes JS/CSS resources, both official and third party themes, with no limit on number of themes.
• Just leave Enabled. Can be removed at any time, but of course you would instantly lose the extra headers & related benefits if disabled or uninstalled.
• Adds additional Request Headers automatically to each relevant, publicly cacheable, compressible IPS theme JS/CSS file.
• Works silently in the background, whenever IPS Community Suite exports theme resources  to AWS S3. Even if you install a new theme.
• Improves the individual Vary: Accept Encoding PageSpeed test score at GTMetrix, and overall GTMetrix scores.
• Improves the Add Expires related YSlow test score at GTMetrix.
• Helps maintain an A(100) GTMetrix Pagespeed score on your Amazon S3-hosted IPS Theme JS and CSS theme files in the background. (If you also have other third party compressed files hosted elsewhere, such as Google APIs etc, they are beyond our control but Afterburner will still boost the test rating for your relevant IPS Theme Resource files that you host at S3).
• Requires working AWS S3 or S3 compatible storage bucket.
• Works either with or without an optional CDN such as Cloudfront, Cloudflare etc.

 

 

What's it for?

This plugin was created for IPS Community admins who in particular seek the benefits and efficiency of increased caching performance. After a lot of research, trial and error trying to resolve the problem of Amazon S3 hosted, compressible IPS4 theme resource not passing the GTMetrix.com Vary: Accept Headers and YSlow Add Expires tests, which effectively means lower GTMetrix scoring. 

After finally confirming the additional caching headers needed for compressed, cacheable files to pass the Vary: Accept Encoding PageSpeed and YSlow Expires tests, it quickly became clear that if you want to maintain persistent higher score ratings and the associated performance and efficiency benefits there was a slight caveat.

Due to the frequency that those resource files get regenerated, re-cached and re-uploaded in the background to your S3 bucket, it can quickly become a time-consuming, frustrating and repetitive task as it requires the admin to keep manually replacing the additional headers via the Amazon S3 Management Console (sometimes multiple times a day depending upon the circumstances).

When AWS S3 hosted Gzipped/Brotli-encoded JS and CSS theme files change, either manually by the admin such as installing or updating a theme, plug-in or app, running the Support Tool or following various automated system tasks, the additional manually added headers are lost.

Therefore, a plug-in to automate the process of adding the additional headers would seem an ideal, easy to use alternative solution compared to say, writing and maintaining an Amazon Lambda script to inject the necessary headers.

 

So how does it work?

IPS 4.4 has a lot of great performance improvements already, but if you opt to use Amazon S3 to store your IPS Community theme files, Afterburner S3 Advanced Caching (Lite) will automatically add additional caching headers to each of the relevant publicly cacheable, compressible theme JS and CSS files, whenever IPS Community Suite exports them to S3.

Afterburner Lite automatically adds Expires headers to each .gz file which are set in this Lite version to automatically expire after 8 days, sufficiently long enough to pass the relevant GTMetrix Vary: Accept Encoding test. See the attached screenshots on the download page for more.

Afterburner automatically works via Curl or Socket IPS file transfers by hooking into both, depending upon how your server is configured.

Afterburner therefore helps improve caching performance on those S3 hosted theme files, which in turn helps reduce page loading times throughout IPS Community Suite, whichever apps or third party add-ons or themes you have installed it doesn't matter.

Thanks to BFarber for suggesting alternative HTTP hook-points.

 

How do I use it? Does it have any adjustable settings?

This is the 'Lite' version which requires no further configuration after installing. I recommend running the Support Tool afterwards, see TIPS section below. The necessary caching headers it creates are pre-set to expire after 8 days, the minimum recommended. Afterburner (Lite) doesn't alter anything else but S3-hosted theme JS and CSS files in transit to your S3 bucket.

This is my first plugin for IPS. If there is enough interest, I'm hoping to create a more fully featured app version with additional features, stats and admin configurable Settings etc, so you can tweak the caching performance to suit your individual needs.

 

Requirements

• Compatible with latest IPS Community Suite 4.4 series. Developed on 4.3 and tested on 4.4.
• Requires a pre-configured and properly working Amazon AWS S3 storage bucket (Versioning mode recommended), correctly set up in IPS Community AdminCP to host your Theme Resources (Files > Storage Settings under Theme Resources).  See the IPS Help Guide for more.

 

How do I install Afterburner?

This is an IPS plugin, so after downloading it, install the Afterburner XML file via the AdminCP > System > Plugins > Install New Plugin facility. 

IPS Community will install the plugin and enable it, and Afterburner will then inject the relevant additional caching headers to your js.gz and css.gz files as they next upload to your pre-configured S3 bucket used for Theme Resources.

 

TIPS

I do recommend running the AdminCP Support Tool after installing/updating the plugin to re-cache and upload ALL relevant files rather than waiting for the next scheduled task or manual action that will update them.

If you are also using a CDN such as Cloudfront, Cloudflare etc, I also found it useful in testing to clear/invalidate Cloudfront/Cloudflare afterwards, instead of waiting for them to next update themselves when they check for updated files and send to their respective Edge locations.

 

How to update to a newer version of Afterburner?

To upload a newer version, just use the usual Upload New Version button next to Afterburner in your list of plugins.

 

Does it work on cloud hosted IPS Communities (CiC)?

I don't see why not, as long as you have S3 hosted theme resource files. I only have self hosted IPS sites myself.

 

How do I know it's working?

There are a few ways to test.

You can benchtest your site at GTMetrix before and afterwards. Look out for the Vary: Accept Encoding Pagespeed test score.

Before example:-

GTMetrix is advising us that these theme JS and CSS files hosted at S3 do not specify a Vary: Accept-Encoding Header.

After example:

You should see a A(100%) score for the test after installing Afterburner (unless your site also uses other external cacheable compressed files etc which you don't have control over such as at Google APIs etc which would reduce it).

 

If you then look at the Waterfall tab, you should see similar to this:

 

 

Alternatively, you can use the Amazon S3 Management console to view the Metadata headers on the actual stored gz files as seen in the screenshot below:

 

Another way to see if the additional Expires headers have been added to S3 hosted cacheable JS/CSS files is to use the developer console in your Chrome or Firefox browser (hit F12 and reload the page):

 

 

 

 

Edited April 5, 2019 by The Old Man
Additional details and screen-captures

[EmpireKicking]

If sites don't even have Amazon S3 with the theme files on! doesn't it still work?  

[The Old Man]

Quote

If sites don't even have Amazon S3 with the theme files on! doesn't it still work?  

Sorry, I'm not sure I quite understand you but to clarify, this is about storing a theme's public, cachable css and js files on Amazon S3. 

If you don't store them on Amazon S3, or you instead only use S3 for other files or resources such as images, then no, you don't need this. In that case, your server if properly configured should be adding the necessary headers to your js.gz and css.gz files.

If you do store your js.gz and css.gz Theme files on Amazon S3, when a visitor loads the IPS website's page their browser will state via sending a Vary: Accept Encoding request header whether it can accept encoded/crompressed files and which format it will accept and in which order it prefers (gzipped, brotli, deflate etc). In which case, Amazon S3 knows in return it can send the browser the faster loading, less bandwidth demanding compressed versions of the JavaScript and CSS files, which tend to have a .gz named file extension on the end of the filename, knowing that the visitor's browser will be able to decode/decompress those files successfully.

If the browser says it can't accept encoded/compressed files, then Amazon S3 will send the regular, non-compressed version of the file. And this is the issue, IPS doesn't add the necessary headers to achieve this with S3 hosted files. Hence the plugin to save adding them manually.

As all modern browsers will today accept gzipped encoded files (where supported BR, aka the Google developed Brotli, is supposed to even more efficient), it means being able to receive them via Amazon S3 helps achieve better performance, higher GTMetrix Pagespeed scores if you are into that, and potential bandwidth savings.

I hope I've answered your question and explained the reasoning behind it. 🙂

 

Edited March 29, 2019 by The Old Man

[Subdreamer]

Default IPS CDN support would be excellent but this seems like an alternative. I use MaxCDN as my CDN for all my sites. However, I guess I'll start using Amazon S3 with this plugin for all my IPS-powered sites.

[BostonBob]

Is it possible to create a version for MaxCDN?  🙂

[The Old Man]

Hi @BostonBob

The plugin currently just adds the additional headers to the files stored in an S3 bucket, I still use Cloudfront personally but I'm thinking the brand of CDN you use in front of your bucket to distribute your content shouldn't make any difference.

The plugin currently doesn't do anything involving Cloudfront or any specific CDN, it just improves the files created as they get stored on your S3 bucket. As long as you are using S3, or as pointed out by a reviewer on the file, it also works with one of the S3 compatible type providers called Wasabi.

So if you were just using AWS S3 on its own without a CDN, that's fine, the visitor's browser would get the extra headers that the plugin added. If you add the url of your CDN into the AdminCP storage configuration, it should work just the same.

I could probably make a test version.

[The Old Man]

Boston, drop me a PM if you want a test demo version to try with S3 and MaxCDN. It's limited to 60 minute caching but should be enough to test with. 😊

Edited April 1, 2019 by The Old Man

[SJ77]

Would I need this (or benefit) if I am already using Cloudflare? ( I see if your description you say it does but hoping you can elaborate)

and follow up question, how much does S3 cost to host this stuff?

Edited April 2, 2019 by SJ77

[The Old Man]

On 4/2/2019 at 11:53 PM, SJ77 said:

Would I need this (or benefit) if I am already using Cloudflare? ( I see if your description you say it does but hoping you can elaborate)

Hi SJ,

Sure, everything is relevant and what benefits one admin may be different to another, but I'll try and answer best I can as I'm keen to avoid making any 'wild claims' and aim to be clear about what it does and doesn't do.

First, it's important to note that you "don't need it" or "won't benefit" from it if you are NOT already using Amazon S3 (or it transpires an 'S3-compatible' type storage like Wasabi). S3 is a requirement.

The Afterburner S3 Lite plugin is lightweight and currently improves the caching headers ONLY on compressible IPS theme resources (CSS and JS files) sent out to be hosted on S3, which by default lack some useful headers that can genuinely give your site's performance, page loading speed/time etc a welcome boost. 

So if you are not already using S3 storage for your IPS Community, there is currently no point in buying this, at least in its current Lite version. 

If you use DO use AWS S3 for external storage for anything in the AdminCP Storage Configuration options screen EXCEPT your IPS's theme resources, then again there is no point as Afterburner applies some checks first to make sure it is only adding the additional request headers to S3 hosted JS/CSS theme files. It also conditionally checks so that it doesn't apply them if you are locally hosting your theme resources on your own server (the traditional, default storage method), as your local webhost should ideally be doing that for you, if properly configured. That may become part of a feature in a larger app version of Afterburner, as I think it could help a lot more users.

 

Some example S3 related scenarios

1) You already host your IPS Gallery images or Attachments in an S3 bucket, but you DON'T host your theme resources in an AWS S3 bucket. Therefore you don't need Afterburner S3 (Lite) as it only targets theme compressible JS/CSS resources, nothing else. If you later do start hosting your theme resources on S3, then Afterburner Lite will be useful.

2) You don't use AWS S3 storage at all, your theme resource files are contained on your localhost or elsewhere using one of the other storage configurations available in the AdminCP. Therefore again you don't need it.

3) You are intending to host your theme resource files on AWS S3 but haven't yet bought or configured S3 yet. In that case, I'd definitely recommend holding off until you've bought AWS S3 and got it working properly. Once you are using S3, if you are interested in say improving your GTMetrix Vary: Accept Headers score rating or the more real world perceived benefits of improved caching (like improved visitor experience or bandwidth savings), then I would highly recommend using Afterburner S3 (Lite). Remember, the plugin won't do anything unless you have set up S3 first in your IPS4 AdminCP.

 

AWS Cloudfront CDN

Afterburner S3 works correctly with S3 and Cloudfront, Amazon Web Service's CDN. I currently use that combination on multiple IPS sites, and also on one site fronted by Wordpress combined with IPS Gallery only.

 

Using AWS S3 with a different CDN like Beluga, MaxCDN etc

If you've configured your CDN so that it's respecting your S3 bucket headers, or it doesn't remove them, it should be fine working with Afterburner, the plugin will add the extra Expires headers necessary to resolve the Vary: Accept Encoding header requirements. It may be possible to configure your CDN to do the work of Afterburner to some extent, but I suspect without correct or extra configuration it would likely apply the same retention period to every type of file which isn't ideal, not just your compressible theme resources. If you want to test with a CDN other than Cloudfront, by all means drop me a PM.

 

Cloudflare 

I also use Cloudfront but it is important to note that Cloudflare is much more than solely a CDN product like Amazon Cloudfront is. It's also not quite a true CDN in the sense as I understand it has some limitations by comparison in relation to caching pages. I configure Cloudflare to 'respect existing headers' mode and it works fine.

You could in theory use Cloudflare to add the missing headers Afterburner provides, but unless you have lots of pagerules configured, you'd be applying the same expiry dates/cache retention period to everything, all types of static files including audio, images etc, not just your theme's compressed/encoded JSS and CSS files. The aim is to cache CSS and JS for shorter periods than truly long term static files such as images that are unlikely to change that often.

Because I've been doing a lot of testing recently, I configured a rule in Cloudflare to bypass caching on my cdn.mywebsitesurl.com (the dns CName that points to the real URL of my Cloudfront CDN). That way I could still 'Orange Cloud' the Cloudfront CDN url to get all the other Cloudflare benefits like DDoS, minification, bad bot protection and importantly the fast DNS Cloudflare offers. Anyone can use Cloudflare without using its CDN feature. I've also used Cloudflare for extra caching on top of Cloudfront and S3, and have started to re-enable it. When a cached resource expires in Cloudflare, it goes back to get it from Cloudfront or the S3 bucket if it has changed, then caches it again until it expires again and so on. 

 

Example Scenarios in relation to using Cloudflare

4) You have S3 Hosting your IPS theme resource files. You don't have Cloudfront, you don't have Cloudflare. You can benefit from Afterburner, but you'd be strongly advised to use a CDN for increased performance worldwide and to reduce S3 storage costs.

5) You have S3 Hosting your IPS theme resource files. You also have Cloudfront CDN, you don't have Cloudflare. You can benefit from Afterburner. If you add Cloudflare, you get the extra goodness even if you configure a pagerule not to exclude caching your S3/Cloudfront Theme JS CSS resources.

6) You have S3 Hosting your IPS theme resource files. You have Cloudfront, and you have Cloudflare. You can benefit from Afterburner, and both Cloudfront CDN and Cloudflare protection, cacheing of images etc, DNS, firewall etc.

Using Cloudflare with Cloudfront or another CDN has a lot of advantages and can reduce your S3 and Cloudfront costs but is worth it for the dns speed and extra protection alone, IMHO.

Hope this helps! 

 

On 4/2/2019 at 11:53 PM, SJ77 said:

and follow up question, how much does S3 cost to host this stuff?

That's a bit beyond the scope of this topic and it all depends on how much you are storing and for how long, how often you are accessing it etc, but they do an offer with lots of free resources/capacity for the first year and you can see what it costs in the cost explorer feature, set budget alarm notifications etc. In my experience it costs about £3-£8 a month now I'm out of the free year on my busiest, larger site. I can tell you that the free PUT upload requests to your bucket can get used up in days especially if you are fine tuning or getting started but it's really inexpensive until the next months free allowance starts again. I've just had invoices for $0.02 for one site and $0.19 for another, which are both in the first year usage period.

Edited April 4, 2019 by The Old Man
Additional example scenarios

[The Old Man]

Hi,

Just confirming that the Afterburner plug-in has been tested and works okay after updating to v4.4.3.

Many thanks.

 

[The Old Man]

Just confirming that Afterburner has been tested and works fine with v4.4.4.

Updating to IPS 4.4.4?

No need to remove, disable or update the Afterburner S3 plug-in when upgrading to IPS4.4.4, it will continue to work in the background as your updated, compressible 4.4.4 JS and CSS theme files export to your S3/Wasabi bucket.

Or if you prefer, you can also transfer your theme files only back to the default storage method, upgrade to 4.4.4 and then transfer your upgraded theme files back to your S3 storage.

[FabioPaz]

Any before/after test with Google Page Insights ?

[The Old Man]

Hi @FabioPaz

Sorry I don't have a comparison test with them, to be honest I'm not a huge fan of the current Pagespeed Insights. I don't see why there wouldn't be a performance and scoring improvement similar to those visible via GTMetrix because additional caching response headers are being added via the plug-in. 

I find that these days Insights gives me so many different readings every time I run a test, not just a small variation either, but wide deviations with scores fluctuating anywhere from 80s to 90s then suddenly down to 70s without me changing anything; it's just too much all over the place to have much faith in whereas other PI's are more consistent and helpful.

It also always states "Ensure text remains visible during webfont load", but I'm already using the new Font Display as advised in my CSS and it doesn't recognise it.

It would be nice to place a tick next to Page Insights as it supposedly is reflective of the speed scoring now used in their search ranking, but I think GTMetrix have the right approach in finding some sensible middle ground with the Pagespeed tests it uses and we should similarly take a balanced view across multiple performance analysis services.

Happy to provide a demo version of the plugin for you to test with to see if it's for you, just drop me a PM anytime.

[sobrenome]

@The Old Man, what do you think about the caching of the whole html page and resources on Cloudflare edge servers?

The website would load superfast for visitors, with no database queries and no requests to the origin server.

If you like the idea, what do you think about developing a plugin for Cloudflare workers?

Thanks!

[The Old Man]

Hi @sobrenome

Looks interesting, thanks! I'll have to have a play.

Graham

[sobrenome]

23 hours ago, The Old Man said:

Looks interesting, thanks! I'll have to have a play.

Yes, I think it can be amazing for not logged users navigation experience. The website will load ultra fast for visitors and for bots like google. 5 or 15 minutes to prune the cache would be fine.

Good work! I will be glad to purchase the plugin. Thanks a lot.

[sobrenome]

Take a look at this latest post:

https://blog.cloudflare.com/fast-wordpress-sites-with-bluehost-cloudflare-workers/

[Angel Costa]

Does it work with 4.6?

[The Old Man]

Hello Angel,

It's not available in the Marketplace for 4.6 but yes, I've run it on 4.6. Just manually install the file.

I do have a new version coming that will be marked as compatible in the MP for 4.6.

 

 

[403 - Forbiddeen]

On 8/14/2021 at 4:48 AM, The Old Man said:

I do have a new version coming that will be marked as compatible in the MP for 4.6.

 

Only work with amazon or i can use with another cdn service?

[The Old Man]

On 9/8/2021 at 11:20 PM, 403 - Forbiddeen said:

Only work with amazon or i can use with another cdn service?

Hello there, 

I've been told that it works with Wasabi but I've only personally tested it with AWS S3 as that's what's I use. The plugin adds Http Expires Headers (to compressible JS and CSS files), it doesn't communicate with the S3 API at all, so an S3 compatible service like Wasabi should be fine providing it already works with IPS without the plugin.

Regards,

Graham