Serving pre-compressed Brotli files

This is a follow-up to this comment:
https://answers.netlify.com/t/gzip-file-serving/3445/15

In relation to this site:
https://hugo-stork.netlify.app

As part of the build process, a 6.0 MB binary file (stork.index.json) is created in the root of site, consumed by a Wasm file for embedded site search. By giving the file a json extension[1], Netlify compresses with Brotli to produce a 2.1 MB file. This is excellent.

However, with aggressive Brotli compression ( -q 11) we can reduce the file size by another 28% to 1.5 MB.

We can improve performance and decrease cost by serving pre-compressed assets when present. For example:

public/
├── file.ext
├── file.ext.br
└── file.ext.gz

Please let me know if there’s a way to accomplish this with what we have today.


  1. Yes, we’re lying about the file type to trigger compression. ↩︎

Hey @jmooring,

Glad to have you here. Thanks for all the help on Hugo forums!

About the following:

There’s no direct way at the moment. There’s a feature in works that might enable this kind of a functionality in future, but it’s still weeks or months away from general availability.

What you’re trying to do, might be somewhat doable with Netlify Functions. However, depending on your use case this might or might not be the best way.

Inside the function, you can try something like:

import Axios from 'axios'
export async function handler(event) {
  const url = `https://${event.headers.host}/${decodeURIComponent(event.queryStringParameters.target)}/?checked=true`
  if (event.headers['accept-encoding'].toLowerCase().includes('br')) {
    Axios({
      method: 'head',
      url
    }).then(({status}) => {
      if (status === 200) {
        return {
          headers: {
            location: url
          },
          statusCode: 301
        }
      }
    }).catch(error => {
      return {
        body: error,
        statusCode: 500
      }
    })
  } else if (event.headers['accept-encoding'].toLowerCase().includes('gzip')) {
    // same as above
  } else {
    // redirect to the normal file
  }
}

You can setup the redirect for the files like:

[[redirects]]
  force = true
  from = "/compressed/*"
  status = 301
  to = "/.netlify/functions/compress/?target=:splat"
  [redirects.conditions]
    check = ":check"

You need to place all your “compressed” files in the compressed folder and make requests to those URLs. Furthermore, it’s important to use the query parameter check when requesting these files to make sure these requests get redirected. Similarly, it’s important to “clear” the query parameters from the redirect made using the function by sending a different parameter or it will end in a redirect loop.

Does this work for you?

Thank you for your response. Although the reduction in file size is desirable, I am not comfortable recommending this approach due to its perceived complexity; too many moving parts, and too many ways to get it wrong. While I don’t particularly enjoy pandering to the lowest common denominator, sometimes it’s the better choice.

Thanks again.
Joe

1 Like