Serve gzip files via Heroku Fastly plugin


#1

Hi,

When we create our javascript bundles we create a gzipped copy but I can’t figure out how to configure Fastly to serve those gzipped js files. I found some help but that seems to be via the Fastly config. The config via Heroku is a much smaller subset of config options. Is it possible to set this up for our Fastly Heroku plugin?

Thanks,
Tom


#2

Hi Tom,

With the Heroku add-on, you can manually enable dynamic gzipping using our API.

You’ll want to reference the following API documentation for Headers and Conditions:

http://docs.fastly.com/api/config#header
http://docs.fastly.com/api/config#condition

Then you’ll want to complete the following steps:

Step 1: Create two conditions (one for each header) by making a POST to:
https://api.fastly.com/service/service_id/version/version/condition

  • Condition to check for gzippable content
    • Example params: { ‘name’: ‘Gzippable’, ‘statement’: ‘req.http.accept-encoding == “gzip" && beresp.http.content-type ~ “^(text/html|application/x-javascript|text/css|application/javascript|text/javascript)"’, ‘priority’: 10 }
  • Condition to only Vary content that will be gripped.
    • Example params: { ‘name’: ‘Vary on gzip’, ‘statement’: ‘beresp.http.content-type ~ “^(text/html|application/x-javascript|text/css|application/javascript|text/javascript)"’, ‘priority’: 10 }

Step 2: Create two headers, one to force gzipping and one to cache each encoding. Create each header by making a POST to:
https://api.fastly.com/service/service_id/version/version/header

  • Force GZIP Header
    • Example params: { ‘name’: ‘Force GZIP’, ‘type’: ‘cache’, ‘action’: ‘set’, ‘destination’: ‘gzip’, ‘source’: true, cache_condition’: ‘Gzippable’, ‘priority’: 10 }
  • Header to Vary on Accept-Encoding, to cache a different version for each encoding
    • Example params: { ‘name’: ‘Vary Encoding’, ‘type’: ‘cache’, ‘action’: ‘set’, ‘destination’: ‘http.Vary’ ‘source’: “Accept-Encoding”, ‘cache_condition’: ‘Vary on gzip’, ‘priority’: 10 }

Once that’s complete, you’ll want to activate that version of your service.

Let us know if this helps.

Cheers,
Kami


#3

Thanks Kamil, I will give that a try :smile:

I’m not that familiar with the Fastly setup and api. Can you provide some extra description about what each step does. I’m guessing some of the settings are for fetching from the source and some are for the incoming request by the end-user but would be great to have that confirmed. And is gzipping on the fly or fetching pre-gzipped files from the source?

Thanks again,
Tom


#4

Hi Tom,

With the Heroku add-on, you want to use our API for making configuration changes to your service. Here’s the link to our full API docs:
https://docs.fastly.com/api/

To get you started, here’s an example of using the API to get the current version number of your service:

curl -XGET -H 'Fastly-Key:<fastly_api_key>' https://api.fastly.com/service/<service_id>/version

If you’re unsure of your API key or service ID, use the heroku config command, which will give you both of these values.

If you are gzipping on your origin, then we will serve the compressed content. However, if you would like us to compress the content, you’ll want to use the above Headers and Conditions to manually set up dynamic gzipping.

In Step 1, you create two conditions. The first one checks for content that can be gzipped based on the content type. In this example, it matching for the following:
text/html|application/x-javascript|text/css|application/javascript|text/javascript
Feel free to adjust this as needed for your service.

The second condition makes sure that you’re Varying on the gzippable content. Again, feel free to adjust the content type as needed.

After you’ve created the two conditions, you set up the two headers that will use the conditions you just created.

The first header, Force GZIP, forces the content that is matched by the condition “Gzippable” to be gzipped.

The second header, Vary Encoding, caches a different version for each of the content types set by the condition “Vary on gzip”. This forces the cache to respect different encodings so things don’t get confused.

If you have any other questions, let us know.

Cheers,
Kami


#5

Hi Kamil,

Thanks, that’s much clearer. I get it now :smile:

It sounds like the api config is for dynamic gzipping? And if we’re creating gzipped versions ourselves, we don’t need that? Or only part of it?

Thanks,
Tom


#6

Hi Tom,

It sounds like the api config is for dynamic gzipping?

Yep, that’s correct. These are the API calls you need to set up dynamic gzipping. Since you’re using the Heroku add-on, you’ll need to use our API instead of using the Fastly UI to set this up.

And if we’re creating gzipped versions ourselves, we don’t need that? Or only part of it?

If you are doing the compression yourself, on your origin, you wouldn’t necessarily need to set up the dynamic gzipping. However, you can still set this up as a fallback, just in case.

Cheers,
Kami