The StackPath CDN is compatible with Brotli compression even though itis not natively supported. Specifically, there is no configuration setting in the StackPath portal to enable Brotli compression on your data (like you can with GZIP), but by following the steps in this article, you can serve Brotli compressed assets with the StackPath CDN and/or WAF. This article will cover the required steps to configure Brotli compression from the StackPath Control Portal.
This article will cover the required steps to configure Brotli compression from the StackPath Control Portal.
What to look for to identify problems with Brotli compression?
If Brotli compression is configured at the origin server and you follow the standard CDN/WAF integration guides, you may notice intermittent problems with the way your webpage is loading, specifically CSS and JS files. This is what a site may look like when Brotli is enabled at the origin in conjunction with GZIP enabled at the CDN:
Recognizing the issues related to Brotli encoding can save you a lot of time troubleshooting and tinkering with the CDN settings.
How do we apply the solution to customer configurations with the CDN?
The answer is Dynamic Caching by Header. The CDN doesn't support Brotli, which means it cannot encode the data but it can still cache it.
First, a little background on how the CDN works: When a user requests an asset such as an image, CSS file, or HTML document, the request goes through the StackPath CDN network. If the StackPath CDN server already has the asset, it is served from cache instead of requesting it directly from the origin server. If the asset isn't cached on the CDN then the CDN pulls it from the origin server and stores it in its cache. Then, StackPath creates a unique cache key for each resource it stores in cache. (A cache key is an "ID" for each resource that StackPath stores in cache.)
The Dynamic caching by header feature allows you to extend the variables used to create a cache key by adding a specific request header. In this case, Dynamic Caching by Header is used to tell the CDN to cache any file that has an Accept-Encoding header indicating Brotli encoding. With this set-up, the CDN would simply cache the Brotli encoded file to serve upon future requests instead of trying to "re-compress" the file using GZIP.
To enable this feature:
- Go to the CDN section from the Left Navigation Window
- Enable Dynamic Caching by Header
- add Accept-Encoding as a header option
- Save the configuration
What if I am only using the WAF?
If only the WAF is enabled then the needed CDN configuration setting will not be available and a StackPath employee will be required to fix the issue from the backend. Please feel free to reach out to StackPath Support via hi@stackPath.com
What's the difference in the behavior of the workaround over the standard behavior?
To further clarify, if you have Brotli encoding set up at the origin server, the CDN will not cache the Brotli file. Instead, the CDN will uncompress the Brotli encoded file then recompress it but this time using GZIP encoding. When this happens you might see your site loading incorrectly or usually completely broken.