Materi
Panel jaringan menampilkan lebih dari satu ukuran untuk setiap berkas. MDN memberi definisinya lewat Resource Timing: decodedBodySize adalah ukuran badan respons setelah kompresi dibuka (ukuran asli berkas), encodedBodySize adalah ukuran badan yang diterima sebelum kompresi dibuka, dan transferSize adalah ukuran yang lewat jaringan, yaitu badan terkode ditambah header respons. transferSize bernilai 0 bila berkas diambil langsung dari cache lokal.
Kompresi dirundingkan lewat header. Peramban mengirim Accept-Encoding berisi algoritma yang didukungnya, misalnya br dan gzip; server memilih satu, mengompres badan, dan menyebut pilihannya di Content-Encoding. MDN mencatat server juga mengirim Vary: Accept-Encoding supaya cache menyimpan versi yang tepat. web.dev menyebut Brotli memberi sekitar 15–20% penghematan tambahan dibanding gzip, dan berkas yang sangat kecil, di bawah 1 KiB, hampir tidak menyusut.
| Berkas (contoh) | Asli | Terkode | Content-Encoding |
|---|---|---|---|
| gaya.css | 90.000 B | 18.000 B | br |
| foto-toko.jpg | 210.000 B | 210.000 B | — |
Penghematan gaya.css adalah (90.000 − 18.000) ÷ 90.000 = 80%. Kompresi berguna untuk teks: HTML, CSS, JavaScript, JSON, dan SVG. MDN menyarankan kompresi untuk semua berkas kecuali yang sudah terkompres, seperti gambar JPEG, audio, dan video; foto-toko.jpg di tabel memang tidak perlu Content-Encoding.
