Kompresi Gzip dan Brotli: Cara Mengaktifkan dan Mengeceknya

Diperbarui 16 Oktober 2026 · ±6 menit baca

Kompresi adalah cara mengecilkan file teks sebelum dikirim dari server ke browser. Browser lalu membukanya kembali secara otomatis. Untuk file seperti HTML, CSS, JavaScript, JSON, dan SVG, kompresi sering mengurangi ukuran transfer secara drastis karena teks mengandung banyak pola berulang. Jika Lighthouse menampilkan saran "Aktifkan kompresi teks", artinya server Anda mengirim file tanpa dikompres.

Bagaimana kompresi bekerja

Browser mengirim header Accept-Encoding yang menyebutkan format yang didukungnya, misalnya gzip, deflate, br.
Server memilih format yang didukung keduanya, mengompres file, lalu mengirimkannya dengan header Content-Encoding: br atau Content-Encoding: gzip.
Browser membuka kompresi dan memakai file seperti biasa.

Semua ini terjadi otomatis. Anda tidak perlu mengubah file di website, cukup mengaktifkannya di server atau CDN.

Gzip vs Brotli

Gzip – sudah ada sejak lama dan didukung oleh hampir semua browser dan server.
Brotli – format yang lebih baru dari Google. Pada file teks web, Brotli umumnya menghasilkan file lebih kecil dibanding gzip. Semua browser modern mendukungnya melalui HTTPS.

Praktik terbaik: aktifkan Brotli dan sediakan gzip sebagai cadangan.

File apa yang perlu dikompres

Kompres file berbasis teks:

HTML, CSS, JavaScript
JSON, XML (termasuk sitemap dan RSS)
SVG
Font lama seperti TTF dan EOT

Jangan mengompres ulang file yang sudah terkompresi, karena hanya membuang waktu CPU tanpa manfaat berarti:

Gambar JPEG, PNG, WebP, AVIF
Video dan audio
Font WOFF2 (sudah memakai Brotli di dalamnya)
File ZIP dan PDF yang sudah terkompresi

Mengaktifkan di Nginx

Gzip sudah tersedia di Nginx. Tambahkan di blok http:

gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_vary on;
gzip_proxied any;
gzip_types text/css application/javascript application/json image/svg+xml application/xml text/plain;

HTML (text/html) selalu dikompres saat gzip aktif, jadi tidak perlu ditulis di gzip_types. Untuk Brotli, Nginx membutuhkan modul tambahan ngx_brotli. Beberapa distribusi Linux menyediakannya sebagai paket, misalnya libnginx-mod-http-brotli-filter dan libnginx-mod-http-brotli-static di Debian dan Ubuntu versi baru. Setelah modul dimuat:

brotli on;
brotli_comp_level 5;
brotli_types text/css application/javascript application/json image/svg+xml application/xml text/plain;

Setelah mengubah konfigurasi, uji dengan nginx -t lalu muat ulang dengan systemctl reload nginx.

Mengaktifkan di Apache

Aktifkan modul mod_deflate untuk gzip, lalu tambahkan di .htaccess atau konfigurasi virtual host:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

Untuk Brotli, Apache 2.4.26 ke atas menyediakan mod_brotli:

<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript application/json image/svg+xml
</IfModule>

Di shared hosting, kompresi sering sudah aktif atau bisa dinyalakan dari panel. Server LiteSpeed juga mendukung gzip dan Brotli.

Mengaktifkan lewat Cloudflare

Jika website Anda memakai Cloudflare dengan proxy aktif (awan oranye), Cloudflare otomatis mengompres konten yang dikirim ke pengunjung dengan Brotli atau gzip sesuai dukungan browser. Ini cara termudah jika Anda tidak punya akses ke konfigurasi server. Lihat Caching & CDN untuk Pemula.

Tingkat kompresi

Baik gzip maupun Brotli memiliki tingkat kompresi. Tingkat lebih tinggi menghasilkan file lebih kecil tetapi memakai CPU lebih banyak. Untuk kompresi langsung saat permintaan datang, tingkat menengah (sekitar 4–6) biasanya memberi keseimbangan yang baik. Untuk file statis, Anda bisa membuat versi .br dan .gz terlebih dahulu dengan tingkat maksimal saat build, lalu server cukup mengirimkannya (fitur gzip_static dan brotli_static di Nginx).

Cara memeriksa apakah kompresi aktif

Dengan browser: buka DevTools (F12), tab Network, muat ulang halaman, klik file HTML atau CSS, dan lihat header respons content-encoding. Nilainya br atau gzip jika kompresi aktif.

Dengan baris perintah:

curl -s -o /dev/null -D - -H "Accept-Encoding: br, gzip" https://contoh.com/ | grep -i content-encoding

Dengan webmaster.my.id: uji website Anda di halaman utama. Jika saran "Aktifkan kompresi teks" tidak muncul lagi, kompresi sudah bekerja.

Kesalahan yang sering terjadi

Kompresi ganda – plugin PHP dan server sama-sama mengompres. Biasanya cukup aktifkan di server.
Lupa header Vary – tanpa Vary: Accept-Encoding, cache perantara bisa mengirim versi terkompresi ke klien yang tidak mendukungnya. Opsi gzip_vary on mengatasinya.
Tipe MIME tidak lengkap – misalnya JavaScript dikirim dengan tipe yang tidak tercantum di daftar, sehingga tidak dikompres.

Contoh pengecekan langkah demi langkah

Misalkan Lighthouse menampilkan saran "Aktifkan kompresi teks" untuk file main.css dan app.js. Lakukan pengecekan berikut:

Jalankan perintah di bawah ini dan lihat apakah muncul header content-encoding:

curl -sI -H "Accept-Encoding: br, gzip" https://contoh.com/css/main.css

Jika tidak ada, periksa konfigurasi server. Pada Nginx, sering kali gzip on sudah aktif tetapi gzip_types belum mencantumkan text/css dan application/javascript, sehingga hanya HTML yang dikompres.
Tambahkan jenis file yang diperlukan, uji konfigurasi dengan nginx -t, lalu muat ulang dengan systemctl reload nginx.
Jika situs memakai Cloudflare, ingat bahwa Cloudflare bisa mengompres file ke pengunjung, tetapi file yang sudah tersimpan di cache-nya mungkin perlu dibersihkan agar header baru terlihat.
Uji ulang di webmaster.my.id dan pastikan saran tersebut hilang.

Checklist kompresi

HTML, CSS, JavaScript, JSON, XML, dan SVG dikompres.
Gambar, video, WOFF2, ZIP, dan PDF tidak dikompres ulang.
Brotli aktif jika server atau CDN mendukung, dengan gzip sebagai cadangan.
Header Vary: Accept-Encoding dikirim agar cache menyimpan versi yang benar.
Tingkat kompresi dinamis tidak terlalu tinggi sehingga membebani CPU.
File statis besar bisa dikompres lebih dulu saat build jika server mendukung gzip_static atau brotli_static.
Hasilnya diperiksa dengan curl atau tab Network di DevTools.

Kesalahan umum tambahan

Hanya menguji HTML. Banyak server mengompres HTML secara bawaan, tetapi tidak CSS dan JavaScript.
Lupa memuat ulang server. Perubahan konfigurasi tidak berlaku sebelum server dimuat ulang.
Mengira Cloudflare otomatis menyelesaikan semua. Kompresi antara server asal dan Cloudflare tetap bermanfaat, dan cache lama bisa menyimpan file versi sebelumnya.
Memakai tingkat Brotli tertinggi untuk kompresi dinamis. Tingkat tertinggi cocok untuk kompresi saat build, bukan untuk setiap permintaan.

Pertanyaan yang sering diajukan

Apakah kompresi memengaruhi skor Lighthouse?

Ya. Lighthouse punya audit khusus untuk kompresi teks, dan file yang lebih kecil juga mempercepat FCP serta LCP, terutama di jaringan seluler.

Apakah kompresi membebani server?

Ada sedikit beban CPU, tetapi pada tingkat kompresi sedang biayanya kecil dibanding penghematan bandwidth dan waktu transfer.

Bagaimana mengaktifkan Brotli di Nginx?

Nginx bawaan tidak selalu menyertakan modul Brotli. Anda perlu memasang modul ngx_brotli dari paket distribusi atau membangunnya sendiri. Jika tidak memungkinkan, gzip saja sudah memberi manfaat besar.

Apakah hosting shared bisa mengaktifkan kompresi?

Banyak hosting sudah mengaktifkannya. Jika belum, Anda bisa menambahkan aturan mod_deflate di .htaccess pada server Apache atau LiteSpeed, atau menghubungi penyedia hosting.

Kenapa tab Network menampilkan ukuran berbeda dari ukuran file?

Tab Network menampilkan ukuran transfer, yaitu ukuran setelah dikompres, dan ukuran asli setelah dibuka. Selisih keduanya menunjukkan seberapa besar penghematan kompresi.

Apakah perlu mengompres file JSON dari API?

Ya, jika respons API berukuran besar. JSON adalah teks dan biasanya mengecil cukup banyak setelah dikompres. Pastikan application/json tercantum dalam daftar jenis file yang dikompres.

Apakah kompresi masih diperlukan jika file sudah diminify?

Ya. Minify dan kompresi saling melengkapi. Minify menghapus spasi, komentar, dan karakter yang tidak diperlukan, sedangkan kompresi mengecilkan pola teks yang berulang saat file dikirim. Kombinasi keduanya menghasilkan ukuran transfer paling kecil, sehingga sebaiknya keduanya diaktifkan bersama di server atau CDN Anda.

Bagaimana jika kompresi membuat situs error?

Biasanya penyebabnya adalah file yang dikompres dua kali oleh plugin dan server sekaligus. Matikan kompresi di salah satu lapisan, bersihkan cache, lalu uji ulang halaman tersebut.

Ringkasan

Kompresi teks adalah perbaikan murah dengan dampak besar. Aktifkan Brotli dan gzip di server atau CDN, kompres hanya file teks, gunakan tingkat kompresi menengah, dan periksa hasilnya dengan DevTools atau tes ulang. Gabungkan dengan minify CSS/JS untuk hasil terbaik.