Belajar Caddy - Compression & Caching

#Pendahuluan

Situs yang lambat kehilangan pengunjung. Untungnya, sebagian besar latensi bisa ditekan di level web server: mengompresi respons, memanfaatkan cache browser, dan memakai protokol modern. Episode 21 membahas optimasi performa di Caddy.

Kalian akan belajar directive encode untuk kompresi gzip, brotli, dan zstd, precompressed files untuk menghemat CPU, pengaturan Cache-Control untuk aset statis, HTTP/2 dan HTTP/3 yang aktif otomatis, serta tuning koneksi untuk beban produksi.

Semua teknik ini membuat situs terasa instan tanpa mengubah aplikasi sama sekali.

#Directive encode

#gzip, brotli, dan zstd

encode mengompresi respons sebelum dikirim:

example.com {
    encode zstd gzip
    root * /var/www
    file_server
}

Caddy memilih algoritma terbaik yang didukung browser: zstd (paling efisien) dengan fallback gzip. Urutan di Caddyfile menentukan prioritas.

#Batasan Kompresi

Beberapa hal yang perlu diperhatikan:

• Content type: Caddy hanya mengompresi tipe teks seperti HTML, CSS, dan JSON. Gambar dan video sudah terkompresi dan dilewati.
• Ukuran minimum: file kecil tidak dikompresi karena overhead-nya tidak sebanding.
• Kesalahan default: jika ingin menonaktifkan untuk path tertentu, gunakan matcher.

#Precompressed Files

#Menyajikan File yang Sudah Dikompresi

Untuk situs dengan aset besar, kompresi per request memakan CPU. Solusinya: kompres sekali saat build, layani terus:

example.com {
    encode zstd gzip
    root * /var/www
    file_server {
        precompressed zstd gzip
    }
}

Jika style.css.zst dan style.css.gz ada di samping style.css, Caddy mengirim versi terkompresi tanpa kerja ekstra. Kombinasi encode + precompressed memberi fleksibilitas: file yang dikompresi saat build dipakai, sisanya dikompresi on-the-fly.

#Membuat File Precompressed

Buat versi terkompresi saat build:

gzip -k -9 style.css
brotli -k -9 style.css

gzip -k -9 style.css menghasilkan style.css.gz dengan tingkat kompresi maksimal. Tambahkan langkah ini ke pipeline build frontend kalian.

#Cache-Control Headers

#Cache Aset Statis

Browser menyimpan aset yang diberi izin cache. Atur dengan header:

example.com {
    root * /var/www
    header {
        Cache-Control "public, max-age=86400"
    }
    file_server
}

Cache-Control public, max-age=86400 membuat browser menyimpan respons selama sehari. Untuk aset yang tidak pernah berubah:

example.com {
    @aset {
        path /static/*
    }
    header @aset Cache-Control "public, max-age=31536000, immutable"
    root * /var/www
    file_server
}

immutable memberi tahu browser bahwa aset dengan nama hash tidak akan berubah — boleh disimpan selama setahun. header @aset ... menerapkannya hanya pada path /static/*.

#Cache Busting

Karena aset hashed boleh di-cache lama, pastikan nama file berubah saat konten berubah. Alat build modern (webpack, vite) menambahkan hash pada nama file otomatis — style.a1b2c3.css. Inilah cache busting: konten baru, nama baru, browser mengambil versi baru.

#HTTP/2 dan HTTP/3

#Protokol Modern Otomatis

Caddy mengaktifkan HTTP/2 dan HTTP/3 secara otomatis:

• HTTP/2: multiplexing banyak request dalam satu koneksi, aktif default.
• HTTP/3 (QUIC): berjalan di atas UDP, mengurangi latensi handshake, aktif jika port UDP 443 terbuka.

Tidak ada konfigurasi yang dibutuhkan — kalian hanya perlu memastikan port UDP 443 tidak diblokir firewall.

#Server Push dan Stream Prioritization

• Server push HTTP/2 dihapus dari spesifikasi — jangan mengandalkannya.
• Stream prioritization ditangani protokol; Caddy mengaturnya otomatis.

Yang penting kalian lakukan: biarkan Caddy memilih protokol dan jangan menurunkan versi secara paksa.

#Tuning Koneksi

#Keep-Alive dan Timeouts

Untuk beban produksi, sesuaikan batas koneksi:

{
    servers {
        protocols h1 h2 h3
        max_header_size 64KB
        timeouts {
            idle 5m
        }
    }
}
 
example.com {
    encode zstd gzip
    root * /var/www
    file_server
}

• protocols h1 h2 h3 — aktifkan semua protokol termasuk QUIC.
• max_header_size 64KB — batasi ukuran header.
• idle 5m — koneksi menganggur bertahan 5 menit sebelum ditutup.

Keep-alive menjaga koneksi tetap hidup antar request, menghindari biaya handshake berulang. Sesuaikan idle dengan pola traffic — terlalu pendek membuat koneksi sering dibuat ulang, terlalu panjang menahan resource.

#Buffer dan Pooling

Caddy menangani buffer dan connection pooling secara internal. Untuk reverse proxy, kita sudah melihat dial_timeout dan max_conns_per_host di episode 14. Prinsipnya: biarkan default, ubah hanya saat ada masalah yang terukur.

#Penutup

Episode 21 mengoptimalkan performa: encode untuk kompresi gzip, brotli, dan zstd, precompressed files untuk menghemat CPU, Cache-Control untuk aset statis dengan immutable dan cache busting, HTTP/2 dan HTTP/3 yang otomatis, serta tuning keep-alive dan timeouts.

Inti yang harus dibawa pulang:

• encode zstd gzip memberikan kompresi terbaik dengan fallback.
• Precompressed files menghemat CPU untuk aset besar.
• Cache-Control public, max-age=31536000, immutable untuk aset hashed.
• HTTP/2 dan HTTP/3 aktif otomatis; buka port UDP 443 untuk QUIC.
• Keep-alive dan idle timeout memengaruhi biaya koneksi.
• Cache busting dengan hash nama file membuat cache aman.

Di episode 22 selanjutnya kita akan membahas logging & monitoring — directive log dengan format Common, JSON, dan custom, output ke file atau stdout, akses log fields, agregasi dengan ELK dan Loki, Prometheus metrics via admin API, serta teknik debugging dengan log level.