Resource berbasis teks harus ditayangkan dengan kompresi untuk meminimalkan total byte jaringan. Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua resource berbasis teks yang tidak dikompresi:
Cara Lighthouse menangani kompresi teks
Lighthouse mengumpulkan semua respons yang:
- Memiliki jenis resource berbasis teks.
- Jangan sertakan header
content-encoding
yang ditetapkan kebr
,gzip
, ataudeflate
.
Lighthouse kemudian mengompresi masing-masing dengan GZIP untuk menghitung potensi penghematan.
Jika ukuran asli respons kurang dari 1,4 KiB, atau jika potensi penghematan kompresi kurang dari 10% dari ukuran asli, Lighthouse tidak akan menandai respons tersebut dalam hasil.
Cara mengaktifkan kompresi teks di server
Aktifkan kompresi teks di server yang menayangkan respons ini agar dapat lulus audit ini.
Saat meminta resource, browser akan menggunakan header permintaan HTTP
Accept-Encoding
untuk menunjukkan algoritma kompresi yang didukungnya.
Accept-Encoding: gzip, compress, br
Jika browser mendukung Brotli
(br
), Anda harus menggunakan Brotli karena dapat mengurangi ukuran file resource lebih besar daripada
algoritma kompresi lainnya. Telusuri how to enable Brotli compression in <X>
, dengan
<X>
adalah nama server Anda. Mulai Desember 2022, Brotli didukung di semua browser utama, kecuali Safari di iOS. Lihat
Kompatibilitas browser
untuk mengetahui update.
Gunakan GZIP sebagai fallback ke Brotli. GZIP didukung di semua browser utama, tetapi kurang efisien dibandingkan Brotli. Lihat Konfigurasi Server untuk mengetahui contohnya.
Server Anda akan menampilkan header respons HTTP Content-Encoding
untuk menunjukkan algoritma kompresi yang digunakannya.
Content-Encoding: br
Memeriksa apakah respons dikompresi di Chrome DevTools
Untuk memeriksa apakah server mengompresi respons:
Tekan Control+Shift+J
(atau Command+Option+J
di Mac) untuk membuka DevTools.
Klik tab Jaringan.
[komentar]: <> (Daftar berikut adalah kode singkat dari web.dev, tapi tidak diterjemahkan dari bahasa Inggris untuk bahasa apa pun.)
1. Tekan Control+Shift+J
(atau Command+Option+J
di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
3. Klik permintaan yang memicu respons yang Anda inginkan.
4. Klik tab Header.
5. Periksa header content-encoding
di bagian Header Respons.
Untuk membandingkan ukuran respons yang dikompresi dan didekompresi:
[komentar]: <> (Daftar berikut adalah kode singkat dari web.dev, tapi tidak diterjemahkan dari bahasa Inggris untuk bahasa apa pun.)
1. Tekan Control+Shift+J
(atau Command+Option+J
di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
3. Aktifkan baris permintaan besar.
Lihat Menggunakan baris permintaan besar.
4. Lihat kolom Ukuran untuk respons yang Anda minati. Nilai
teratas adalah ukuran terkompresi. Nilai terbawah adalah ukuran yang didekompresi.
Lihat juga Memperkecil dan mengompresi payload jaringan.
Panduan khusus stack
Joomla
Aktifkan setelan Kompresi Halaman Gzip (System > Global configuration > Server).
WordPress
Aktifkan kompresi teks di konfigurasi server web Anda.