Lighthouse report performance report says: “Enable text compression”

This introduced me to brotli, a compression algorithm for (static) assets, supported by most major browsers but significantly not Internet Explorer or Safari

As far as apache2 server is concerned, stream compression with brotli is not supported (yet), so I intended to compress static assets on my localhost site, prior to uploading to live, with a fallback gzip version for non-compatible browsers.

Here’s how I failed to do it…

First install brotli

(probably the easy way, I didn’t test this as I went with a rather problematic git install – see below)

sudo apt install brotli -y

install with git <<get git>>:

NOTE: I installed on WSL2 and had to log in as root to get this to work

sudo su -

git clone https://github.com/Microsoft/vcpkg.git

cd vcpkg

At this point, make sure you have the necessary zip utilities:

apt-get install curl zip unzip tar

then:

./bootstrap-vcpkg.sh

./vcpkg integrate install

Note: the second of the above commands will first install cmake if you dont’ already have it – be patient as there is no progress indicator!

TROUBLESHOOTING

After cmake was installed, I then attempted to run ./vcpkg integrate install again and was presented with the following error:

error: building brotli:x64-linux failed with: BUILD_FAILED
Please ensure you're using the latest port files with `git pull` and `vcpkg update`.
Then check for known issues at:
    https://github.com/microsoft/vcpkg/issues?q=is%3Aissue+is%3Aopen+in%3Atitle+brotli
You can submit a new issue at:
    https://github.com/microsoft/vcpkg/issues/new?template=report-package-build-failure.md&title=[brotli]+Build+error
Include '[brotli] Build error' in your bug report title, the following version information in your bug description, and attach any relevant failure logs from above.
    vcpkg-tool version: 2022-09-01-dfb82802c8cc562ce3b665a904a65b22314de724
    vcpkg-scripts version: 01b29f6d8 2022-09-16 (2 days ago)

You can also use the prefilled template from /root/vcpkg/installed/vcpkg/issue_body.md.

The “prefilled template” .md file referred to in the last line informed me that pkg-config needed to be installed, so I did the following:

apt install pkg-config

then I made sure I was back in the /root/vcpkg directory [cd /root/vcpkg] and ran the install command again [vcpkg install brotli]

Configure Apache2

sudo a2enmod brotli

Next, enable brotli in the host config file for the website in question (for example nano /etc/apache2/sites-available/<<mysite>>.conf if it’s a site that’s not running yet or nano /etc/apache2/sites-enabled/<<mysite>>.conf if the site is currently enabaled on your server). Add the following to the config file:

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

the config file should now look like this:

<VirtualHost *:80>
      ServerAdmin webmaster@localhost
      ServerName example.com
      DocumentRoot /var/www/
 
      <IfModule mod_brotli.c>
            AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript
      </IfModule>
 
      ErrorLog ${APACHE_LOG_DIR}/error.log
      CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost> 

Finally, reload apache2:

service apache2 reload

DIDN’T WORK!! Try this:

insert this code into .conf file instead:

<IfModule mod_headers.c>
    # Serve brotli compressed CSS files if they exist
    # and the client accepts brotli.
    RewriteCond "%{HTTP:Accept-encoding}" "br"
    RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
    RewriteRule "^(.*)\.css"              "$1\.css\.br" [QSA]

    # Serve brotli compressed JS files if they exist
    # and the client accepts brotli.
    RewriteCond "%{HTTP:Accept-encoding}" "br"
    RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
    RewriteRule "^(.*)\.js"               "$1\.js\.br" [QSA]


    # Serve correct content types, and prevent double compression.
    RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1]
    RewriteRule "\.js\.br$"  "-" [T=text/javascript,E=no-brotli:1]


    <FilesMatch "(\.js\.br|\.css\.br)$">
      # Serve correct encoding type.
      Header append Content-Encoding br

      # Force proxies to cache brotli &
      # non-brotli css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

That didn’t work either… I give up. For now!