'How to serve precompressed gzip/brotli files with .htaccess

Im trying to serve precompressed gzip/brotli files for html, js and css. With the following code.

RewriteEngine on

    # Brotli
    # If the web browser accept brotli encoding… 
    RewriteCond %{HTTP:Accept-encoding} br
    # …and the web browser is fetching a probably pre-compressed file…
    RewriteCond %{REQUEST_URI} .*\.(css|html|js)
    # …and a matching pre-compressed file exists… 
    RewriteCond %{REQUEST_FILENAME}.br -s
    # …then rewrite the request to deliver the brotli file
    RewriteRule ^(.+) $1.br
    # For each file format set the correct mime type (otherwise brotli mime type is returned) and prevent Apache for recompressing the files
    RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli,E=no-gzip]
    RewriteRule "\.html\.br$" "-" [T=text/html,E=no-brotli,E=no-gzip]
    RewriteRule "\.js\.br$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]

    # Gzip
    # If the web browser accept gzip encoding… 
    RewriteCond %{HTTP:Accept-Encoding} gzip
    # …and the web browser is fetching a probably pre-compressed file…
    RewriteCond %{REQUEST_URI} .*\.(css|html|js)
    # …and a matching pre-compressed file exists… 
    RewriteCond %{REQUEST_FILENAME}.gz -s
    # …then rewrite the request to deliver the gzip file
    RewriteRule ^(.+) $1.gz
    # For each file format set the correct mime type (otherwise gzip mime type is returned) and prevent Apache for recompressing the files
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-brotli,E=no-gzip]
    RewriteRule "\.html\.gz$" "-" [T=text/html,E=no-brotli,E=no-gzip]
    RewriteRule "\.js\.gz$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]

    <FilesMatch "\.(css|html|js)\.br$">
        # Prevent mime module to set brazilian language header (because the file ends with .br)
        RemoveLanguage .br
        # Set the correct encoding type
        Header set Content-Encoding br
        # Force proxies to cache brotli & non-brotli files separately
        Header append Vary Accept-Encoding
    </FilesMatch>
    <FilesMatch "\.(css|html|js)\.gz$">
        # Serve correct encoding type
        Header set Content-Encoding gzip
        # Force proxies to cache gzip & non-gzip files separately
        Header append Vary Accept-Encoding
    </FilesMatch>

My Folderstructure looks like this:

  • .htaccess
  • index.php
  • /css/
  • /css/main.css
  • /css/main.css.gz
  • /css/main.css.br

But I get 404s when using the code above.



Solution 1:[1]

Setting the RewriteBase fixed it.

RewriteBase /

Solution 2:[2]

Writing this to help others. I had to add %{DOCUMENT_ROOT} in the RewriteCond to get it to work.

Essentially, change all RewriteCond to

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}\.br -s

Solution 3:[3]

For me the problem was, that brotli compression is not supported for http connections. See Why is Brotli not supported on HTTP?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 improv3d
Solution 2 Nikaido
Solution 3 Johannes Deml