Enable Brotli Compression

Table of Contents

Brotli adalah modul web server (Apache, Nginx) yang digunakan untuk mengompresi konten web sebelum dikirim ke browser pengguna. Algoritma ini dikembangkan oleh Google dan dikenal memiliki rasio kompresi lebih tinggi dibanding Gzip, sehingga ukuran file lebih kecil, kecepatan loading situs lebih cepat, dan penggunaan bandwidth lebih hemat.

Kelebihan Brotli:

Kompresi lebih efisien daripada Gzip, terutama untuk file text (HTML, CSS, JS).
Mendukung kualitas kompresi yang bisa dikonfigurasi (skala 0-11).
Bisa digunakan bersamaan dengan Gzip sebagai fallback untuk browser lama.

Kekurangan Brotli:

Tidak didukung oleh browser lama (misalnya Internet Explorer).
Proses kompresi membutuhkan lebih banyak CPU, terutama di kualitas tinggi.
Berpotensi rentan terhadap serangan BREACH jika digunakan pada data sensitif via HTTPS.

Apache
#

Enable the Brotli Module
#

Pastikan modul Brotli sudah dimuat (loaded) pada server web Apache.

httpd -t -D DUMP_MODULES | grep -i brotli

Output yang diharapkan:

 brotli_module (shared)

Enable HTTPS
#

Konfigurasikan SSL pada VirtualHost Apache. Anda dapat menggunakan layanan SSL gratis seperti ZeroSSL atau Let’s Encrypt.

Configure Brotli Compression
#

Konfigurasikan Brotli agar aktif secara global.

nano /etc/httpd/conf.d/brotli.conf

Isi konfigurasi:

<IfModule mod_brotli.c>
    BrotliCompressionQuality 6

    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css text/javascript text/xml
    AddOutputFilterByType BROTLI_COMPRESS application/javascript application/x-javascript application/json
    AddOutputFilterByType BROTLI_COMPRESS application/xml application/rss+xml application/atom+xml
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml application/ld+json application/manifest+json
    AddOutputFilterByType BROTLI_COMPRESS font/ttf font/otf application/vnd.ms-fontobject
    AddOutputFilterByType BROTLI_COMPRESS application/x-font-ttf image/x-icon

    SetEnvIfNoCase Content-Length ^[0-9]{1,3}$ no-brotli
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|gz|mp4|webm)$ no-brotli

    Header append Vary Accept-Encoding env=!no-brotli
</IfModule>

Jika Anda menggunakan Gzip secara bersamaan, pastikan urutan konfig Brotli diletakan diatas konfig Gzip.

Restart Apache Server
#

systemctl restart httpd

Test Brotli Compression
#

Untuk menguji Brotli, Anda bisa menggunakan situs Brotli.Pro atau perintah curl berikut:

curl -I -H 'Accept-Encoding: br' https://example.com

Contoh output:

HTTP/1.1 200 OK
Date: Sun, 15 Oct 2023 00:43:20 GMT
Server: Apache
X-Powered-By: PHP/7.2.34
Vary: Accept-Encoding
Content-Encoding: br
Content-Type: text/html; charset=UTF-8

Nginx
#

Langkah-langkahnya kurang lebih mirip dengan Apache, yaitu mengaktifkan modul Brotli, mengonfigurasi SSL, lalu mengaktifkan kompresi.

Enable the Brotli Module
#

Unduh source code Nginx sesuai versi yang Anda gunakan:

wget https://nginx.org/download/nginx-1.24.0.tar.gz
tar -xvf nginx-1.24.0.tar.gz

Clone modul Brotli dari repository GitHub:

git clone --recurse-submodules -j8 https://github.com/google/ngx_brotli

Compile modul Brotli sebagai dynamic module:

cd nginx-1.24.0
./configure --with-compat --add-dynamic-module=/root/ngx_brotli
make modules

Jika proses compile berhasil, salin file modul ke direktori modules Nginx:

cp objs/ngx_http_brotli_filter_module.so /usr/share/nginx/modules
cp objs/ngx_http_brotli_static_module.so /usr/share/nginx/modules

Load Brotli Module
#

Buat direktori konfigurasi modul dan file konfigurasi Brotli:

mkdir -p /etc/nginx/modules.conf.d
nano /etc/nginx/modules.conf.d/brotli.conf

Isi file konfigurasi:

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Edit nginx.conf dan tambahkan baris berikut di bagian paling atas atau sebelum blok events {:

include /etc/nginx/modules.conf.d/*.conf;

Enable HTTPS
#

Konfigurasikan SSL pada server block (virtual host). Anda dapat menggunakan layanan SSL gratis seperti ZeroSSL atau Let’s Encrypt.

Configure Brotli Compression
#

Aktifkan Brotli secara global dengan membuat file konfigurasi berikut:

nano /etc/nginx/conf.d/brotli.conf

Isi konfigurasi:

brotli on;
brotli_static on;
brotli_comp_level 6;
brotli_min_length 1000;
brotli_types text/plain text/html text/css text/xml text/javascript
             application/javascript application/x-javascript application/json
             application/xml application/rss+xml application/atom+xml
             image/svg+xml application/ld+json application/manifest+json
             font/ttf font/otf application/vnd.ms-fontobject
             application/x-font-ttf image/x-icon;

location ~* \.(gif|jpe?g|png|zip|gz|mp4|webm)$ {
    brotli off;
    gzip off;
    expires max;
}

add_header Vary Accept-Encoding;

Jika Anda menggunakan Gzip secara bersamaan, pastikan urutan konfig Brotli diletakan diatas konfig Gzip.

Restart Nginx Server
#

systemctl restart nginx

Test Brotli Compression
#

Untuk menguji apakah Brotli sudah aktif, Anda dapat menggunakan situs Brotli.Pro atau perintah curl berikut:

curl -I -H 'Accept-Encoding: br' https://example.com

Contoh output jika Brotli aktif:

HTTP/1.1 200 OK
Server: nginx
Date: Sun, 15 Oct 2023 10:06:16 GMT
Content-Type: text/html
Connection: keep-alive
Last-Modified: Mon, 18 Sep 2023 10:27:13 GMT
ETag: W/"678-6059f95e4c240"
Content-Encoding: br